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调用

回答

相关问题