MVC3 jQuery getJSON doesnt issue a call

问题

I am trying to make ajax work using getJSON() call. When I navigate to /Home/GetWeather, I get Json data back in the browser. However the jQuery call is not working. Any ideas? When I put a breakpoint on alert("Hello"), it never hit. In firebug I dont see any ajax call. Any ideas?

$(document).ready(function() {
    $("#Button1").click(function() {
        $.getJSON("/Home/GetWeather", null, function(data) {
            alert("Hello");
        });
    });
});

Controller code

public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetWeather()
    {
        List<Weather> weather = new List<Weather>();

        // populate weather with data

        return Json(weather, JsonRequestBehavior.AllowGet);
    }
}

View:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
    <script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            $("#Button1").click(function () {
                $.getJSON("/Home/GetWeather", null, function (data) { //I hit breakpoint here, but in firebug I dont see any call, nothing
                    alert("Hello"); // Breakpoint here doesnt hit :(
                });
            });

        });

    </script>
</head>
<body>
    <input id="Button1" type="button" name="Button1" value="Get Weather" />
    <div id="Weather"></div>
</body>
</html>

Any reason why the solution I found was removed ???

回答1:

As far as I know, you're trying to call it cross domain. Having the code run out of the domain of the site. Before I had the html file call the json running from localhost and it does return nothing. But put that html into the same place, call it from localhost and you will be fine.

回答2:

Don't hard code URL with Asp.Net-MVC use Url.Action
Remove the null parameter. Why do you need to send null to the controller? just omit it.

The code to get the route right:

@Url.Action("GetWeather", "Home")

Inside the script:

$("#Button1").click(function () {
    $.getJSON("@Url.Action("GetWeather", "Home")", function (data) {
        alert("Hello");
    });
});

回答3:

Make sure you cancel the default action of the button if it is a submit button or an anchor by returning false:

$("#Button1").click(function() {
    $.getJSON("/Home/GetWeather", null, function(data) {
        alert("Hello");
    });

    return false; // <!-- cancel the default action of the button
});

Also as @gdoron said in his answer, never hardcode urls like this. Always use url helpers to generate them.

UPDATE:

Now that you have shown your view, I can see that you have hardcoded the url to your scripts:

<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>

You should never do this. You should always use url helpers:

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.5.1-vsdoc.js")" type="text/javascript"></script>

Also you should learn to use a javascript debugging tool such as FireBug which makes detecting those errors a peace of cake. If you have used FireBug you would have seen the 404 errors when requesting those scripts.

来源：https://stackoverflow.com/questions/11179518/mvc3-jquery-getjson-doesnt-issue-a-call

标签

jquery

asp.net-mvc

asp.net-mvc-3

getjson