تبلیغات متنی و بنر

راهکارهای موثر در ASP.Net

راهکار 10 - 6 : دسترسی به کنترل های متصل به داده توسط جاوا اسکریپت و آپدیت خودکار صفحات Asp.Net

مقدمه :

این راهکار قصد دارد تا به شما نحوه دسترسی به کنترل های موجود بر روی صفحات Asp.Net ، از طریق جاوا اسکریپت  را آموزش دهد . در این راهکار ، صفحه ای خواهیم ساخت که اطلاعات لیستی از نام و قیمت محصولات را از جدول Product پایگاه داده AdventureWorksLT2008 نمایش خواهد داد . سپس یک وب سرویس را به صفحه اضافه می کنیم که توسط یک کد جاوا اسکریپت بصورت دوره ای فراخوانی شده و قسمت های تغییر یافته را اصلاح می کند . سپس جدول اطلاعاتی و صفحه بدون اینکه رفرش شوند ، به روز رسانی خواهند شد .
اطلاعات قیمت ها و نام هایشان توسط کنترل های Lable در کنترل جدول دار ListView نمایش داده می شود. در HTML ، کنترل های Lable بصورت تگ های Span که دارای خاصیت id هستند ، رندر می شوند . هنگام استفاده از اسکریپت ها ، راحت ترین راه برای دستیابی به تگ های Span و تغییر محتوای آنها ، استفاده از متد document.getElementById می باشد . برای استفاده از این متد شما بایستی از id تگ مورد نظرتان در صفحه اطلاع داشته باشید .
برای اجبار Asp.Net به تولید id هایی برای تگ های Span که از قبل بتوان آنها را پیش بینی کرد ، بایستی خواص ClientIDMode و ClientIDRowSuffix کنترل ListView را به گونه ای تنظیم نمود تا id های ایجاد شده ، شامل مقدار ProductID هر فیلد باشد . به دلیل اینکه هم وب سرویس مقادیر ProductID را به همراه مقادیر قسمت های تغییر یافته می فرستد و هم مقدار فیلد ProductID در id تگ های Span وجود دارد  ، به راحتی می توان به هر تگ Span برای تغییر آن دسترسی باشد .

برای حمایت از این پروژه ، کتاب راهکارهای موثر در ASP.Net را دانلود نمایید ...

دانلود فایل عملی پروژه و نسخه PDF راهکار

پیش نیازها :

برای اجرای این راهکار نیاز دارید تا برنامه های زیر بر روی سایت شما نصب شده باشد :

  1. Microsoft Visual Studio .
  2. SQL Server Express که بر روی کامپیوتر شما نصب شده باشد . این برنامه معمولا با ویژوال استودیو نصب می شود و پایگاه داده AdventureWorksLT2008 که در فایل پروژه راهکار قرار داده شده است .

مرحله اول - طراحی یک سایت ASP.Net :

در مرحله اول از راهکار بایستی یک سایت ASP.Net را برای اجرای پروژه خود ایجاد نمایید . فرض بر این است که سایت را قبلا ایجاد کرده و یا با نحوه اجرای آن آشنایی دارید ، در غیر اینصورت به راهکار شماره 1-1 : نحوه ایجاد یک وب سایت ASP.Net در ویژوال استودیو بروید .

مرحله دوم - طراحی صفحه ای که شناسه های (ID) نوع Client قابل پیش بینی تولید کند :

