در این مقاله میخواهیم درباره ی جستجوی اطلاعات جدول در 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 کلیک کرده و پنجره زیر باز می شود:
نام کنترلر را مشخص کرده و روی دکمه 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="<script>" title="<script>" />
<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="<script>" title="<script>" />
<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="<script>" title="<script>" />
حال توابع جی کوئری را تغییر داده و تابع $(‘#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="<script>" title="<script>" />
<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="<script>" title="<script>" />
<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="<script>" title="<script>" />
<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>
حالا بعد از اجرای برنامه، خروجی به شکل زیر خواهد بود:
به این ترتیب با کلیک روی ستون Id می توانیم آن ها را به ترتیب صعودی مرتب کنیم.
حال با تایپ هر متنی در textbox تمامی رکوردهای ستون ها را دریافت کرده و بهترین نتیجه مورد انتظار را نمایش می دهد:
اگر عبارتی که در textbox تایپ می کنیم، در بین رکوردها وجود نداشته باشد پیام زیر مشاهده خواهد شد:
موفق باشید !
دیدگاه‌ها