在我的项目中,我在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");
}
结果我得到:
最佳答案
首先,您应该确保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" });
}