JQuery с MasterPage в ASP.NET - PullRequest
       5

JQuery с MasterPage в ASP.NET

2 голосов
/ 02 декабря 2010

Я пытаюсь использовать JQuery с некоторыми страницами asp.net, которые используют главные страницы, и у меня возникают проблемы с загрузкой файла javascript JQuery.

Когда я включаю файл в разметку главной страницы, он прекрасно работает на страницах, которые находятся в том же каталоге, что и главная страница:

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

но это ломается для страниц, которые не находятся в том же каталоге, что и главная страница. Главные страницы наследуют путь к странице, которая включает их, поэтому относительный путь к файлу jquery .js различен для разных страниц. И, конечно, я не могу иметь разные относительные пути в мастер-файле, потому что есть только один из них.

Я мог бы использовать абсолютный путь:

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

но это ломается, если сайт установлен как виртуальный каталог.

Моя следующая попытка состояла в том, чтобы использовать «~» для обозначения корня сайта:

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

Но тег сценария не понимает ~ ".

Так что я попытался сделать это в коде позади. Из OnInit () я попробовал:

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

И это дает мне ошибки при запуске JQuery Javascript. У меня есть некоторый JavaScript в разметке страницы:

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

и я получаю "$" не определено. Я добавил предупреждение в начало jquery-1.4.2.min.js, и оно загружается нормально, но после выполнения этого бита javascript в файле .aspx.

Я попытался использовать ScriptManager.RegisterClientScriptInclude (), но с тем же результатом.

Ответы [ 9 ]

5 голосов
/ 02 декабря 2010

Используйте Google для обслуживания вашего jquery:

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

Обратите внимание на отсутствие http в атрибуте src, это решит любые проблемы, которые могут возникнуть с http против https.

Вотпочему: http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/

У Ode To Code есть фантастическая статья о главных страницах, на которую вам также стоит взглянуть:

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

5 голосов
/ 02 декабря 2010

Вы можете использовать:

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

Или, возможно, создайте элемент управления, который обязательно сделает переопределение для вас:

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

Или даже зарегистрируйте его в ClientScriptManager, но лучше всего поместить его на странице.

1 голос
/ 13 апреля 2012

Вы можете попробовать src="<%= Page.ResolveClientUrl("~/jquery.js") %> в заголовке главной страницы.

$<script type="text/javascript" src="<% = Page.ResolveClientUrl("~/scripts/jquery-1.4.1.min.js") %>"></script>
1 голос
/ 02 декабря 2010

ResolveUrl - это путь.

<script src="<%= ResolveUrl("~/scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script>
1 голос
/ 02 декабря 2010

Используйте Page.ResolveUrl(), поэтому оно относится к Page , а не к MasterPage (и к управляющему каталогу, в котором он находится), например:

string url = Page.ResolveUrl("~/jquery/jquery-1.4.2.min.js");
0 голосов
/ 02 декабря 2010

чтобы не повторять себя

сделать функцию расширения для ваших страниц

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;


    }
}

, затем просто добавьте следующий код к событиям загрузки страницы

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

Вы также можете использовать вышеприведенную функцию расширения для всех других нужд: абсолютный путь, такой как изображение или теги привязки вашего файла с путем, отличным от корня главной страницы приложения. :)

0 голосов
/ 02 декабря 2010

Суть проблемы заключалась в том, что ссылки на файлы JavaScript, которые вставлялись на страницу с RegisterClientScriptInclude, размещались на странице под кодом JavaScript в разметке, которая зависела от нее.

Чтов $(document).ready() может не выполняться до тех пор, пока страница не будет загружена, но $() выполняется немедленно, как это считывается браузером.

Решение состоит в том, чтобы переместить JavaScript, чтобы он появился позже в файле.Что не всегда так просто, как кажется, когда вы имеете дело с мастер-страницами и множеством пользовательских элементов управления.

Для меня самый простой способ справиться с этим - внедрить JavaScript из кода,используя RegisterStartupScript.Блоки скриптов, добавленные с этим, добавляются в конце формы.Исполняемые операторы в них будут выполняться только после того, как будут вставлены все различные файлы JavaScript.

0 голосов
/ 02 декабря 2010

использование google - хороший выбор, но вы также можете добавить ссылку на каждую страницу, с которой у вас возникли проблемы (те, которые не могут найти путь к jquery). Например, если у вас есть страница с именем «MyPage.aspx»"в другом каталоге просто добавьте скрипт в html-страницу" MyPage.aspx ", так как эта страница не может найти ваш jquery-адрес, будет работать нормально с новым, соответственно, я надеюсь, что это работает для вас

0 голосов
/ 02 декабря 2010

Попробуйте сделать, как показано ниже

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()));
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...