ASP.NETMVC无法使用jQuery/JavaScript提交表单

我需要你的帮助。我正在努力实现一个实时搜索。因此，每当我从一个文本框切换到另一个文本框时，都应该提交一个表单，以更新URL并将数据传递给控制器。当我单击submit按钮时，它工作得非常好，但是它没有按照我想要的方式工作

这是我的密码：

控制器：

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>
}     

<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)

查看：

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>
}     

<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)

$（文档）.ready（函数（）{
$（'#number'）。更改（函数（）{
$（“#过滤器”）.submit（）；
});
});
@使用（Html.BeginForm（“Index”，“Home”，FormMethod.Get，new{id=“filter”}））
{
编号：
@TextBox（“Number”，new{@class=“form control”，type=“text”，id=“Number”}）
标题：
@TextBox（“Caption”，new{@class=“form control”，type=“text”，id=“Caption”}）
搜寻
}     

输出HTML:

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>
}     

<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)

$（文档）.ready（函数（）{
$（'#number'）。更改（函数（）{
$（“#过滤器”）.submit（）；
});
});
编号：
标题：
搜寻

浏览器控制台：

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>
}     

<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)

未捕获类型错误：元素[type]不是函数
在Object.trigger(http://localhost:49782/Scripts/jquery-1.8.2.js:2991:18）
在HTMLFormElement。(http://localhost:49782/Scripts/jquery-1.8.2.js:3618:17）
在功能上，每个(http://localhost:49782/Scripts/jquery-1.8.2.js:625:20）
一开始(http://localhost:49782/Scripts/jquery-1.8.2.js:255:17）
在初始化时触发(http://localhost:49782/Scripts/jquery-1.8.2.js:3617:15）
在init.jQuery.fn.（匿名函数）[作为提交](http://localhost:49782/Scripts/jquery-1.8.2.js:3671:9）
在HTMLInputElement。(http://localhost:49782/:63:26)
在HTMLInputElement.dispatch(http://localhost:49782/Scripts/jquery-1.8.2.js:3077:9）
在HTMLInputElement.eventHandle(http://localhost:49782/Scripts/jquery-1.8.2.js:2695:28）

您的JavaScript代码正在查找ID为

#number

的标记。由于浏览器大多从上到下读取源代码，因此在声明

#number

之前，代码将被评估。这意味着jQuery将找不到它，因此不会附加事件。如果将脚本移动到HTML之后，或将其包装到

document.ready

，它将按预期工作：

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

//or simpler equivalent

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

但是，这仍然不能像您所希望的那样工作，因为每次输入更改时，整个页面都会被发布回服务器，因此用户在尝试将焦点从一个输入切换到另一个输入后，必须等待整个页面重新加载。这不是很方便，您最好更改逻辑以使用AJAX调用并动态更新搜索结果。虽然这不是一个要求，但它是一种很好的、用户友好的方法：-）

更新-提交错误的解决方案 我只为你试图提交的错误负责。您的提交按钮的id是

submit

。这本身并不是“错误的”，但它会导致使用jQuery提交时出现问题。你看，因为按钮在你的表单中，当jQuery返回

#filter

表单时，当你尝试在表单上使用

submit（）

时，JavaScript在范围内找到你的

submit

按钮，并且认为你想“调用它”，因此你会得到错误，因为你不能“调用”一个元素。如果使用

submit

作为按钮名称，也可能发生这种情况

对您来说，最好且最简单的解决方案是将

id

更改为其他内容：

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

搜索

您的JavaScript代码正在查找ID为

#number

的标记。由于浏览器大多从上到下读取源代码，因此在声明

#number

之前，代码将被评估。这意味着jQuery将找不到它，因此不会附加事件。如果将脚本移动到HTML之后，或将其包装到

document.ready

，它将按预期工作：

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

//or simpler equivalent

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

但是，这仍然不能像您所希望的那样工作，因为每次输入更改时，整个页面都会被发布回服务器，因此用户在尝试将焦点从一个输入切换到另一个输入后，必须等待整个页面重新加载。这不是很方便，您最好更改逻辑以使用AJAX调用并动态更新搜索结果。虽然这不是一个要求，但它是一种很好的、用户友好的方法：-）

更新-提交错误的解决方案 我只为你试图提交的错误负责。您的提交按钮的id是

submit

。这本身并不是“错误的”，但它会导致使用jQuery提交时出现问题。你看，因为按钮在你的表单中，当jQuery返回

#filter

表单时，当你尝试在表单上使用

submit（）

时，JavaScript在范围内找到你的

submit

按钮，并且认为你想“调用它”，因此你会得到错误，因为你不能“调用”一个元素。如果使用

submit

作为按钮名称，也可能发生这种情况

对您来说，最好且最简单的解决方案是将

id

更改为其他内容：

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

搜索

在现代浏览器中，使用输入事件。当用户在文本字段中键入、粘贴、撤消时，基本上只要值从一个值更改为另一个值，就会触发此事件

在现代浏览器中，使用输入事件。当用户在文本字段中键入、粘贴、撤消时，基本上只要值从一个值更改为另一个值，就会触发此事件

---

它对我来说很好，我希望它也对你有用

C#代码：

剃刀代码

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var abc = document.getElementById('Number');
        abc.onchange = (function () {
            document.forms[0].submit();  
        });
    });
</script>

@using (Html.BeginForm("Index", "Home", FormMethod.Post, 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="submit1" class=" btn btn-block btn-primary">Search</button>
        </div>
    </div>
}     

$（文件）