ASP.Net MVC ajax 控制器调用答案

【问题标题】：ASP.Net MVC ajax controller callASP.Net MVC ajax 控制器调用
【发布时间】：2023-03-28 09:40:01
【问题描述】：

我正在尝试通过单击按钮来调用控制器。我的目标是从视图中获取日期值并从控制器调用其他数据，但是 ajax 的事情让我很烦。所以我做了一个测试，但还是不行。

我遵循了几个教程和 SO 问题，这就是我想出通过 javascript ajax 函数调用控制器方法（“testtest”）的方法。这是我最后一次关注的the tutorial。

$(document).ready(function () {
    $('#btnSelectDate').click(function () {
        alert("working");
        var text= $('#txtStartDateI').val();
        var button= $('#btnSelectDate').val();
        alert(text + " " + button);
        $.ajax({
            url: "/Home/testtest",
            type: "post",
            datatype: "text",
            data: { btnSelectDate: button, txtStartDate: text},
            success: function (data) {
                ('#testarea').html(data);
            },
            error: function () {
                $('#testarea').html("ERROR");
            }
        });
    });
});

这是“testtest”方法：

[HttpPost]
public string testtest( string btnSelectDate,string txtStartDate ) {
    return ("btnValue : " + btnSelectDate + "\ntxtStartDate: " + txtStartDate);
}

当我单击按钮时，警报正在工作，但它没有调用 Homecontroller 中的方法“testtest”。我在控制器中设置了断点，但它没有通过。显示警报对话框后，整个页面闪烁，没有任何更改。我试图让<div id="testarea"></div> 获取文本值。

我尝试了不同的 URL 形式，例如：

url: '@Url.Action("testtest","Home")'
url: 'localhost/Home/testtest'

但它仍然没有击中控制器。

ajax 是否需要添加任何特殊脚本？（我想我添加了 ajax 脚本，因为有些链接包含“ajax”。）还是我需要做一些特殊的事情来使用 ajax 调用该方法？

下面是我的全部代码。这是我的控制器“家”：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace haha.Controllers {
    public class HomeController : Controller {
        public ActionResult View() {
            return View("View");
        }

        [HttpPost]
        public string testtest( string btnSelectDate,string txtStartDate ) {
            return ("btnValue : " + btnSelectDate + "\ntxtStartDate: " + txtStartDate);
        }
    }
}

查看：（对于脚本，我认为有几个重复的脚本，但我无法弄清楚。我可以删除什么？）

@using System;
@using System.Collections.Generic;
@using System.Linq;
@using System.Web;
@using System.Web.Mvc;

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>View</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" />

        <script src="~/Scripts/jquery-1.5.1.min.js"></script>
        <script src="~/Scripts/jquery.validate.min.js"></script>
        <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

        <script type="text/javascript" src="~/Scripts/jquery-1.7.1.js"></script>
        <script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

        <script src="~/scripts/jquery-*.*.*.min.js"></script>
        <script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

        <script>
            $(function () {
                $(".Datepicker").datepicker({
                    dateFormat: "yy-mm-dd",
                    changeMonth: true,
                    changeYear: true,
                    nextText: 'next Month',
                    prevText: 'previous Month',
                    showButtonPanel: true,
                    currentText: 'Today'
                })
            });
        </script>

        <script type="text/javascript">  
            $(document).ready(function () {
                $('#btnSelectDate').click(function (event) {
                    alert("working");
                    var text= $('#txtStartDateI').val();
                    var button= $('#btnSelectDate').val();
                    $.ajax({
                        url: "/Home/testtest",
                        type: "post",
                        datatype: "text",
                        data: { btnSelectDate: button, txtStartDate: text},
                        success: function (data) {
                            ('#testarea').html(data);
                        },
                        error: function () {
                            $('#testarea').html("ERROR");
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        this is test area
        <div id="testarea"></div>
        <hr />
        <p></p>
        <div>
        <form id="formDTInsurer">
            StartDate:
            <input type="text" class="Datepicker" id="txtStartDateI" name="txtStartDate">
            <button type="submit" id="btnSelectDate" name="btnSelectDate" value="InsurerDate">Select</button>
            </form>
        </div>
    </body>
</html>

编辑

根据Stephen Muecke 的评论，我使用 chrome 工具检查了控制台。以下是错误。

                                                                      jquery-1.5.1.js:869 
Uncaught TypeError: b.parents(...).addBack is not a function
    at Object.parse (jquery.validate.unobtrusive.min.js:19)
    at HTMLDocument.<anonymous> (jquery.validate.unobtrusive.min.js:19)
    at Object.resolveWith (jquery-1.5.1.js:862)
    at Function.ready (jquery-1.5.1.js:420)
    at HTMLDocument.DOMContentLoaded (jquery-1.5.1.js:1055)
parse            @ jquery.validate.unobtrusive.min.js:19
(anonymous)      @ jquery.validate.unobtrusive.min.js:19
resolveWith      @ jquery-1.5.1.js:862
ready            @ jquery-1.5.1.js:420
DOMContentLoaded @ jquery-1.5.1.js:1055

由于这些脚本存在更多错误，我将其中的一些注释掉了，这实际上减少了错误的数量。唯一剩下的是上面那个。以下是我现在在当前html文件中的内容。

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" />

    <!--<script src="~/Scripts/jquery-1.5.1.min.js"></script>-->
    <!--<script type="text/javascript" src="~/Scripts/jquery-1.7.1.js"></script>-->
    <!--<script src="~/scripts/jquery-*.*.*.min.js"></script>-->
    <!--<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.js"></script>-->

【问题讨论】：

浏览器控制台出现什么错误？
没有错误，但它不像我的意思那样工作..
并且仅包含一份脚本副本并按正确的顺序 - jquery-{version}.js 然后 jquery-validate.js 和 jquery.validate.unobtrusive.js 和 jquery-ui.js （但这与您的错误无关）
当然有错误（否则会影响方法）
哦 :'D 是的，然后有错误.. 但我怎么能找到那些？在网络浏览器中，没有任何变化。我会修复脚本谢谢！

标签： javascript jquery asp.net ajax asp.net-mvc

【解决方案1】：

包含两个版本的 jquery（1.5 和 1.7）很尴尬，你必须找到正确的顺序并且只有一个 jquery 包含。也许用另一个替换 1.5 ？

【讨论】：

【解决方案2】：

通过json 发送您的参数：

  type: 'POST',
        contentType: 'application/json',
        dataType: 'json',
        data: JSON.stringify({ btnSelectDate: button, txtStartDate: text})

并使用alert(text); 和alert(button); 并确保它们的值正确（非空）

【讨论】：

感谢您的回答。警报正在获取它们应该得到的值。但是，我在帖子中添加的错误再次发生..
不客气，包含两个版本的 jquery（1.5 和 1.7）很尴尬，您必须找到正确的顺序并且只包含一个 jquery。也许用 1.7 替换 1.5 ？
是的，你是对的！！我不知道所以复制了所有脚本，但是在阅读了您的评论后，我删除了1.5并更改为1.11（我认为这是我搜索时最新的）..而不是没有错误！非常感谢：D
我复制了评论作为答案，因此您可以将其验证为答案。祝你有美好的一天