جستجوی اطلاعات جدول

در این مقاله میخواهیم درباره ی جستجوی اطلاعات جدول در ASP.Net MVC صحبت کنیم.صفحه بندی، مرتب سازی و جستجو زمانی که با رکوردهای زیادی سر و کار داریم، بسیار اهمیت دارند.

ما در ASP.Net MVC از کتابخانه jQuery data table برای صفحه بندی، مرتب سازی و جستجوی کارامد و واکنش گرا در جدول هایی که با داده های json پرشده اند، استفاده کردیم.

جستجوی اطلاعات جدول

گام ۱: ایجاد یک اپلیکیشن MVC

Visual Studio را باز کرده و از منوی File سپس New Project گزینه ASP.Net Web Application Template را انتخاب می کنیم و نام مناسبی برای آن انتخاب کرده و Ok می کنیم.

گزینه MVC empty application را انتخاب کرده و Ok می کنیم.

گام ۲: ایجاد کلاس Model

روی فولدر Model راست کلیک کرده و کلاسی با نام Employee اضافه می کنیم.

 public class Employee  
    {  
        public int Id { get; set; }  
        public string Name { get; set; }  
        public string City { get; set; }  
        public string Address { get; set; }  
    } 

گام ۳: اضافه کردن کلاس controller

روی فولدر Controller راست کلیک کرده و کلاس کنترلر را اضافه می کنیم.

 اطلاعات جدول

حال با انتخاب قالب کنترلر، روی دکمه Add کلیک کرده و پنجره زیر باز می شود:

 ASP.Net MVC

نام کنترلر را مشخص کرده و روی دکمه Add کلیک می کنیم، حالا HomeController.cs را باز کرده و کد زیر را در آن می نویسیم:

public class HomeController : Controller  
    {  
        // GET: Home  
        [HttpGet]  
        public ActionResult Index()  
        {  
            return View();  
        }  
  
        [HttpGet]  
        public JsonResult EmpDetails()  
        {  
            //Creating List      
            List<Employee> ObjEmp = new List<Employee>()  
        {    
            //Adding records to list      
            new Employee  
            {  
                Id = 1, Name = "Amir Azimi", City = "Tehran", Address = "tehran"  
            },  
            new Employee  
            {  
                Id = 2, Name = "Amin Karimi", City = "Esfahan", Address = "Kashan"  
            },  
             new Employee  
            {  
                Id = 3, Name = "Maryam Samavati", City = "Shiraz", Address = "shiraz"  
            },  
               new Employee  
            {  
                Id = 4, Name = "Nasim Imani", City = "Hamedan", Address = "hamedan"  
            },  
                 new Employee  
            {  
                Id = 5, Name = "Sahar Rezaie", City = "Qazvin", Address = "qazvin"  
            },  
                   new Employee  
            {  
                Id = 6, Name = "Shayan Naseri", City = "Alborz", Address = "Karaj"  
            },  
                     new Employee  
            {  
                Id = 7, Name = "Shahab Azizi", City = "Tehran", Address = "Rey"  
            },  
                       new Employee  
            {  
                Id = 8, Name = "Sam moradi", City = "XYZ", Address = "XYZ"  
            },  
                                    new Employee  
            {  
                Id = 9, Name = "Navid Naderi", City = "XYZ", Address = "XYZ"  
            },  
                                                 new Employee  
            {  
                Id = 10, Name = "Nima Sadr", City = "XYZ", Address = "XYZ"  
            },  
                                                              new Employee  
            {  
                Id = 11, Name = "Vivek", City = "XYZ", Address = "XYZ"  
            }  
        };  
            //return Json      
            return Json(ObjEmp, JsonRequestBehavior.AllowGet);  
        }  
    }

