Question

在我的项目中，我有一个用于在DocumentsController中创建文档的主页面，用户可以在其中更改文档的状态。如果状态为NEW，则允许用户在文档中添加新设备（＆＃34; part＆＃34;）。

我的目标是在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()函数将部分视图加载到目标元素中，并使用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" });
}

Ajax开始表单更新div

1 个答案: