JQuery with MasterPage in ASP.NET

问题

I'm trying to use JQuery with some asp.net pages, that use master pages, and I'm having problems with loading the JQuery javascript file.

When I include the file in the markup of the master page, it works just fine on pages that are in the same directory as the master page:

<script src="jquery/jquery-1.4.2.min.js" type="text/javascript"></script>

but that breaks for pages that aren't in the same directory as the master page. Master pages inherit the path of the page that includes them, so the relative path to the jquery .js file is different, for different pages. And, of course, I can't have different relative paths in the master file, because there's only one of them.

I could use an absolute path:

<script src="/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>

but that breaks if the website is installed as a virtual directory.

My next try was to use the "~" to indicate the root of the website:

<script src="~/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>

But the script tag doesn't understand the ~".

So I tried to do it in the code-behind. From OnInit(), I tried:

string url = "~/jquery/jquery-1.4.2.min.js";
url = this.ResolveUrl(url);
Page.ClientScript.RegisterClientScriptInclude("jquery_js", url);

And that gives me errors when the JQuery javascript runs. I have some javascript in the markup of the page:

$(document).ready(function()
{
    ...
}

and I get "$" is undefined. I added an alert to the beginning jquery-1.4.2.min.js, and it's loading OK, but after this bit of javascript in the .aspx file has executed.

I tried ScriptManager.RegisterClientScriptInclude(), instead, with the same result.

回答1:

You could either use:

<script type="text/javascript" src="<%= ResolveUrl("~/jquery/jquery-1.4.2.min.js")%>"></script>

Or possibly build a control which essentialy does the remapping for you:

<my:Script src="~/jquery/jquery-1.4.2.min.js" />

Or even register it with the ClientScriptManager, but it's best to put it in the page.

回答2:

Use google to serve your jquery:

<script type="text/javascript"  src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Note the lack of http in the src attribute, this will solve any problems that might arrise with http vs https.

Here is why: http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/

Ode To Code has a fantastic article on Master Pages you should have a look at as well:

http://odetocode.com/Articles/450.aspx

回答3:

Use Page.ResolveUrl() so it's relative to the Page, and not the MasterPage (and the control directory it's in), like this:

string url = Page.ResolveUrl("~/jquery/jquery-1.4.2.min.js");

回答4:

ResolveUrl is the way to go.

<script src="<%= ResolveUrl("~/scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script>

回答5:

You can try src="<%= Page.ResolveClientUrl("~/jquery.js") %> in master page head.

$<script type="text/javascript" src="<% = Page.ResolveClientUrl("~/scripts/jquery-1.4.1.min.js") %>"></script>

回答6:

Try doing like below

StringBuilder sb = new StringBuilder();
            sb.Append("<script type=\"text/javascript\" src=\"");
            sb.Append("http://yourwebsitename" + "/" + "directory");
            sb.Append("/");
            sb.Append("jquery.js");
            sb.Append("\"></script>");
        Header.Controls.Add(new LiteralControl(sb.toString()));

回答7:

using google is a good choice ofcourse but, you can also add you link in each of your pages you have problem with(thoes which cannot find the path to the jquery) For instance if you have a page called "MyPage.aspx" in the other Directory just add the script on the html of page "MyPage.aspx" relatively in this way thoes page cannot find your jquery address will work fine with the new one recpectively I hope that works for you

回答8:

to not repeating your self

make an extension function for your pages

public static class yourclass
{
    public static string ConvertRelativePathToRootPath(this Page p, string pathfromroot)
    {


        string newUrl = "";
        Uri originalUri = HttpContext.Current.Request.Url;
        newUrl = (originalUri.Scheme) + "://" + originalUri.Authority + pathfromroot;
        return newUrl;


    }
}

then just add the following code to your page load events

string ss = Page.ConvertRelativePathToRootPath("~/script/jquery-1.4.1.min.js");
ScriptManager.RegisterClientScriptInclude(this, this.GetType(), "Jquery", ss);

you can also use the above extension function for all other need an absolut path like image or anchor tags on your file with a path other than your application masterpage root :)

回答9:

The core of the problem was that links to JavaScript files that were being injected into the page with RegisterClientScriptInclude were being placed on the page below the JavaScript code in the markup that depended on it.

What's in $(document).ready() may not execute until after the page is loaded, but $() is executed immediately, as it is read by the browser.

The solution is move the JavaScript to appear later in the file. Which isn't always as simple as it appears, when you're dealing with master pages and multitudinous user controls.

For me, the easiest way to handle it was to inject the JavaScript from the code-behind, using RegisterStartupScript. Script blocks injected with this are added at the end of the form. Executable statements in them will execute only after all the various JavaScript files have been inserted.

来源：https://stackoverflow.com/questions/4330380/jquery-with-masterpage-in-asp-net

标签

ASP.NET

jquery

master-pages