در کلاس بالا، با استفاده از متد EmpDetails که از نوع JsonResult می باشد رکوردها را به لیست جنریک اضافه کرده و آن را به صورت Json برگرداندیم تا از کوئری های مشابه و تکراری دیتابیس جلوگیری کنیم.
برای کار با جی کوئری به کتابخانه جی کوئری زیر و یا ورژن های بالاتر نیاز داریم:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22~%2FScripts%2Fjquery-1.10.2.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="script" title="script" />

گام ۴: اضافه کردن Partial view

روی فولدر Home که در فولدر View قرار دارد راست کلیک می کنیم:

 انواع روش های جستجو در جدول

کد زیر را در آن می نویسیم:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22~%2FScripts%2Fjquery-1.10.2.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />    
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%20%20%20%20%0A%20%20%20%20%24(document).ready(function%20()%20%7B%20%20%20%20%0A%20%20%20%20%20%20%20%20%2F%2FCall%20EmpDetails%20jsonResult%20Method%20%20%20%20%0A%20%20%20%20%20%20%20%20%24.getJSON(%22Home%2FEmpDetails%22%2C%20%20%20%20%0A%20%20%20%20%20%20%20%20function%20(json)%20%7B%20%20%20%20%0A%20%20%20%20%20%20%20%20var%20tr%3B%20%20%20%20%0A%20%20%20%20%20%20%20%20%2F%2FAppend%20each%20row%20to%20html%20table%20%20%20%20%0A%20%20%20%20%20%20%20%20for%20(var%20i%20%3D%200%3B%20i%20%3C%20json.length%3B%20i%2B%2B)%20%7B%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tr%20%3D%20%24('%3Ctr%2F%3E')%3B%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tr.append(%22%3C%2Fp%3E%0A%3Ctd%3E%22%20%2B%20json%5Bi%5D.Id%20%2B%20%22%3C%2Ftd%3E%0A%3Cp%3E%22)%3B%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tr.append(%22%3C%2Fp%3E%0A%3Ctd%3E%22%20%2B%20json%5Bi%5D.Name%20%2B%20%22%3C%2Ftd%3E%0A%3Cp%3E%22)%3B%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tr.append(%22%3C%2Fp%3E%0A%3Ctd%3E%22%20%2B%20json%5Bi%5D.City%20%2B%20%22%3C%2Ftd%3E%0A%3Cp%3E%22)%3B%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tr.append(%22%3C%2Fp%3E%0A%3Ctd%3E%22%20%2B%20json%5Bi%5D.Address%20%2B%20%22%3C%2Ftd%3E%0A%3Cp%3E%22)%3B%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24('table').append(tr)%3B%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%0A%20%20%20%20%20%20%20%20%7D)%3B%20%20%20%20%0A%20%20%20%20%7D)%3B%20%20%20%20%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />


<table class="table table-bordered table-condensed table-hover table-striped">    
        

<thead>
    
        

<tr>    
        

<th>Id</th>


    
        

<th>Name</th>


    
        

<th>City</th>


    
        

<th>Address</th>


    
        </tr>


    
        </thead>


    
        

<tbody></tbody>


    
</table>


 

گام ۵: اجرا ی برنامه

بعد از اجرای برنامه، خروجی آن به شکل زیر خواهد بود:

 انواع روش های جستجو در جدول

در مثال بالا، داده ها بدون صفحه بندی، مرتب سازی و جستجو نمایش داده شده اند.

گام ۶: فعال سازی صفحه بندی، مرتب سازی و جستجو با استفاده از کتابخانه jQuery data table

برای این کار، باید کتابخانه مربوطه را به پروژه اضافه کنیم.

همانطور که می دانید روش های مختلفی برای این کار وجود دارد که ما در این مقاله از کتابخانه CDN استفاده می کنیم.

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">  
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20language%3D%22javascript%22%20src%3D%22%2F%2Fcdn.datatables.net%2F1.10.10%2Fjs%2Fjquery.dataTables.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />  

