آموزش برنامه نویسی ، پایگاه داده sql server
آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server


آموزشگاه برنامه نویسی مجتمع فنی تهران میرداماد : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server

آموزش ASP.Net به زبان ساده     >     آموزش مدل صفحات وب WP  
درس چهاردهم : کار با کمک دهنده ترسیم جداول اطلاعاتی WebGrid در ASP.Net Web Pages

مقدمه :

در درس های قبل اقدام به ایجاد یک پایگاه داده به نام UniverCity و یک جدول به نام Students درون آن نمودیم . سپس اطلاعات فرضی چندین دانشجو را در جدول وارد کردیم .
در درس قبلی همانطور که دیدید برای نمایش اطلاعات منبع داده ای خود ( اطلاعات دانشجویان ) به صورت یک جدول ، پس از اتصال به پایگاه داده ، به صورت دستی و با استفاده از یک حلقه foreach و تگ های <table> ، <tr> و <td> ، جدولی را برای نمایش اطلاعات ایجاد کردیم . به صورت کد زیر :

کد @{
       var db = Database.Open("UniverCity");
       var selectQueryString = "SELECT * FROM Students ORDER BY Name";
    }

<!DOCTYPE html>
   <html lang="en">
      <head>
          <meta charset="utf-8" />
          <title>نمایش اطلاعات دانشجویان</title>
      </head>

   <body>
          <h1 style="text-align: center"> اطلاعات دانشجویان</h1>
          <table border="1">
          
   <tr>
                 <th> Id </th>
                 <th> نام </th>
                 <th> نام خانوادگی </th>
                 <th> رشته تحصیلی </th>
             </tr>

               
  @foreach (var row in db.Query(selectQueryString))
                     {
                        <tr>
                           <td> @row.Id </td>
                           <td> @row.Name </td>
                           <td> @row.Family </td>
                           <td align="right"> @row.Major </td>
                       </tr>
                     }

          </table>

   </body>
</html>
کد
Id نام نام خانوادگی رشته تحصیلی
4 Ahmad Karimi SoftWare
1 Ali Hosini HardWare
2 Sahar Bagheri SoftWare
3 Shahab Sharif HardWare

کار فوق کمی زمانبر بوده و نیاز به کدنویسی حلقه و آشنایی کامل با تگ های HTML دارد . اما در ASP.Net Razor راه ساده تری برای نمایش جدول وار اطلاعات وجود داشته و آن استفاده از کمک دهنده رسم جدول یا WebGrid Helper است .
برای استفاده از این کمک دهنده ، کافی است به منبع داده ای خود متصل شده و سپس اطلاعات مورد نظر را انتخاب نموده و درون یک متغیر بریزید . سپس در مکانی که می خواهید اطلاعات به صورت جدول نمایش داده شوند ، کد فراخوان جدول را قرار می دهیم . برای درک بهتر به مثال زیر دقت نمایید :

کد @{
        var db = Database.Open("UniverCity") ;
        var selectQueryString = "SELECT * FROM Students ORDER BY Name";
        var data = db.Query(selectQueryString);
        var grid = new WebGrid(data);
}

<html>
  <head>
     <title> WebGrid نمایش اطلاعات جدول بانک اطلاعاتی به وسیله کمک دهنده</title>
  </head>

  <body>
     <h2> جدول اطلاعات دانشجویان</h2>
     <div id="grid">
        @grid.GetHtml( )
     </div>
  </body>

</html>
کد

جدول اطلاعات دانشجویان

Id Name Family Major
4 Ahmad Karimi SoftWare
1 Ali Hosini HardWare
2 Sahar Bagheri SoftWare
3 Shahab Sharif HardWare

تشریح نکات مثال :

  • در بخش اول ، کد اتصال به منبع داده و دریافت اطلاعات از آن قرار داده شده است . ابتدا به پایگاه داده متصل شده و سپس توسط یک دستور SQL اطلاعات مورد نظر خود را از آن دریافت کرده و در  متغیر selectQueryString  ریخته ایم . سپس به وسیله دستور ( )db.Query اطلاعات متغیر selectQueryString  را به صورت یک آرایه در متغیر data قرار داده ایم . سپس توسط دستور ( )WebGrid ،یک جدول جدید را ساخته و برای نمایش در صفحه ، درون متغیر grid ریخته ایم .
  • در بخش دوم کد ، توسط متد فراخوان کمک دهنده WebGrid ، در مکانی که می خواستیم جدول را نمایش دهیم ، کد ( )grid.GetHtml@ را قرار داده ایم .
  • برنامه به صورت اتوماتیک یک جدول ساخته و اطلاعات متغیر grid را نمایش می دهد . برخلاف حالت قبلی ، که جدول را به صورت دستی تعیین کرده بودیم و جدولی ساده نمایش داده می شد ، جدول تولید شده توسط کمک دهنده WebGrid دارای هدرها یا سر ستون های قابل کلیک هستند . با کلیک بر روی این سر ستون ها می توانید ، اطلاعات هر ستون را به صورت صعودی یا نزولی مرتب نمایید .


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


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

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

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟      
حمایت از سایت Developer1