ASP MVC Ajax 未命中控制器功能答案

【问题标题】：ASP MVC Ajax Not Hitting Controller FunctionASP MVC Ajax 未命中控制器功能
【发布时间】：2017-11-25 03:14:55
【问题描述】：

我正在尝试在 APS.Net MVC 中使用 AJAX 来调用我的控制器中的一个函数并从模型中传递一个参数，但是当我在我的代码。当点击 Vote Yes 按钮时，我希望调用 VoteYes 函数并将 billid 作为参数传入。 Billid 是作为@Html.Raw(Model.BillId) 检索的页面模型的一部分。从 @Url.Action("VoteYes","Bill") 生成的 URL 生成 /Bill/VoteYes

我的 Bill.cshtml 代码：

@model RepresentWebApp.Models.Bill
@{
    ViewBag.Title = "Bill";
}
<head>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
</head>

<h2>Bill</h2>
<h3>@Html.DisplayName(Model.Title)</h3>
<h3>@Html.DisplayName(Model.Subjects.Count().ToString())</h3>

<button id="thebutton">Vote Yes</button>

<script>
$(document).ready(function () {
    $("#thebutton").click(function (e) {
        e.preventDefault();
            $.ajax({
                url: @Url.Action("VoteYes","Bill"),
                type: 'POST',
                data: {
                    BillId: @Html.Raw(Model.BillId) 
                },
                success: function(data){alert(data)}
            });
    })
})
</script>

我的控制器：BillController.cs

namespace RepresentWebApp.Controllers
{
     public class BillController : Controller
     {
        private RepresentDBContext db = new RepresentDBContext();

        public ActionResult Index(int billid)
        {
            Bill bill = db.bill.Find(billid);
            if (bill == null)
            {
                return HttpNotFound();
            }

            return View("Bill", bill);
        }


        [HttpPost]
        public ActionResult VoteYes(int BillId)
        {
            int itWorked = 1;
            return View();
        }

     }
}

这是我加载 URL 页面时的页面源：http://localhost:58556/Bill/Index/10139
10139 是 URL 中的 billid 参数。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bill - My ASP.NET Application</title>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.6.2.js"></script>


</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" 
                data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Application name</a>
           </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">Home</a></li>
                <li><a href="/Home/About">About</a></li>
                <li><a href="/Home/Contact">Contact</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/Account/Register" id="registerLink">Register</a></li>
                <li><a href="/Account/Login" id="loginLink">Log in</a></li>
            </ul>

        </div>
    </div>
</div>
<div class="container body-content">




<head>
    <script src="/Scripts/jquery-1.10.2.js"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>

</head>

<h2>Bill</h2>
<h3>A joint resolution to authorize the use of United States Armed Forces 
against al-Qaeda, the Taliban, and the Islamic State of Iraq and Syria, and 
associated persons or forces, that are engaged in hostilities against the 
United States, the Armed Forces, or</h3>
<h3>0</h3>

<button id="thebutton">Vote Yes</button>

<script>
$(document).ready(function () {
    $("#thebutton").click(function (e) {
        e.preventDefault();
            $.ajax({
                url: /Bill/VoteYes, /*generates */
                type: 'POST',
                data: {
                    BillId: 10139 
                },
                success: function(data){alert(data)}
            });
    })
})
</script>


    <hr />
    <footer>
        <p>&copy; 2017 - My ASP.NET Application</p>
    </footer>
</div>

<script src="/Scripts/jquery-1.10.2.js"></script>

<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>



<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"d3ed6b78215d4868a6d2d6750d9a3186"}
</script>
<script type="text/javascript" 
src="http://localhost:64890/6232fa8de08b494bb34022167291a681/browserLink" 
async="async"></script>
<!-- End Browser Link -->

</body>
</html>

【问题讨论】：

您是否在浏览器控制台中遇到错误？您传递的数据似乎正确，但访问操作方法时发生错误。
从未想过要看那里。收到 500 错误，无法从服务器加载资源。它正在尝试：58556/Bill/VoteYes 不知道为什么那不去我的控制器。路由问题？我还不太了解 MVC 路由。
没关系。 kielou的回复解决了。

标签： c# asp.net ajax asp.net-mvc asp.net-mvc-4

【解决方案1】：

尝试更改您的url: @Url.Action("VoteYes","Bill")，

到url: '@Url.Action("VoteYes","Bill")'，

【讨论】：

@JoshDennison 如果它解决了您的问题，请将其标记为答案以供将来参考