ASP.net mvc Jqueryタブ内でのフォーム検証

Question

Jqueryタブを使用してコンテンツをレイアウトする単純なASP.net MVC Webiteがあります。タブの1つでは、ユーザーがシステム設定の詳細を更新できるようにする、独自のモデルにバインドされた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 %> 

そして、これが提出する方法である：ここでは、レンダリングされているpartialviewの部分がある

<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フォームヘルパーの部分的な更新と検証を持っているしたいと仮定していますか？この場合、Html.BeginFormヘルパーを使用するのではなく、代わりにAjax.BeginForm Helperを使用することができます。 Ajax.BeginForm Helperを使用すると、完全なポストバックを発生させることなく、フォーム送信アクションによって返されたViewで更新されるDOM要素（IDを介して）を指定できます。ここではカミソリの構文を使用してコードの例です：

@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フレームワークが更新されます<div id="resultDiv">さんとの内容がajaxを使用してUsrCtlSystemSetupアクションによって返されたPartialView。これがあなたが達成したいと思うものだと私は信じていますか？

また、Asp.Net Ajaxヘルパを捨て、jQueryを使用してサーバーへのajax呼び出しを発行し、応答を取得し、クライアントまたはサーバー上でhtmlを生成することができます。しかし、すでにAsp.netのフォームと検証機能を使用しているので、フレームワークの方法は確実にうまくいくでしょう。