در این بخش از راهکار ، صفحه ای را طراحی خواهیم کرد که دارای چندین کنترل بوده و می توان به کنترل های داده آن ، بعدا از طریق کلاینت اسکریپت دسترسی داشت . برای این منظور بایستی خاصیت ClientIDMode کنترل داده را به گونه ای تنظیم نماییم تا id های قابل پیش بینی برای المنت های HTML خود ایجاد نماید . برای این منظور بصورت زیر عمل کنید :

  1. در ویژوال استودیو صفحه جدیدی به نام ProductList.aspx را در پروژه خود ایجاد نمایید .
  2. سپس در منوی Solution Explorer ، بر روی نام صفحه جدید کلیک راست کرده و با انتخاب گزینه Set as Start Page ، آن را به عنوان صفحه آغازین پروژه تعیین نمایید .
  3. سپس به نمای Design بروید . از بخش Data منوی Toolbox برنامه ، یک کنترل SqlDataSource را بر روی صفحه قرار دهید .
  4. کنترل SqlDataSource را به گونه ای تنظیم نموده تا به پایگاه داده AdventureWorksLT2008 متصل شده و با اجرای یک دستور Select مورد نظر اطلاعات لازم را از آن دریافت نماید . در جدول مورد نظر می خواهیم اطلاعات فیلدهای ProductID , Name و ListPrice را نمایش دهیم .  کد کنترل sql باید بصورت زیر باشد :
    کد <asp:SqlDataSource ID="SqlDataSource1" runat="server"
           ConnectionString="<%$ ConnectionStrings:AdventureWorksLT2008_DataConnectionString %>"
           SelectCommand="SELECT ProductID, Name, ListPrice FROM SalesLT.Product">
    </asp:SqlDataSource>
  5. همچنین کد HTML زیر را به صفحه اضافه نمایید . کد را مرور نمایید ، سپس به توضیح آن خواهیم پرداخت :
    کد <table>
       <tr>
          <th>Product ID</th>
          <th>Product Name</th>
          <th>List Price</th>
       </tr>
          <asp:ListView ID="ListView1" runat="server"
             DataSourceID="SqlDataSource1"
             ClientIDMode="Predictable"
             ClientIDRowSuffix="ProductID">
                <ItemTemplate>
                      <tr>
                            <td>    <%# Eval("ProductID") %></td>
                            <td>    <%# Eval("Name") %></td>
                            <td align="right">
                                  <asp:Label ID="PriceLabel" runat="server"
                                  Text='    <%# Eval("ListPrice","{0:#.00}") %>' />
                            </td>
                      </tr>
                </ItemTemplate>
                <LayoutTemplate>
                      <div id="itemPlaceholderContainer" runat="server">
                         <span id="itemPlaceholder" runat="server" />
                      </div>
                </LayoutTemplate>
          </asp:ListView>
    </table>
  6. کد فوق باعث نمایش اطلاعات فیلدهای  Product ID ، Name و ListPrice توسط کنترل ListView در قالب یک جدول می شود . قیمت ها بر اساس نوع متغیر Curreny نمایش داده می شوند .
    در کد فوق مقدار خاصیت ClientIDMode کنترل ListView بر روی مقدار Predictable به معنای قابل پیش بینی تنظیم شده و با تعیین خاصیت ClientIDRowSuff به مقدار ProductID ، شناسه ها یا id های ایجاد شده متناسب با مقدار این فیلد است . در نهایت id های تولید شده برای تگ های Span روی صفحه بصورت کلی ListView_PriceLable1_number خواهد بود که در آن number ، مقدار فیلد ProductID است . بنابراین ما قادر به پیش بینی این id ها بوده و می توانیم در صفحه ، به راحتی با استفاده از آنها ، به تگ های Span بر روی صفحه بوسیله اسکریپت ها دسترسی داشته باشیم .
    نکته بعدی نحوه تعیین خاصیت ClientIDRowSuff است . شما می توانید این خاصیت را به هر فیلد داده ای در جدول مرتبط نمایید ، اما دقت داشته باشید که این فیلد باید دارای مقادیر یکتا ( Unique ) باشد ، در غیر اینصورا id های تولید شده برای تگ های Span ، غیر یکتا خواهد بود و عملا امکان دسترسی به آنها در اسکریپت ها ، بوسیله متد  document.getElementById وجود نخواهد داشت . همچنین اطلاعات فیلدی که برای تولید id ها به کار می رود نباید دارای فاصله ( space ) و کارکترهای غیر مجاز باشد .
  7. کدهای وارد شده در صفحه را ذخیره نموده و با اجرای صفحه ، خروجی آن را همانند شکل زیر مشاهده نمایید :


  8. پس از اجرای موفقیت آمیز صفحه ، کد آن را در حالت Source مشاهده نمایید . اگر دقت نمایید متوجه خواهید شد که کنترل های Lable موجود بر روی صفحه بصورت تگ های Span درآمده اند که id آنها دارای فرمتی مثل ListView1_PriceList1_680 است که 680 مقدار فیلد ProductID برای هر رکورد است . سپس مرورگر را ببندید .

مرحله سوم - اضافه کردن یک وب سرویس به صفحه که از طریق Ajax قابل فراخوانی خواهد بود :

برای فراهم نمودن امکان دسترسی کلاینت اسکریپت به قسمت ها و تغییرات آنها ، یک کلاس LINQ to SQL را برای جدول Product ایجاد نموده و یک وب سرویس با قابلیت Ajax نیز ایجاد می کنیم تا قسمت های به روز شده محصولات را مرتب دریافت و ارسال نماید . راه های زیادی برای فراهم نمودن اطلاعات جهت یک وب سرویس وجود دارد . در این راهکار ما از کلاس LINQ to SQL استفاده می کنیم ، زیرا استفاده از آن بسیار ساده است .

