ASP.Net - Javascript внутри AJAX UpdatePanel

У меня возникает проблема с запуском javascript из внешнего файла javascript внутри UpdatePanel. Я пытаюсь получить набор цветов, работающий внутри ListView. ListView находится внутри UpdatePanel.

Я использую этот подборщик цветов.

Вот что я сузил до:

Если я использую подборщик цветов в текстовом поле вне UpdatePanel, он отлично работает через все обратные копии.
Если я использую подборщик цветов в текстовом поле внутри UpdatePanel, он работает, пока я не сделаю асинхронную обратную передачу (нажав кнопку "EDIT" в ListView). После того, как UpdatePanel выполнит обратную передачу, текстовое поле больше не будет отображать выбор цвета при нажатии. То же самое происходит, когда текстовое поле находится в InsertItemTemplate или EditItemTemplate в ListView.

Если вы хотите реплицировать его, просто загрузите его (бесплатно), а затем добавьте его на веб-страницу...

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<div>
    <asp:UpdatePanel ID="panel1" runat="server">
        <ContentTemplate>
            <asp:TextBox runat="server" ID="textbox" CssClass="color" />
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

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

Любые идеи?

Ответ 1

После асинхронного обратного перехода любые сценарии запуска не будут запущены, что, скорее всего, не работает после обратного вызова AJAX. У сборщика цветов, вероятно, есть функции, которые необходимо выполнять при загрузке страницы.

Я сталкивался с этим так много раз, что написал небольшой метод регистрации моих скриптов в коде, который обрабатывает как асинхронные, так и неасинхронные круговые поездки. Здесь основной план:

private void RegisterClientStartupScript(string scriptKey, string scriptText)
{
    ScriptManager sManager = ScriptManager.GetCurrent(this.Page);

    if (sManager != null && sManager.IsInAsyncPostBack)
    {
        //if a MS AJAX request, use the Scriptmanager class
        ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), scriptKey, scriptText, true);
    }
    else
    {
        //if a standard postback, use the standard ClientScript method
        scriptText = string.Concat("Sys.Application.add_load(function(){", scriptText, "});");
        this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), scriptKey, scriptText, true);
    }
}

Я на самом деле испек вышеперечисленное в класс базовой страницы, так что любая страница, с которой я работаю, может вызвать this.RegisterClientStartupScript(...). Для этого просто создайте класс базовой страницы и включите его там (убедитесь, что вы отметили защищенный не закрытый или ваши классы наследуемых страниц не смогут получить к нему доступ).

С помощью приведенного выше кода я могу уверенно регистрировать сценарии клиентов независимо от того, выполняет ли страница обратную передачу или обратный вызов. Понимая, что вы используете внешние файлы script, возможно, вы, вероятно, измените описанный выше метод регистрации внешних скриптов, а не встроенных. Обратитесь к ScriptManager для более подробной информации, так как существует несколько методов регистрации script...

Ответ 2

Посмотрев исходный код jscolor, я заметил, что он инициализирует все на загрузке окна. Таким образом, вам, вероятно, потребуется перезапустить что-то вроде этого (внутри UpdatePanel):

function yourInit(){
   /* keep in mind that the jscolor.js file has no way to determine
      that the script has already been initialized, and you may end
      up initializing it twice, unless you remove jscolor.install();
   */

   if (typeof(jscolor) !== 'undefined'){
      jscolor.init();
   }
}
if (typeof(Sys) !== 'undefined'){
   Sys.UI.DomEvent.addHandler(window, "load", yourInit);
}
else{
   // no ASP.NET AJAX, use your favorite event
   // attachment method here
}

Если вы решите установить jscolor script внутри UpdatePanel, вам также необходимо добавить что-то вроде этого в конец jscolor.js:

if(Sys && Sys.Application){
   Sys.Application.notifyScriptLoaded();
}

Ответ 3

Вы пробовали ScriptManager.RegisterStartupScript, который позволяет вам "добавлять JavaScript с сервера на страницу при выполнении асинхронной обратной передачи"?

Ответ 4

Я бы предположил, что код jscolor.js, который запускает настройку выбора цвета, вызывается только при первой загрузке страницы, поэтому, когда элемент управления регенерируется на сервере, вы теряете изменения, сделанные jscolor. Не могли бы вы зарегистрировать некоторый javascript для вызова в вашем коде, чтобы он вызывал метод init в jscolor, когда ваш асинхронный вызов завершен?