Question

这是一个奇怪的问题，我确信它很简单，但我找不到另一个同样问题的帖子。我有一个带有AJAX.BeginForm（）的MVC视图，它发布到我的控制器。另外，我在表单上方有一个搜索框（输入），当按下Enter键时，它会向我的控制器（GetData）执行一个JQuery ajax帖子，以便在提交之前自动填充一些表单字段。奇怪的是，如果使用搜索字段，它会成功填写带有数据的表单字段，但表单的提交按钮停止工作（表单根本不提交）！现在，如果我不使用搜索字段（执行ajax POST）并手动填写表单字段，然后点击提交，它会正确地提交给我的控制器。

GetData（字段预填充操作）返回一个JSONified模型对象，我将其读入表单对象。

表单位于PartialView中，主ViewModel作为模型。搜索框位于_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操作将表单数据输入数据库，然后使用新输入的记录返回新生成的部分视图。

提前感谢您的帮助！

更新1：似乎在main.js中注释掉代码行ajax success命令允许表单正常提交（虽然没有收到GetData方法的数据）。在这种情况下，删除“$（'＃tb_Client'）。val（data.Client）;”允许表单提交。这并没有解决我的问题，但进一步指出了main.js中这些代码行的问题。

更新2：问题确实是我输入的一个javascript / jquery值设置器。 JSON对象出了点问题。我一个接一个地评论它们，直到我发现罪魁祸首然后回到我的控制器/ viewmodel到设置值并纠正问题的方法。

Answer 1

这更适合发表评论，但出于某种原因，我需要更多声誉才能回复此网站上的用户。

通过你的更新，它让我觉得你在多个地方使用#tb_Client ID，但是如果没有看到程序的其余部分我就无法确认。

或者，您可以单独发送变量，而不是提交封装在单个对象中的数据：

new Socket()

调用不同的AJAX帖子后，MVC AJAX表单将不会提交

1 个答案: