ASP .NET MVC 无法使用 jQuery/JavaScript 提交表单答案

【问题标题】：ASP .NET MVC cannot submit form with jQuery/JavaScriptASP .NET MVC 无法使用 jQuery/JavaScript 提交表单
【发布时间】：2016-12-21 09:19:41
【问题描述】：

我需要你的帮助。我正在尝试实现实时搜索。因此，每当我从一个 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)

【问题讨论】：

你确定编译后的表单上的文本框有id号吗？请验证此
@Satpal $(document).ready(function(){});没有解决问题，也没有解决页面底部的脚本。 onChange 事件触发，如果我将 confirm("Test") 放入脚本中，则只有表单不提交。
@Nils 我可以在生成的 HTML 中找到 TextBox ID
我不知道为什么你的表单没有提交..代码看起来很好..正如你所说的点击按钮会提交..你为什么不首先检查按钮是否以编程方式被点击表单提交..$('#submit').trigger('click')
@RajshekarReddy 不幸的是它也不起作用......

标签： javascript c# jquery asp.net .net

【解决方案1】：

您的 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 button和认为你想“调用它” - 因此你得到错误，因为你不能“调用”一个元素。如果您使用 submit 作为按钮的名称，也可能会发生这种情况。

对您来说最好和最简单的解决方案是将id 更改为其他内容：

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

【讨论】：

不幸的是 $(document).ready() 并没有解决问题。如果我添加 confirm("Test")，事件会触发，只有表单没有提交。我如何使用 AJAX 实现这一点？谢谢！
您是否将代码包装在就绪处理程序中？如果是的话，它肯定会触发，所以这非常令人惊讶。您还可以从浏览器（没有 Razor）发布 HTML 代码吗？使用 AJAX，您将创建一个 HTTP GET 请求，该请求会将您的输入内容发送到 ASP.NET Web API 控制器，该控制器会将结果作为 JSON 对象返回，然后您将转换为页面的 HTML 输出。网上应该有很多这方面的教程:-)。
我刚刚更新了我的问题并发布了 HTML 代码。我将尝试使用 AJAX 来实现它。谢谢。
我刚刚找到了解决方案并更新了我的答案:-)

【解决方案2】：

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

$('#number').on('input', function() { 
   $('#filter').submit();
});

【讨论】：

事件触发，只有表单没有提交。我添加了 confirm("Test") 并且它出现了。

【解决方案3】：

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

C#代码：

 [HttpPost]
 public ActionResult Index(string firstname)
   {
       return Json("Done");
   }

剃刀密码

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

不要使用提交作为按钮的 id 或名称，它会覆盖 Java Script 提交方法的含义

【讨论】：