jQuery选项卡中的ASP.net MVC表单验证 [英] ASP.net mvc Form validation within Jquery Tab

问题描述

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

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

这是Submit方法:

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

我遇到的问题是此方法应返回什么.返回partialView只是返回一个占满整个页面的partialview.我需要能够以某种方式将部分视图返回到保留的jquery选项卡中.这可能吗?我可以做一个RedirectToAction回到父页面动作，但这意味着如果正在提交的partialviews模型中有错误，我将无法显示它.希望这是有道理的.

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.

预先感谢

推荐答案

我假设您希望对UsrCtlSystemSetup Form Helper进行部分更新和验证?在这种情况下，您可以使用而是使用Ajax.BeginForm Helper .使用Ajax.BeginForm Helper，您可以指定一个DOM元素(通过其id)，该元素将使用表单Submit Action返回的View更新，而不会引起完整的回发.这是使用Razor语法的代码示例:

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

这是您在C#中的Controller实现:

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);
        }
    }

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

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?

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

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.

这篇关于jQuery选项卡中的ASP.net MVC表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！