CODEWITHSUNDEEP
javascriptjqueryasp.netasp.net-mvc
Luis Valencia
Luis Valencia

Reputation: 33978

$ reference is not defined

I know that this means that jquery is not loaded, however my code seems to be correct.

My _layouts.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</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>
                @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("Property", "Property", "Home")</li>
                    <li>@Html.ActionLink("App Properties", "GetAzureAadApp", "ActiveDirectory")</li>
                    <li>@Html.ActionLink("Create App Properties", "CreateProperty", "ActiveDirectory")</li>
                    <li>@Html.ActionLink("Get Extended Properties", "GetProperties", "ActiveDirectory")</li> 
                    <li>@Html.ActionLink("CreateUser", "CreateUser", "ActiveDirectory")</li>     
                    <li>@Html.ActionLink("TestRestCall", "TestRestCall", "ActiveDirectory")</li>                   
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

My view

@model PruebasAD.Models.SuccessViewModel
@{
    ViewBag.Title = "TestRestCall";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>TestRestCall</h2>
<article>
  <aside class="green">
    @Model.Message
  </aside>
  <aside>
    <pre id="json-result">
    </pre>
  </aside>
</article>


<script type="text/javascript">
  $(document).ready(function(){
    var str = JSON.stringify(@(new MvcHtmlString(Model.JSON)), undefined, 2); // indentation level = 2
    $('#json-result').html(str);
    console.log(str);
  });
</script>

and my controller action

public async Task<ActionResult> TestRestCall()
{
    Uri serviceRoot = new Uri(azureAdGraphApiEndPoint);
    var token = await GetAppTokenAsync();
    string requestUrl = "https://graph.windows.net/mysaasapp.onmicrosoft.com/users?api-version=2013-04-05";
    HttpClient hc = new HttpClient();
    hc.DefaultRequestHeaders.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", token);
    HttpResponseMessage hrm = await hc.GetAsync(new Uri(requestUrl));
    if (hrm.IsSuccessStatusCode)
    {
        string jsonresult = await hrm.Content.ReadAsStringAsync();
        return View("TestRestCall", new SuccessViewModel
        {
            Name = "The Title",
            Message = "The message",
            JSON = jsonresult.ToJson()
        });
    }
    else
    {
        return View();
    }
}

Upvotes: 0

Views: 1039

Answers (3)

CupawnTae
CupawnTae

Reputation: 14580

Try moving your

@Scripts.Render("~/bundles/jquery")

Into the <head> section so that it is loaded before you try to access it. Adding a defer attribute will allow the page to continue to load without waiting for jQuery to finish loading (on supported browsers).

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.RenderFormat("<script src='{0}' defer='defer'></script>","~/bundles/jquery")
</head>

Upvotes: 2

mason
mason

Reputation: 32694

You do not have to move your @Scripts declaration into the <head> as @CupawnTae suggested.

Instead, you can move the script in your view into the scripts section (which is configured in your layout.)

@model PruebasAD.Models.SuccessViewModel
@{
    ViewBag.Title = "TestRestCall";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>TestRestCall</h2>
<article>
  <aside class="green">
    @Model.Message
  </aside>
  <aside>
    <pre id="json-result">
    </pre>
  </aside>
</article>

@section scripts{
<script type="text/javascript">
  $(document).ready(function(){
    var str = JSON.stringify(@(new MvcHtmlString(Model.JSON)), undefined, 2); // indentation level = 2
    $('#json-result').html(str);
    console.log(str);
  });
</script>
}

In your layout, since you are rendering your scripts section below the jQuery reference, they'll be loaded in the proper order.

The reason this is important is that it will load scripts after the main HTML of the page. The page feels like it loads faster because the user will see the site sooner. This works well in sites with smaller HTML documents and CSS references.

However, you may also be interested in Where is the best place to put tags in HTML markup? which discusses even better practices regarding to place the tags.

Upvotes: 3

Kevin F
Kevin F

Reputation: 2885

Your script is running above JQuery. Add a scripts section below where you load JQuery in your templated file. Then in the view fill the section with your page specific scripts. This will put your scripts below JQuery and keep your scripts at the bottom to help with page load times

Upvotes: 0

Related Questions