MVC 5 Ajax投稿全体フォーム - ajax呼び出しの代わりに

Question

MVC 5では基本的なAjax呼び出しのセットアップがありますが、私のAjaxフォームは実際にはPartialViewResultをメインビューに戻すのではなく、フルフォームをポストしているようですウィンドウは結果のPartialViewをレンダリングするだけです

私はここで何が欠けているかもしれませんか？

私はまた、次のjQueryは私の_Layout.cshtml

@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/jqueryval") 

MAINVIEW

@{ 
    ViewBag.Title = "Puzzles 1 & 2"; 
} 
<h2>@ViewBag.Title</h2> 
<div> 
    @Html.Partial("Puzzle1Form") 
</div> 

PartialView

@model SixPivot_Code_Puzzles.Models.Puzzle1Model 


@using (Ajax.BeginForm("Puzzle1","Puzzles",new AjaxOptions { 
    InsertionMode = InsertionMode.Replace, 
    HttpMethod = "POST", 
    UpdateTargetId = "puzzle1-result", 
})) 
{ 
    @Html.AntiForgeryToken() 

    <div class="form-horizontal"> 
     <h4>Puzzle1</h4> 
     <hr /> 
     @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
     <div class="form-group"> 
      @Html.LabelFor(model => model.IntegerList, htmlAttributes: new { @class = "control-label col-md-2" })    
      <div class="col-md-10"> 
       @Html.TextBoxFor(model => model.IntegerList, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.IntegerList, "", new { @class = "text-danger" }) 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-md-offset-2 col-md-10"> 
       <input type="submit" value="Find Largest No." class="btn btn-default" /> 
      </div> 
     </div> 
    </div> 
} 
<div id="puzzle1-result"></div> 

<div> 
    @Html.ActionLink("Back to List", "Index") 
</div> 

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> 
} 

Cでレンダリングしています

[HttpPost]   
     public PartialViewResult Puzzle1(Puzzle1Model model) 
     { 
      if (ModelState.IsValid) 
      { 
       Puzzle1Model result = new Puzzle1Model(); 
       result.LargestInteger = FindLargestInt(model.IntegerList).ToString(); 
       result.IntegerList = model.IntegerList; 
       return PartialView("Puzzle1FormResult",result); 
      } 
      else { 
       return PartialView("Puzzle1Form",model); 
      }    
     } 

成功（Puzzle1FormResult.cshtml）にするPartialViewResult

@model SixPivot_Code_Puzzles.Models.Puzzle1Model 

<div> 
    <h4>Largest Integer</h4> 
    <hr /> 
    <p> 
     Largest Integer for the list "@Model.IntegerList" is : @Model.LargestInteger 
    </p>  
</div> 

Answer 1

jQueryがわかりやすいため、MVCでAjaxヘルパーを使用しないでください。あなたはそれをやってみることができます。

PartialView

@model SixPivot_Code_Puzzles.Models.Puzzle1Model 


<form class="form-horizontal" id="frmPuzzle1"> 
    @Html.AntiForgeryToken() 

    <div> 
    <h4>Puzzle1</h4> 
    <hr /> 
    @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
    <div class="form-group"> 
     @Html.LabelFor(model => model.IntegerList, htmlAttributes: new { @class = "control-label col-md-2" })    
     <div class="col-md-10"> 
      @Html.TextBoxFor(model => model.IntegerList, new { htmlAttributes = new { @class = "form-control" } }) 
      @Html.ValidationMessageFor(model => model.IntegerList, "", new { @class = "text-danger" }) 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-md-offset-2 col-md-10"> 
      <input type="submit" value="Find Largest No." class="btn btn-default" /> 
     </div> 
    </div> 
</div> 
<div id="puzzle1-result"></div> 

<div> 
    @Html.ActionLink("Back to List", "Index") 
</div> 

*私は、スクリプトのセクションを削除したお知らせ、あなたの代わりにあなたのレイアウトでこれを持っている必要があります。

MAINVIEW

@{ 
    ViewBag.Title = "Puzzles 1 & 2"; 
} 
<h2>@ViewBag.Title</h2> 
<div> 
    @Html.Partial("Puzzle1Form") 
</div> 

<script> 
    $(document).ready(function() { 
    $(document).on('submit', '#frmPuzzle1', function(e) { 
     // stop default form submission 
     e.preventDefault(); 

     $.ajax({ 
     url: '@Url.Action("Puzzle1", "Puzzles")', 
     type: 'POST', 
     data: $('#frmPuzzle1').serialize(), 
     success: function(html) { 
      $('#puzzle1-result').html(html); 
     } 
     }); 
    }); 
    }); 
</script> 

Answer 2

ヘルパーのAjax.*家族は、単に（例えば、定期的に古い形式）の標準的なHTMLの設定を追加し、いくつかのJavaScript ontrollerこと代わりにAJAXとしてそれを送信するデフォルトの動作をインターセプトします。言い換えれば、コードはであり、目立たないものはです。何らかの理由でJavaScriptを実行できない場合、単純なフォーム投稿の標準的な動作に戻ってしまいます。

したがって、AJAXリクエストを送信するのではなく、標準フォームの投稿を行っている場合は、AJAXコードの実行を妨げているページでJavaScriptエラーが発生する可能性があります。

Answer 3

アヤックス。*ヘルパーの家族は、単に代わりにAJAXとして送信する、標準的なHTMLの設定（例えば定期的に古い形式）とデフォルトの動作をインターセプトし、いくつかのJavaScriptを追加。言い換えれば、コードは邪魔にならない。何らかの理由でJavaScriptを実行できない場合、単純なフォーム投稿の標準的な動作に戻ってしまいます。