Question

我有一个简单的ASP.net mvc webite，它使用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返回到父页面操作，但这意味着如果正在提交的partialviews模型中存在错误，我将无法显示它。希望这是有道理的。

提前致谢

Answer 1

我假设您希望对您的UsrCtlSystemSetup表单助手进行部分更新和验证？如果是这种情况，则可以使用Ajax.BeginForm Helper而不是使用Html.BeginForm Helper。使用Ajax.BeginForm Helper，您可以指定一个DOM元素（通过其id），使用表单提交Action返回的View进行更新，而不会导致完整的回发。以下是使用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＃中的Controller实现：

    [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表单和验证功能，因此框架方式肯定会更好。

ASP.net mvc在Jquery Tab中进行表单验证

1 个答案: