www.dntips.ir
مطالب ۳۶۹۴
نویسندگان ۲۷۶
گروه‌های مطالب ۱۰۲۴
نقشه‌های راه ۱۱۹
دوره‌ها ۱۴
اشتراک‌ها ۱۷۹۱۴
عنوان:

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


نویسنده: وحید نصیری
تاریخ: ۱۳۸۸/۰۶/۲۰ ۱۸:۴۷:۰۰
آدرس: www.dntips.ir

مشکل: زمانیکه یک 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 رخ داده است؟ اگر بله، مجددا عملیات بایند افزونه به گرید را انجام می‌دهیم و مشکل برطرف خواهد شد.

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

مطالب مشابه

نظرات

  • مهمان در ۱۳۸۸/۰۶/۲۱ ۰۱:۲۸:۴۲
    سلام استاد عزیز
    ممنون از مطلب بسیار مفیدتون.