Question

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

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

我的_Layout.cshtml

中也有以下jquery渲染

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

控制器

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

Answer 1

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

因此，如果它正在执行标准表单发布，而不是发送AJAX请求，则很可能在页面上出现一些JavaScript错误，导致AJAX代码无法运行。

Answer 2

我倾向于尝试不在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>

Answer 3

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

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

3 个答案: