Don't do this. Instead, use the scripts section in an ASP.NET MVC Web API application's view to put jQuery mechanics at the end of the HTML generated. Let me explain what I mean. If you spin up a new instance of an ASP.NET MVC Web API application in Visual Studio 2013, you will notice that _Layout.cshtml starts off like so...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
...and ends like so:
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
Yet, if you are like me, you are going to end up doctoring up _Layout.cshtml so that it starts like so...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
</head>
...and ends like so:
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
This change allows one to have a view like this...
<button id="touchme">touch me</button>
<div id="response"></div>
<script language="javascript">
$('#touchme').bind('click', function() {
$.ajax({
type: "POST",
url: "/api/values/",
data: 'json',
success: function (result) {
$("#response").html(result);
}
});
});
</script>
...without a JavaScript error being thrown to the console decrying an inability to interpret the dollar sign. This change allows your jQuery code to come after the script tag for jQuery within the HTML that is made which is a necessity if your jQuery code is to work. However instead of moving the jQuery script tag about your jQuery code, you may just place your jQuery code below the jQuery script tag which is normally going to get written at the end of the HTML. If you think about it, like I finally did, this is probably what Microsoft intended, you know? You may just use the scripts section in a view to write content to the point in _Layout.cshtml where @RenderSection("scripts", required: false) sits, which is, by default, below where the jQuery bundle is called for. Make sense? Just do something like so:
<button id="touchme">touch me</button>
<div id="response"></div>
@section scripts
{
<script language="javascript">
$('#touchme').bind('click', function () {
$.ajax({
type: "POST",
url: "/api/values/",
data: 'json',
success: function (result) {
$("#response").html(result);
}
});
});
</script>
}
Addendum 7/17/2014: My use of data instead of dataType in the jQuery .ajax implementation within this blog posting is inappropriate. I should have used dataType. Please see this.
No comments:
Post a Comment