Jquery Tab 中的 ASP.net mvc 表单验证

Question

我有一个简单的 ASP.net mvc 网站，它使用 Jquery 选项卡来布局内容。在其中一个选项卡中，我呈现了一个绑定到自己的模型的 PartialView，它允许用户更新他们的系统设置详细信息。这是正在渲染的部分视图的一部分：

<%@ 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 %>

这是提交方法：

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

我的问题是应该从这个方法返回什么。返回一个partialView 只是返回一个占据整个页面的partialview。我需要能够以某种方式将部分视图返回到持有的 jquery 选项卡中。这可能吗？我可以执行 RedirectToAction 返回父页面操作，但这意味着如果正在提交的部分视图模型中有错误，我将无法显示它。希望这是有道理的。

提前致谢

Answer 1

我假设您希望对您的 UsrCtlSystemSetup 表单助手进行部分更新和验证？如果是这种情况，您可以使用 Ajax.BeginForm Helper 而不是使用 Html.BeginForm Helper。使用 Ajax.BeginForm 帮助程序，您可以指定一个 DOM 元素（通过其 id），以使用表单提交操作返回的视图进行更新，而不会导致完整的回发。这是使用 Razor 语法的代码示例：

@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>
}

这是你在 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);
        }
    }

通过此设置，Asp.Net 框架将使用 ajax 使用 UsrCtlSystemSetup Action 返回的 PartialView 更新 <div id="resultDiv"> 的内容。我相信这就是您想要实现的目标？

或者，您可以放弃 Asp.Net Ajax Helpers，而只使用 jQuery 向服务器发出 ajax 调用，获取响应并自己在客户端或服务器上生成 html。但是由于您已经在使用 Asp.net 表单和验证功能，因此框架方式肯定会更好。