【发布时间】：2016-05-03 08:01:26
【问题描述】：
这是一个奇怪的问题，我相信这很简单，但我找不到其他有相同问题的帖子。我有一个带有 AJAX.BeginForm() 的 MVC 视图，它发布到我的控制器。此外，我在表单上方有一个搜索框（输入），当按下 Enter 键时，它会向我的控制器 (GetData) 执行 JQuery ajax 发布，以便在提交之前自动填充一些表单字段。奇怪的是，如果使用搜索字段，它成功地用数据填充表单字段，但表单的提交按钮停止工作（表单根本不提交）！现在，如果我不使用搜索字段（执行 ajax POST）并手动填写表单字段，然后点击提交，它会正确提交给我的控制器。
GetData（字段预填充操作）返回我读入表单对象的 JSON 化模型对象。
表单位于以主 ViewModel 作为其模型的 PartialView 中。搜索框在 _Layout 页面中，剃刀视图上没有模型。
下面的代码被简化为相关的块（如果我遗漏了重要的部分，请告诉我）：
_Layout.cshtml：
<body>
<div id="bodyFrame">
@RenderBody()
</div>
<footer>
<span>Project Number:</span><input id="projectSearch" type="text" />
<div id="inputFrame">
@{ Html.RenderPartial("InputPartialView"); }
</div>
</footer>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/scripts")
@RenderSection("scripts", required: false)
</body>InputPartialView.cshtml：
@using (Ajax.BeginForm("AddEntry", new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "bodyFrame", InsertionMode = InsertionMode.Replace }))
{
/*Table with numerous HTML helper input fields for my model*/
<input type="submit" value="Submit" />
}
Main.js（在搜索框中按Enter键预填充表单数据的方法）：
$('#projectSearch').keyup(function (event) {
if (event.keyCode == 13) {
$.ajax({
url: '/Home/GetData',
dataType: 'json',
type: 'POST',
data: {
project: $(this).val()
},
success: function (data) {
$('#tb_Client').val(data.Client);
/*Other field values filled the same way*/
},
fail: function () {
alert('fail');
}
});
}
});控制器操作：
[HttpPost]
public JsonResult GetData(string search)
{
var result = new SubModel(); //This is a submodel of the main viewmodel
/*Pull in data via SQL into result*/
return Json(result);
}
[HtppPost]
public ActionResult AddEntry(ReportLogViewModel model)
{
/*Only works if search function is not called*/
return PartialView("Index", ViewModel.Generate());
}
总结一下：搜索功能（GetData）一直有效，表单只有在不使用搜索功能时才有效（一旦使用，表单不会提交给控制器），浏览器控制台不会出错.正常用法是：
- 在搜索输入中输入查询，按回车
- 调用 GetData 操作，通过 $.ajax() 检索和返回数据，然后用返回的数据填充表单字段
- 用户更正/修改任何自动完成的数据，填写手动数据，然后点击提交按钮
- 调用 AddEntry 操作将表单数据输入数据库，然后返回新生成的带有新输入记录的局部视图。
提前感谢您的帮助！
更新 1：似乎注释掉 main.js ajax 成功命令中的代码行允许表单正常提交（尽管没有接收到 GetData 方法的数据）。在这种情况下，删除“$('#tb_Client').val(data.Client);”允许表单提交。这并不能解决我的问题，但会进一步将问题定位到 main.js 中的这些代码行。
更新 2：问题确实是我的一个输入上的 javascript/jquery 值设置器之一。 JSON 对象有问题。我将它们一一注释掉，直到找到罪魁祸首，然后回到我的控制器/视图模型，使用设置值并纠正问题的方法。
【问题讨论】：
标签： c# jquery ajax post model-view-controller