ASP.net mvc Form validation within Jquery Tab

Question

I have a simple ASP.net mvc webite which using Jquery tabs to layout the content. In one of the tabs I render a PartialView which is bound to its own model which allows the user to update their system setup details. Here is a portion of the partialview being rendered:

<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl(of SystemSetupViewModel)" %>
 <% Using Html.BeginForm("UsrCtlSystemSetup", "User", FormMethod.Post)%>  
 <%: Html.ValidationSummary(True, "Invalid details supplied.")%>     
 <div class="tabDynamicHeight ">
 <div class="FormFullRow formLayoutLabel">

  <div class="Seperator">
<div class="FormFullRow longInput">
    <%: Html.LabelFor(Function(model) model.WebsiteAddress)%>
<%: Html.TextBoxFor(Function(model) model.WebsiteAddress)%>
<%: Html.ValidationMessageFor(Function(model) model.WebsiteAddress)%>  
</div>                                 
<small class="helpText FullRow">Your Companies Website     Address.</small>                                                       
</div> 

 </div>

   <div class="FloatButtonLeft">
           <input type="submit" value="Save" class="FloatButtonLeft BlueBtnMedium" />  
     </div>

 </div>
   <% End Using %>

And this is the submit method:

  <HttpPost()> _
    <ValidateInput(False)> _
    Public Function UsrCtlSystemSetup(ByVal btnSubmit As String, ByVal model As SystemSetupViewModel) As ActionResult            
        model.SaveChanges()
        Return PartialView("UsrCtlSystemSetup", model)
    End Function

The problem I have is what should be returned from this method. Returning a partialView just returns a partialview which takes up the entire page. I need to be able to somehow just return the partial view back into the holding jquery tab. Is this possible? I could do a RedirectToAction back to the parent page action, but this would mean if there is errors in the partialviews model that is being submitted i wont be able to show it. Hope this makes sense.

Thanks in advance

you can try to update just the partial part of the page for instance the tab with ajax — COLD TOLD, Mar 06 '12 at 03:22
any chance you can elaborate on this? Or provide a link to an example? — Matt, Mar 06 '12 at 04:25
please find more info for MVC and AJAX implementation in below link http://stackoverflow.com/questions/7333904/asp-net-mvc-3-ajax/7334036#7334036 — alok_dida, Mar 06 '12 at 04:45

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

I am assuming that you would like to have partial updates and validation on your UsrCtlSystemSetup Form Helper? If this is the case, rather than using the Html.BeginForm Helper, you can use the Ajax.BeginForm Helper instead. With the Ajax.BeginForm Helper, you can specify a DOM element(via its id) to be updated with the View returned by the form submit Action, without causing a full post back. Here is an example on your code using Razor syntax:

@using (Ajax.BeginForm("UsrCtlSystemSetup", "User", null, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "resultDiv", HttpMethod = "Post", OnSuccess = "AjaxDone" }, new { @id = "myFormId" }))
{
    <div id="resultDiv">
        @Html.ValidationSummary(True, "Invalid details supplied.")     
        <div class="tabDynamicHeight ">
            <div class="FormFullRow formLayoutLabel">
                <div class="Seperator">
                    <div class="FormFullRow longInput">
                        @Html.LabelFor(Function(model) model.WebsiteAddress)
                        @Html.TextBoxFor(Function(model) model.WebsiteAddress)
                        @Html.ValidationMessageFor(Function(model) model.WebsiteAddress) 
                    </div>                                 
                <small class="helpText FullRow">Your Companies Website     Address.</small>                                                       
                </div> 
            </div>
            <div class="FloatButtonLeft">
                <input type="submit" value="Save" class="FloatButtonLeft BlueBtnMedium" />  
            </div>
        </div>
    </div>
}

And here is your Controller implementation in C#:

    [HttpPost]
    public ActionResult UsrCtlSystemSetup(SystemSetupViewModel model)
    {
        try
        {
            if (ModelState.IsValid)
            {
                // Add implementation for when your model state is valid
                // I assumed a UsrCtlSystemSetupSuccess View to indicate that the form 
                // submit was parsed successfully
                return PartialView("UsrCtlSystemSetupSuccess", model)
            }
            else
            {
                // Add implementation for when your model state is NOT valid
                return PartialView("UsrCtlSystemSetup", model);
            }
        }
        catch
        {
            // Handle errors...
            return PartialView("UsrCtlSystemSetup", model);
        }
    }

With this setup, the Asp.Net framework will update <div id="resultDiv">'s content with the PartialView returned by the UsrCtlSystemSetup Action using ajax. I believe this is what you want to achieve?

Alternatively, you can ditch the Asp.Net Ajax Helpers and just use jQuery to issue an ajax call to the Server, get the response and generate the html yourself, either on the client or the server. But since you are already using the Asp.net forms and validation features, the framework way will work better for sure.

ASP.net mvc Form validation within Jquery Tab

1 Answers1

Linked