这是一个奇怪的问题,我敢肯定这很简单,但是找不到相同问题的其他帖子。我有一个带有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'},

08-08 02:19
查看更多