.NET Tips: استفاده‌ي همزمان از آپديت پنل ASP.Net و پلاگين‌هاي جي‌كوئري

مشكل: زمانيكه يك AsyncPostback در آپديت پنلASP.Net Ajax رخ دهد، پس از پايان كار، پلاگين جي‌كوئري كه در حال استفاده از آن بوديد و در هنگام بارگذاري اوليه صفحه بسيار خوب كار مي‌كرد، اكنون از كار افتاده است و ديگر جواب نمي‌دهد.

قبل از شروع، نياز به يك سري پيش زمينه هست (شايد بر اساس روش استفاده شما از آن پلاگين جي‌كوئري، مشكل را حل كنند):
الف) رفع تداخل جي‌كوئري با ساير كتابخانه‌هاي مشابه.
ب) آشنايي با jQuery Live جهت بايند رخ‌داد‌ها به عناصري كه بعدا به صفحه اضافه خواهند شد.
ج) تزريق اسكريپت به صفحه در حين يك AsyncPostback رخ داده در آپديت پنل

علت بروز مشكل:
علت رخ‌دادن اين مشكل (علاوه بر قسمت الف ذكر شده)، عدم فراخواني document.ready تعريف شده، جهت بايند مجدد پلاگين jQuery مورد استفاده شما پس از هر AsyncPostback رخ داده در آپديت پنل ASP.Net Ajax است. راه حل استاندارد جي‌كوئري هم همان مورد (ب) فوق مي‌باشد، اما ممكن است جهت استفاده از آن نياز به بازنويسي يك پلاگين موجود خاص وجود داشته باشد، كه آنچنان مقرون به صرفه نيست.

مثالي جهت مشاهده‌ي اين مشكل در عمل:
مي‌خواهيم افزونه‌ي Colorize - jQuery Table را به يك گريد ويوو ASP.Net قرار گرفته درون يك آپديت پنل اعمال كنيم.


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UpdatePanelTest.aspx.cs"
   Inherits="TestJQueryAjax.UpdatePanelTest" %>

<!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></title>
</head>
<body>
   <form id="form1" runat="server">
   <asp:ScriptManager ID="sm" runat="server">
       <Scripts>
           <asp:ScriptReference Path="~/js/jquery.js" />
           <asp:ScriptReference Path="~/js/jquery.colorize-1.6.0.js" />
       </Scripts>
   </asp:ScriptManager>
   <asp:UpdatePanel ID="uppnl" runat="server">
       <ContentTemplate>
           <asp:GridView ID="GridView1" runat="server" AllowPaging="True"
            OnPageIndexChanging="GridView1_PageIndexChanging">
           </asp:GridView>
       </ContentTemplate>
   </asp:UpdatePanel>
   </form>

   <script type="text/javascript">
       $(document).ready(function() {
           $('#<%=GridView1.ClientID %>').colorize();
       });   
   </script>
</body>
</html>


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace TestJQueryAjax
{
   public partial class UpdatePanelTest : System.Web.UI.Page
   {
       void BindTo()
       {
           List<string> rows = new List<string>();
           for (int i = 0; i < 1000; i++)
               rows.Add(string.Format("row{0}", i));
          
           GridView1.DataSource = rows;
           GridView1.DataBind();
       }

       protected void Page_Load(object sender, EventArgs e)
       {
           if (!Page.IsPostBack)
           {
               BindTo();
           }
       }

       protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
       {
           GridView1.PageIndex = e.NewPageIndex;
           BindTo();
       }
   }
}

مثال بسيار ساده‌اي است جهت اعمال اين افرونه به يك گريدويو و مشاهده كار كردن اين افزونه در هنگام بارگذاري اوليه صفحه و سپس از كار افتادن آن پس از مشاهده صفحه دوم گريد. در اين مثال از نكته "اسكريپت‌هاي خود را يكي كنيد" استفاده شده است.

راه حل:
از ويژگي‌هاي ذاتي ASP.Net Ajax بايد كمك گرفت براي مثال:


   <script type="text/javascript">
       $(document).ready(function() {
           $('#<%=GridView1.ClientID %>').colorize();
       });

       function pageLoad(sender, args) {
           if (args.get_isPartialLoad()) {
               $('#<%=GridView1.ClientID %>').colorize();
           }
       }       
   </script>

متد استاندارد pageLoad به صورت خودكار پس از هر AsyncPostback رخ داده در آپديت پنل ASP.Net Ajax فراخواني مي‌شود (و همچنين پس از پايان پردازش و بارگذاري اوليه DOM صفحه). در اين متد بررسي مي‌كنيم كه آيا يك partial postback رخ داده است؟ اگر بله، مجددا عمليات بايند افزونه به گريد را انجام مي‌دهيم و مشكل برطرف خواهد شد.

براي مطالعه بيشتر

۱۳۸۸/۰۶/۲۰

استفاده‌ي همزمان از آپديت پنل ASP.Net و پلاگين‌هاي جي‌كوئري