نحوه فراهم نمودن امکان دسترسی وب سرویس به اطلاعات جدول Product :

  1. اگر وب شما دارای پوشه App_Code نیست ، بر روی نام آن در Solution Explorer کلیک راست نموده و از گزینه Add ASP.Net Folder یک پوشه App_Code به سایت اضافه نمایید .
  2. سپس بر روی پوشه App_Code ایجاد شده کلیک راست نموده و بر روی گزینه Add New Item کلیک نمایید تا پنجره آن بصورت زیر باز شود :


  3. از قسمت Installed Templates یک کلاس LINQ to SQL را انتخاب نموده ، نام آن را AdventureWorks.dbml تعیین کرده و با زدن دکمه Add به پردژه اضافه نمایید . پنجره Object Relational Designer باز می شود .
  4. در منوی Server Explorer ، گره جدول ها ( Tables ) پایگاه داده AdventureWorksLT را باز نموده و از درون آن جدول Product را کشیده و بر روی محیط طراحی Object Relational Designer ، برای تولید کلاس های لازم رها نمایید .
  5. در پنجره Object Relational Designer ،کلیه خواصی که برای کلاس Product ایجاد شده است به غیر از ProductID و ListPrice را حذف نموده و با بستن آن پنجره ، تغییرات اعمال شده به فایل AdventureWorks.dbml را ذخیره نمایید . همانند تصویر زیر :


طراحی وب سرویس :

پس از فراهم نمودن امکان دسترسی وب سرویس به اطلاعات جدول Product ، در این مرحله می خواهیم خود وب سرویس را طراحی نماییم . وب سرویسی که طراحی خواهیم کرد می تواند توسط کلاینت اسکریپت با استفاده از Ajax فراخوانی شود . برای این منظور مراحل زیر را انجام دهید :

  1. در منوی Solution Explorer بر روی نام وب سایت کلیک راست کرده و گزینه Add New Item را انتخاب نمایید تا پنجره آن بصورت زیر باز شود :


  2. از بخش Installed Templates ، گزینه Web Service را انتخاب نموده و نام آن را PriceWebService.asmx بگذارید . برنامه ویژوال استودیو بر حسب زبانی که برای برنامه نویسی وب سایت خود تعیین نموده اید یکی از فایل های PriceWebService.vb یا PriceWebService.cs را ایجاد می کند .
  3. مقدارخاصیت System.Web.Script.Services.ScriptService را از حالت comment خارج نمایید . یعنی دو // مقابل خط آن را بردارید . این کار باعث می شود تا وب سرویس توسط Ajax قابل فراخوانی باشد .
  4. کد متد HelloWorld که از قبل درون وب سرویس وجود داشته را حذف نموده و کد زیر را جایگزین آن نمایید :
    VB کد <WebMethod( )>
       Public Function GetPrices( ) As Product( )
       Dim context As New AdventureWorksDataContext( )
       Dim productsToReturn As New List(Of Product)
       Dim randomNumber = New Random()
       For Each p As Product In context.Products
          If p.ProductID Mod 10 = randomNumber.Next(10) Then
          p.ListPrice = p.ListPrice + 1000
          productsToReturn.Add(p)
       End If
       Next
          Return productsToReturn.ToArray
    End Function
    C# کد [WebMethod]
    public Product[ ] GetPrices( )
      {
          AdventureWorksDataContext context = new AdventureWorksDataContext( );

          List<Product> productsToReturn = new List<Product>( );
          Random randomNumber = new Random( );
          foreach (Product p in context.Products)
            {
                if (p.ProductID % 10 == randomNumber.Next(10))
                  {
                      p.ListPrice += 1000;
                      productsToReturn.Add(p);
                  }
              }
          return productsToReturn.ToArray<Product>( );
      }
  5. کد فوق یک query را اجرا می کند که فقط محصولات ( Products ) ای که قیمت آنها ( ListPrice ) از آخرین بار اجرای query تغییر کرده است را برمی گرداند . کد فوق این کار را برای انتخاب رندمی 10 عدد از رکوردهای جدول و اضافه کردن مقدار 100 به هر رکورد و سپس برگرداندن رکوردهایی که تغییر کرده اند ، انجام می دهد .
  6. فایل PriceWebService.vb یا PriceWebService.cs را ببندید .

فراهم نمودن امکان دسترسی صفحه وب به وب سرویس :

