ASP MVC Ajax Not Hitting Controller Function

Question

I'm trying to use AJAX in APS.Net MVC to call a function in my controller and pass in an parameter from the model but Clicking the button doesn't seem to be calling my controller when i put a breakpoint in my code. When hitting the Vote Yes button i want the VoteYes function to be called and have the billid passed in as the parameter. The Billid is a part of the pages Model retrieved as @Html.Raw(Model.BillId). The URL Generated from @Url.Action("VoteYes","Bill") generates /Bill/VoteYes

My Bill.cshtml code:

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

My Controller: 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();
        }

     }
}

Here is the Page Source when i load the page for URL: http://localhost:58556/Bill/Index/10139
10139 is a parameter that is the billid in the URL.

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

Have you getting errors in browser console? Your passed data seems right but there's something wrong happen when accessing action method. — Tetsuya Yamamoto
– Tetsuya Yamamoto, Commented Jun 22, 2017 at 2:50
Never thought to look there. Getting a 500 error failing to load resource from the server. Its trying :58556/Bill/VoteYes Not sure why thats not going to my controller. Routing issue? I dont understand MVC routing too well yet. — Josh Dennison
– Josh Dennison, Commented Jun 23, 2017 at 0:58

kielou · Accepted Answer · 2017-06-22 02:50:39Z

4

try to change your url: @Url.Action("VoteYes","Bill"),

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

answered Jun 22, 2017 at 2:50

kielou

4473 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kielou Over a year ago

@JoshDennison if it solved your question, mark it as answer for future reference

Collectives™ on Stack Overflow

ASP MVC Ajax Not Hitting Controller Function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related