这是一个奇怪的问题,我敢肯定这很简单,但是找不到相同问题的其他帖子。我有一个带有AJAX.BeginForm()的MVC视图,该视图发布到我的控制器上。另外,我在表单上方有一个搜索框(输入),当按下Enter键时,它会向我的控制器(GetData)执行JQuery ajax发布,以在提交表单之前自动填充某些表单字段。奇怪的是,如果使用了搜索字段,它将成功地用数据填充表单字段,但是表单的“提交”按钮停止工作(表单根本不提交)!现在,如果我不使用搜索字段(执行ajax POST)并手动填写表单字段,然后点击Submit,它将正确提交给我的控制器。
GetData(字段预填充器操作)返回一个JSONized模型对象,我将其读入表单对象。
该表单位于PartialView中,其主模型为Model。搜索框位于_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)始终有效,该表单仅在不使用搜索功能时才起作用(一旦使用,该表单就不会提交给控制器),在浏览器控制台中不会发生任何错误。正常用法是:
在搜索输入中键入查询,然后按Enter
调用GetData操作,通过$ .ajax()检索并返回数据,然后使用返回的数据填充表单字段
用户更正/修改任何自动完成的数据,填写手动数据,然后点击“提交”按钮
调用AddEntry操作将表单数据输入数据库,然后返回带有新输入记录的新生成的partialview。
在此先感谢您的帮助!
更新1:似乎注释掉main.js ajax success命令中的代码行允许表单正常提交(尽管没有GetData方法接收到的数据)。在这种情况下,删除“ $('#tb_Client')。val(data.Client);”允许表单提交。这不能解决我的问题,但可以进一步将问题定位到main.js中的这些代码行。
更新2:问题确实是我的输入之一上的javascript / jquery值设置程序之一。 JSON对象出了点问题。我一一注释掉它们,直到找到罪魁祸首,然后回到控制器/视图模型,重新设置值并纠正问题。
最佳答案
这更适合发表评论,但出于某种原因,我需要更高的声誉才能回复此网站上的人员。
通过您的更新,我认为您在多个地方使用了#tb_Client ID,但是如果没有看到程序的其余部分,我将无法确认。
另外,也可以提交变量,而不是提交封装到单个对象中的数据:
data : { variable : 'variable',
variable2 : 'variable2'},