بر روی صفحه Asp.net ، شما باید یک کنسول یا نماینده را برای وب سرویس تعیین نمایید تا بتوانید آن را از طریق کلاینت اسکریپت فراخوانی نمایید . برای این منظور ، یک کنترل ScriptManager را به صفحه اضافه نموده و آدرس کنترل را به آدرس وب سرویسی که در مرحله قبل طراحی کردیم ، تعیین کنید . بصورت زیر :

  1. در منوی Solution Explorer ، فایل ProductList.aspx را باز کرده و به نمای Design بروید .
  2. از منوی Toolbox برنامه و قسمت AjaxExtensions ، یک کنترل ScriptManager را برداشته و بر روی صفحه قرار دهید .
  3. بر روی کنترل ScriptManager کلیک راست کرده و گزینه Properties را انتخاب نمایید .
  4. در پنجره Properties کنترل ، مجموعه Service را باز کنید تا پنجره ویرایشگر ServiceReference Collection Editor اجرا شود .
  5. گزینه Add را زده و سپس فایل PriceWebService.vb یا PriceWebService.cs را به عنوان مسیر یا Path کنترل تعیین نموده و کلید OK را بزنند . هماندد تصویر زیر :


  6. سپس به نمای کد Source بروید . کد زیر به کنترل Script Manager اضافه شده است . به آن دقت نمایید :
    کد <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:servicereference Path="PriceWebService.asmx" />
        </Services>
    </asp:ScriptManager>

اضافه کردن اسکریپت مورد نظر برای بروز رسانی اطلاعات محصول :

پس از اینکه تغییری در اطلاعات جدول بوجود آمده باید بوسیله یک کلاینت اسکریپت وب سرویس را فراخوانی کرده ، تغییرات را از آن دریافت نموده و در صفحه اعمال کرد . برای این منظور کارهای زیر را انجام دهید :

  1. 1) صفحه ProductList.aspx را در حالت کد Source باز کرده و کد اسکریپت زیر را در قسمت <head> صفحه وارد نمایید :
    کد <script language="javascript" type="text/javascript">

       // وب سرویس را برای دریافت تغییرات قیمت ها فراخوانی می کند
       function UpdatePrices( ) {
          var pricesService = new PriceWebService();
          pricesService.GetPrices(onSuccess, onFailure, null);
          setTimeout('UpdatePrices()', 5000);
       }
       // در صورتی که وب سرویس با موفقیت اجرا شود ، صفحه را به روز می کند
       function onSuccess(result) {
          for (var i = 0; i < result.length; i++) {
          $get("ListView1_PriceLabel_" + result[i].ProductID).innerHTML = "<b>" + result[i].ListPrice.toFixed(2) + "</b>";
          }
       }
       function onFailure(results) {
          alert('failed');
       }
    </script>
  2. متد( ) UpdatePrice بصورت متناوب وب سرویس را فراخوانی کرده و مقدار متد onSucces را در صورتی که فراخوانی وب سرویس با موفقیت انجام شود ، تنظیم می کند . سپس 5 ثانیه صبر کرده و مجددا خود را فراخوانی می کند . به این ترتیب قیمت ها هر 5 ثانیه به روز می شوند .
    متد onSucces ، بوسیله یک حلقه بین رکوردهایی که از پایگاه داده دریافت نموده ، حرکت می کند . برای هر آیتم ، این متد شناسه از قبل قابل پیش بینی ای را بر اساس خاصیت کلاینت id و مقدار فیلد ProductID ساخته و از آن برای دریافت اطلاعات المنت توسط متد get استفاده می کند . سپس مقدار جدید دریافتی را در متغیر ListPrice قرار می دهد . برای اینکه تغییرات به وجود آمده قابل مشهودتر باشد ، آنها را بین تگ باز و بسته <b> قرار داده تا بصورت توپر نمایش داده شود .
  3. همچنین یک رویداد Onload را بصورت زیر به تگ <body> صفحه اضافه نمایید تا هر 5 ثانیه یکبار ، متد Update Price را فراخوانی کند :
    کد <body onload="setTimeout('UpdatePrices()', 5000)">
  4. تغییرات ایجاد شده در صفحه را ذخیره نموده و با زدن دکمه های Ctrl+F5 صفحه را اجرا نمایید .
    صفحه بصورت قبل باز می شود . بعد از 5 ثانیه مشاهده خواهید کرد قیمت 10 رکورد از محصولات 1000 واحد افزایش میابد . قیمت های تغییر یافته بصورت توپر ( bold ) هستند . این به روز رسانی هر 5 ثانیه یکبار رخ خواهد داد .

دانلود فایل عملی پروژه و نسخه PDF راهکار


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی

نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1 حمایت نمایید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :               
آدرس Email :  

نظر شما :  

سوال امنیتی : پایتخت ایران ؟  
حمایت از سایت Developer1