ASP .NET MVC无法使用jQuery / JavaScript提交表单 - javascript

我需要你的帮助。我正在尝试实现实时搜索。因此，每当我从一个TextBox切换到另一个TextBox时，都应提交一个表单，以更新URL并将数据传递给控制器​​。当我单击“提交”按钮时，它工作得很好，但是却无法按我想要的方式工作。

这是我的代码：

控制器：

public ActionResult Index(string number, string caption)
{
    //Fetch data from the database
    return View();
}

视图：

$(document).ready(function () {
    $('#number').change(function () {
        $('#filter').submit();
    });
});

@using (Html.BeginForm("Index", "Home", FormMethod.Get, new { id = "filter" }))
{
<div class="row">
    <div class="col-sm-2 checkbox">
        Number:
    </div>
    <div class="col-sm-3">
        @Html.TextBox("Number", "", new { @class = "form-control", type = "text", id = "number" })
    </div>
</div>
<div class="row">
    <div class="col-sm-2 checkbox">
        Caption:
    </div>
    <div class="col-sm-3">
        @Html.TextBox("Caption", "", new { @class = "form-control", type = "text", id = "caption" })
    </div>
</div>    
<div class="row">
    <div class="col-sm-2 col-sm-offset-2">
        <button type="submit" id="submit" class=" btn btn-block btn-primary">Search</button>
    </div>
</div>
}     

输出HTML：

<script>
$(document).ready(function () {
    $('#number').change(function () {
        $('#filter').submit();
    });
});
</script>

<form action="/" id="filter" method="get">    <div class="row">
    <div class="col-sm-2 checkbox">
        Number:
    </div>
    <div class="col-sm-3">
        <input class="form-control" id="number" name="Number" type="text" value="">
    </div>
</div>
<div class="row">
    <div class="col-sm-2 checkbox">
        Caption:
    </div>
    <div class="col-sm-3">
        <input class="form-control" id="caption" name="Caption" type="text" value="">
    </div>
</div>    
<div class="row">
    <div class="col-sm-2 col-sm-offset-2">
        <button type="submit" id="submit" class=" btn btn-block btn-primary">Search</button>
    </div>
</div>

浏览器控制台：

Uncaught TypeError: elem[type] is not a function
at Object.trigger (http://localhost:49782/Scripts/jquery-1.8.2.js:2991:18)
at HTMLFormElement.<anonymous> (http://localhost:49782/Scripts/jquery-1.8.2.js:3618:17)
at Function.each (http://localhost:49782/Scripts/jquery-1.8.2.js:625:20)
at init.each (http://localhost:49782/Scripts/jquery-1.8.2.js:255:17)
at init.trigger (http://localhost:49782/Scripts/jquery-1.8.2.js:3617:15)
at init.jQuery.fn.(anonymous function) [as submit] (http://localhost:49782/Scripts/jquery-1.8.2.js:3671:9)
at HTMLInputElement.<anonymous> (http://localhost:49782/:63:26)
at HTMLInputElement.dispatch (http://localhost:49782/Scripts/jquery-1.8.2.js:3077:9)
at HTMLInputElement.eventHandle (http://localhost:49782/Scripts/jquery-1.8.2.js:2695:28)

参考方案

您的JavaScript代码正在寻找ID为#number的标签。由于浏览器通常从上至下阅读源代码，因此甚至在声明#number <input>之前，将对代码进行很好的评估。这意味着jQuery将找不到它，因此将不附加事件。如果将脚本移到HTML之后，或将其包装到document.ready，它将按预期工作：

$(document).ready( function() { 
  $('#number').change(function () {
     $('#filter').submit();
  });
} );

//or simpler equivalent

$( function () { ... } );

但是，这仍然无法按您希望的方式工作，因为每次输入更改时，整个页面都将被发布回服务器，因此，在用户尝试将焦点从一个输入切换到另一个之后，用户将不得不等待整个页面重新加载。另一个。这不是很方便，您最好改变使用AJAX调用的逻辑并动态更新搜索结果。尽管这不是必需的，但拥有一种用户友好的方法是一种不错的方法：-)。

更新-提交错误的解决方案

对于您尝试提交的错误，我只有found the solution。您的提交按钮的ID为submit。这本身并不是“错误的”，但是会导致尝试使用jQuery提交时出现问题。您会看到，因为按钮在表单内，所以当jQuery返回#filter表单时，当您尝试在表单上使用submit()时，JavaScript会在范围内找到您的submit按钮，并认为您想“调用它” -因此您会收到错误消息，因为您无法“调用”元素。如果使用submit作为按钮名称，也可能会发生这种情况。

对您而言，最佳和最简便的解决方案是将id更改为其他内容：

<button type="submit" id="submitButton" class=" btn btn-block btn-primary">Search</button>

ASP.NET-如何更改JSON序列化的方式？ - javascript

我正在使用ASP.NET通过以下查询返回Json文件：public ActionResult getTransactionTotals(int itemID) { DBEntities db = new DBEntities(); var query = from trans in db.Transactions // Linq query removed …

ASP.NET MVC中应为DataTable返回哪种数据？ - javascript

我想为DataTable中的每个页面创建动态加载信息。我正在尝试遵循以下示例：https://www.datatables.net/manual/server-sidehttps://www.datatables.net/manual/data来自示例的代码：$('#example').DataTable( { serverSide: t…

ASP.net WebForms-如何从代码隐藏获取html5数据属性？ - javascript

即时通讯试图从HtmlControl获取数据属性（数据图标）...该数据属性是通过js函数设置的，但是当页面回发时，它返回（在代码后面）一个空字符串有什么办法，任何财产，否则就可以得到它？我的代码：HTML：<button id="btnIcon" runat="server" class="btn b…

javascript popupwindow之后的行如何工作？ - javascript

好的，我有一个来自后面代码的方法，可以创建一个popupwindow。然后有一行代码要在那之后执行，我想知道那行代码何时执行，是在使用popupwindow之后执行还是在创建popupwindow之后执行？例如：void exPopupWindowMethod() { string scr = "window.open('exampleP…

ddl在服务器中未更新-asp.net - javascript

我在ASP.NET c＃上工作。我有一个DropDownList。 （runat =“ server”）在$ {document）.ready上，我更新了它的值：$(document).ready(function () { document.getElementById("ddl").value = "abc"; ……