MVC 5 Ajax 发布整个表单 - 而不是 ajax 调用答案

【问题标题】：MVC 5 Ajax posting whole form - instead of ajax callMVC 5 Ajax 发布整个表单 - 而不是 ajax 调用
【发布时间】：2023-04-04 01:24:01
【问题描述】：

我在 MVC 5 中有一个基本的 ajax 调用设置，但似乎我的 Ajax 表单实际上是在发布完整的表单，而不是在主视图中返回 PartialViewResult，整个窗口只是使用 PartialView 呈现结果

建议我在这里可能缺少什么？

我的 _Layout.cshtml 中也有以下 jquery 渲染

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

主视图

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

部分视图

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

控制器

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

【问题讨论】：

标签： ajax asp.net-mvc asp.net-mvc-5

【解决方案1】：

Ajax.* 系列助手只需添加标准 HTML 设置（例如，常规旧表单）和一些拦截默认行为的 JavaScript，将其作为 AJAX 发送。换句话说，代码是不显眼的。如果由于某种原因无法运行 JavaScript，它将退回到执行简单表单发布的标准行为。

因此，如果它正在执行标准表单发布，而不是发送 AJAX 请求，那么您很可能在页面上遇到了阻止 AJAX 代码运行的 JavaScript 错误。

【讨论】：

嗯，据我所知，控制台没有js错误

【解决方案2】：

我倾向于不使用 MVC 中的 Ajax 助手，因为我发现 jQuery 更容易理解。你可以试试我的做法。

部分视图

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

*注意我删除了脚本部分，你应该在你的布局中使用它。

主视图

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

【讨论】：

谢谢！，我发现由于某种原因，当我将 jquery.unobstrusive-ajax.min.js 移动到 _layout 时 - 助手开始工作 - 可能来自我的一个子视图文件夹的路径是不正确

【解决方案3】：

Ajax.* 助手系列只需添加标准 HTML 设置（例如，常规旧表单）和一些拦截默认行为的 JavaScript，将其作为 AJAX 发送。换句话说，代码是不引人注目的。如果由于某种原因无法运行 JavaScript，它将退回到执行简单表单发布的标准行为。

【讨论】：