حال توابع جی کوئری را تغییر داده و تابع $(‘#EmpInfo’).DataTable(); را اضافه می کنیم. بعد از اینکه جدول با داده های Json پر شد و بعد از رفرنس دادن تمام فایل های موردنیاز، کد ما در Index.cshtml به شکل زیر خواهد بود.

@{  
    ViewBag.Title = "www.compilemode.com";  
}  
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22~%2FScripts%2Fjquery-1.10.2.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />  
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">  
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20language%3D%22javascript%22%20src%3D%22%2F%2Fcdn.datatables.net%2F1.10.10%2Fjs%2Fjquery.dataTables.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />  
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%20%20%0A%20%20%0A%20%20%20%20%24(document).ready(function%20()%20%7B%20%20%0A%20%20%20%20%20%20%20%20%2F%2FCall%20EmpDetails%20jsonResult%20Method%20%20%0A%20%20%20%20%20%20%20%20%24.getJSON(%22Home%2FEmpDetails%22%2C%20%20%0A%20%20%20%20%20%20%20%20function%20(json)%20%7B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20tr%3B%20%20%0A%20%20%0A%20%20%20%20%20%20%20%20%2F%2FAppend%20each%20row%20to%20html%20table%20%20%0A%20%20%20%20%20%20%20%20for%20(var%20i%20%3D%200%3B%20i%20%3C%20json.length%3B%20i%2B%2B)%20%7B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tr%20%3D%20%24('%3Ctr%2F%3E')%3B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tr.append(%22%3C%2Fp%3E%0A%3Ctd%3E%22%20%2B%20json%5Bi%5D.Id%20%2B%20%22%3C%2Ftd%3E%0A%3Cp%3E%22)%3B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tr.append(%22%3C%2Fp%3E%0A%3Ctd%3E%22%20%2B%20json%5Bi%5D.Name%20%2B%20%22%3C%2Ftd%3E%0A%3Cp%3E%22)%3B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tr.append(%22%3C%2Fp%3E%0A%3Ctd%3E%22%20%2B%20json%5Bi%5D.City%20%2B%20%22%3C%2Ftd%3E%0A%3Cp%3E%22)%3B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tr.append(%22%3C%2Fp%3E%0A%3Ctd%3E%22%20%2B%20json%5Bi%5D.Address%20%2B%20%22%3C%2Ftd%3E%0A%3Cp%3E%22)%3B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24('table').append(tr)%3B%20%20%0A%20%20%0A%20%20%20%20%20%20%20%20%7D%20%20%0A%20%20%20%20%20%20%20%20%24('%23EmpInfo').DataTable()%3B%20%20%0A%20%20%20%20%20%20%20%20%7D)%3B%20%20%0A%20%20%0A%20%20%20%20%7D)%3B%20%20%0A%20%20%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />  


<hr />


  


<div class="form-horizontal">
  
    

<table id="EmpInfo" class="table table-bordered table-hover">  
        

<thead>
  
            

<tr>  
                

<th>Id</th>


  
                

<th>Name</th>


  
                

<th>City</th>


  
                

<th>Address</th>


  
            </tr>


  
        </thead>


  
        

<tbody></tbody>


  
    </table>


    
  
</div>


  

حالا بعد از اجرای برنامه، خروجی به شکل زیر خواهد بود:

 جستجو Grid در ASP.Net MVC

به این ترتیب با کلیک روی ستون Id می توانیم آن ها را به ترتیب صعودی مرتب کنیم.

 جستجو در Table در MVC

حال با تایپ هر متنی در textbox تمامی رکوردهای ستون ها را دریافت کرده و بهترین نتیجه مورد انتظار را نمایش می دهد:

 کار با جدول در MVC

اگر عبارتی که در textbox تایپ می کنیم، در بین رکوردها وجود نداشته باشد پیام زیر مشاهده خواهد شد:

 جستجو اطلاعات جدول

موفق باشید !

داریوش فرخی

داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.