ASP.Net UpdatePanel + Gridview + Гиперссылки + jQuery плагин nyroModal - открытие всего нового окна, но я просто хочу модальный - PullRequest
Новая
       14

ASP.Net UpdatePanel + Gridview + Гиперссылки + jQuery плагин nyroModal - открытие всего нового окна, но я просто хочу модальный

0 голосов
/ 13 мая 2009

У меня есть UpdatePanel с GridView внутри.

В Gridview есть TemplateColumn, содержащий гиперссылку.

Используя jQuery в начале страницы, я установил все эти гиперссылки в модальные гиперссылки nyroModal. То есть поэтому, когда вы нажимаете на них, целевая страница загружается в модальный диалог. Этот код: 

<script type="text/javascript">
    $(document).ready(function(){
        $(".modal").nyroModal();
    });
</script>

Если я удаляю UpdatePanel, то вышеприведенный код nyromodal работает на отлично. Но с помощью UpdatePanel он заполняет вызовы nyroModal и открывает ссылки как необработанные целые новые окна / вкладки в Firefox. UpdatePanel пытается быть слишком умным и инициировать обратную передачу и т. Д.

Нужно ли каким-либо образом регистрировать вызов nyromodal для каждой кнопки во время рендеринга или что-то, чтобы сказать .Net / UpdatePanel «держаться подальше»? Я немного поигрался с RegisterClientScriptBlock и т. Д., Но не могу сделать его счастливым. Кажется, что такая проблема заключается в регистрации клиентского скрипта с помощью .Net серверного кода. Я нахожу это громоздким и разочаровывающим:)

Большое спасибо за любые предложения или понимание.

Ответы [ 2 ]

4 голосов
/ 13 мая 2009

попробуйте вместо этого: 

<script type="text/javascript">
    $(document).ready(function(){
        /*
            This binds a callback to the click event of all 
            elements with the 'modal' class, even ones that are
            updated inside an UpdatePanel.
        */
        $(".modal").live('click', function(){
            /*
                When the element is clicked, open the nyroModal dialog
                manually. (If the element is a link, nyroModal will 
                automatically get the content based on the link's href attribute.)
            */
            $(this).nyroModalManual();
        });
    });
</script>

Редактировать

Я создал страницу, которая работает нормально. Полный исходный код приведен ниже.

Примечание: Есть одна важная вещь, которую я не сделал в коде выше. Я забыл, чтобы ссылка не изменила местоположение браузера, поэтому обратите внимание на evt.preventDefault(); в приведенном ниже коде (извините за это: P). 

<%@ Page Language="C#" %>
<script runat="server">
  public void Page_Load()
  {
    BindGridViewUrls();
  }

  public void GridViewUrls_PageIndexChanging(object sender, GridViewPageEventArgs e)
  {
    GridViewUrls.PageIndex = e.NewPageIndex;
    BindGridViewUrls();  
  }

  public void BindGridViewUrls() {
    var Urls = new[]{
      new {UrlText="Google", Url="http://google.com"},
      new {UrlText="Stack Overflow", Url="http://stackoverflow.com"},
      new {UrlText="XKCD", Url="http://xkcd.com"},
      new {UrlText="Google Reader", Url="http://google.com/reader"},
      new {UrlText="reddit", Url="http://reddit.com"},
      new {UrlText="Hacker News", Url="http://news.ycombinator.com"},
      new {UrlText="Ubuntu", Url="http://ubuntu.com"},
      new {UrlText="Twitter", Url="http://twitter.com"},
      new {UrlText="YouTube", Url="http://youtube.com"},
      new {UrlText="Wikipedia", Url="http://en.wikipedia.org"},
      new {UrlText="Coding Horror", Url="http://codinghorror.com"},
      new {UrlText="Mozilla", Url="http://mozilla.org"},
      new {UrlText="jQuery", Url="http://jquery.com"},
      new {UrlText="NyroModal", Url="http://nyromodal.nyrodev.com/"},
    };
    GridViewUrls.DataSource = Urls;
    GridViewUrls.DataBind();
  }
</script>
<!DOCTYPE
  html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>UpdatePanel Test</title>
  <script 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
  </script>
  <script src="jquery.nyroModal-1.4.2.js"></script>
  <script>
    $(function(){
      $('.modal').live('click', function(evt){
        $(this).nyroModalManual({minWidth:750});
        evt.preventDefault();
      });
    });
  </script>
</head>
<body>
  <form runat="server">
  <div>
    <asp:ScriptManager runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel runat="server">
      <ContentTemplate>
        <asp:GridView runat="server" ID="GridViewUrls" AllowPaging="true"
          PageSize="5" OnPageIndexChanging="GridViewUrls_PageIndexChanging">
          <Columns>
            <asp:HyperLinkField DataTextField="UrlText"
              DataNavigateUrlFields="Url" ControlStyle-CssClass="modal"
            />
          </Columns>
        </asp:GridView>
      </ContentTemplate>
    </asp:UpdatePanel>
  </div>
  </form>
</body>
</html>
0 голосов
/ 13 мая 2009

Я предлагаю вам использовать диалоговое окно из jquery UI.

Обратитесь к этому, чтобы узнать, как его использовать: http://jqueryui.com/demos/dialog

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

jQuery(".modal").each(function() {
      var popup = jQuery(this);
      popup.parent().appendTo(jQuery("form:first"));
});
...