MVC 5 Ajax發佈整個表單 - 而不是ajax調用

我在MVC 5中有一個基本的Ajax調用設置，但似乎我的Ajax表單實際上發佈完整的表單，而不是在主視圖中返回PartialViewResult，整個窗口只是呈現與部分視圖的結果MVC 5 Ajax發佈整個表單 - 而不是ajax調用

建議我可能會在這裏失蹤？

我也有以下的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> 
}

Ç ontroller

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

PartialViewResult上的成功（Puzzle1FormResult.cshtml）

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

來源

2017-03-07 Danish

我傾向於嘗試不使用MVC中的Ajax幫助程序，因爲我發現jQuery更易於理解。你可以嘗試做到這一點。

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>

來源

2017-03-07 13:50:42 JB06

謝謝！我發現由於某種原因，當我將jquery.unobstrusive-ajax.min.js移至_layout時，助手開始工作 - 可能從我的一個子視圖文件夾路徑不正確 – Danish

的Ajax.*家庭傭工只需添加一個標準的HTML設置（一個普通的舊形式，例如）和一些JavaScript代碼攔截默認行爲，將其作爲AJAX發送。換句話說，代碼是不顯眼。如果由於某種原因JavaScript無法運行，它將回退到做簡單表單發佈的標準行爲。

因此，如果它正在執行標準表單發佈，而不是發送AJAX請求，那麼您很可能在頁面上發生了一些阻止AJAX代碼運行的JavaScript錯誤。

來源

2017-03-07 13:49:17

嗯，據我所見，控制檯中沒有js錯誤 – Danish

阿賈克斯。*家庭傭工只需添加一個標準的HTML設置（一個普通的舊形式，例如）和一些JavaScript截取的默認行爲，它發送的AJAX代替。換句話說，代碼是不顯眼的。如果由於某種原因JavaScript無法運行，它將回退到做簡單表單發佈的標準行爲。

來源

2018-01-10 11:15:09 raju

MVC 5 Ajax發佈整個表單 - 而不是ajax調用

回答

相關問題