javascript - Ajax 开始表单更新 div

Question

在我的项目中，我在 DocumentsController 中有一个用于创建文档的主页，用户可以在其中更改文档的状态。如果状态为 NEW，则允许用户向文档添加新设备(“部件”)。

我的目标是在 ajax 表单提交时向 div#newDevice 插入一个字符串。但是，html 结果并未在我的主视图中呈现，而是呈现为链接 ..../PartsBoxes/CreatePartial。

我该如何解决这个问题？

我的主页部分:

<input type="button" value="Add a new box" id="addNewBoxButton" class="add_new_btn" />
<input type="button" value="Add box from db" id="addDBBoxButton" class="add_existent_btn" />

<hr />
<div id="newDevice"></div>
<hr />

 <script>
    $("#addNewBoxButton").on("click", function () {
        var deviceId = 1;
        $.get('@Url.Action("CreatePartial", "PartsBoxes")',{
            deviceId: deviceId
        },
            function (data) {
                $("#newDevice").html(data);
            });

    });
</script>

我的部分观点:

@model NTStock.Models.BoxPartsViewModel

@{
    ViewBag.Title = "Create";
}

@using (Ajax.BeginForm("CreatePartial", new AjaxOptions { UpdateTargetId = "newDevice" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })


        @Html.HiddenFor(model => model.DocumentId)


        <div class="form-group">
            @Html.LabelFor(model => model.InternalName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.InternalName, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
                @Html.ValidationMessageFor(model => model.InternalName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.SerialNumber, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.SerialNumber, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.SerialNumber, "", new { @class = "text-danger" })
            </div>
        </div>


        //......///

        <div class="form-group deviceManipulations">
            @Html.LabelFor(model => model.DeinstallationDate, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.DeinstallationDate, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.DeinstallationDate, "", new { @class = "text-danger" })
            </div>
        </div>


        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save box" class="btn btn-default" />
            </div>
        </div>
    </div>
}

和方法:

  [HttpPost]
  [ValidateAntiForgeryToken]
  public ContentResult CreatePartial(BoxPartsViewModel partsBox)
  {
      if (ModelState.IsValid)
      {
         //do something
      }
      return Content("string to return");
  }

结果我得到:

Answer 1

首先，您应该确定 jquery.unobtrusive-ajax 已加载到您的页面中，并且您没有使用 jquery 1.9 版本，因为它不支持 jquery 实时方法。

引用:http://jquery.com/upgrade-guide/1.9/

<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

然后我建议使用 jquery .load() 函数将部分 View 加载到目标元素中，并使用 JsonResult 而不是 ActionResult 来像下面这样实现你的目标。

//jquery

<script>
    $("#addNewBoxButton").on("click", function () {
        var deviceId = 1;
        $("#newDevice").load('@Url.Action("CreatePartial", "PartsBoxes")' + "/" deviceId );  
    });
</script>

// Controller

[HttpPost]
[ValidateAntiForgeryToken]
public JsonResult CreatePartial(BoxPartsViewModel partsBox)
{ 
   if (ModelState.IsValid)
   {
      //do something
   }
   return Json(new { data = "string to return" });
}