在我的项目中,我在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");
  }


结果我得到:
javascript - Ajax beginform更新div-LMLPHP

最佳答案

首先,您应该确保jquery.unobtrusive-ajax已加载到页面中,并且您不使用jquery 1.9版本,因为它不支持jquery live方法。

参考:http://jquery.com/upgrade-guide/1.9/

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


然后,我建议使用jquery .load()函数将部分视图加载到目标元素中,并使用JsonResult而不是ActionResult来实现您的目标,如下所示。

// jQuery

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


//控制器

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

10-07 19:24
查看更多