Webgrid گرید توکار asp.net
mvc 3 است که در سری آموزش‌های mvc جناب نصیری به خوبی بررسی شده است . WebGrid از طریق مجموعه ای از خواص امکان استایل دهی
به ستون‌ها و ردیف‌ها را به توسعه دهنده می‌دهد . اما در این بخش مشکلی وجود دارد که
در ادامه به آن خواهم پرداخت . کدهای زیر را در نظر بگیرید
مدل‌ها :
public class Customer
{
public int Id { get; set; }
public string Name { get; set; }
public string Email { get; set; }
public string Website { get; set; }
public string Phone { get; set; }
}
public class Customers
{
public IList<Customer> GetList()
{
return new List<Customer>()
{
new Customer()
{
Id=1,
Name="mohsen.d",
Email="email@domain.com",
Website="domain.com",
Phone="213214321"
}
};
}
public IList<Customer> GetEmptyList()
{
return new List<Customer>();
}
}
و کنترلر :
public class HomeController : Controller
{
public ActionResult List()
{
var model = new Customers().GetList();
return View(model);
}
public ActionResult EmptyList()
{
var model = new Customers().GetEmptyList();
return View("list", model);
}
}تابع کمکی برای ایجاد گرید :
@helper GenerateList(IEnumerable<object> items, List<WebGridColumn> columns)
{
var grid = new WebGrid(items);
<div>
@grid.GetHtml(
tableStyle: "list",
headerStyle: "list-header",
footerStyle: "list-footer",
alternatingRowStyle: "list-alt",
selectedRowStyle: "list-selected",
rowStyle: "list-row",
htmlAttributes: new { id = "listItems" },
mode: WebGridPagerModes.All,
columns: columns
)
</div>
}
view :
@model IEnumerable<WebGridHeaderStyle.Models.Customer>
@{
ViewBag.Title = "List";
}
<h2>List</h2>
@_List.GenerateList(
Model,
new List<WebGridColumn>()
{
new WebGridColumn(){
ColumnName="Id",
Header="Id",
Style="list-small-field"
},
new WebGridColumn(){
ColumnName="Name",
Header="Name",
Style="list-long-field"
},
new WebGridColumn(){
ColumnName="Email",
Header="Email",
Style="list-mid-field"
},
new WebGridColumn(){
ColumnName="Website",
Header="Website",
Style="list-mid-field"
},
new WebGridColumn(){
ColumnName="Phone",
Header="Phone",
Style="list-mid-field"
}
}
)
ابتدا به مسیر
Home/List می‌رویم
خوب چندان بد نیست . با استفاده
از استایل‌های تعریف شده برای فیلدها و ردیف‌ها ، لیست ساختار مناسبی دارد . اما
حالا به Home/EmptyList
می رویم :
همانطور که میبینید استایل هایی که برای هر ستون تعریف کرده بودیم اعمال نشده اند. مشکل هم همین
جاست . WebGrid استایل تعریف شده را تنها به ستون‌های درون tbody
اعمال میکند و thead از این تنظیمات بی نصیب می‌ماند ( WebGrid از table برای ساختن لیست استفاده میکند ) و در زمانی که رکوردی وجود نداشته باشد فرمت طراحی شده اعمال نمیشود .
در وب ترفندهایی را برای این مشکل پیدا
کردم که اصلا جالب نبودند . در نهایت راه حل زیر به نظرم رسید :
در زمان ساختن
گرید ، استایل‌های تعریف شده را در یک فیلد hidden ذخیره و سپس با
استفاده از jquery این استایل‌ها را به ستون‌های header اعمال می‌کنیم .
تابع ساختن فیلد hidden :
@helper SetHeaderColumnsStyle(IEnumerable<WebGridColumn> columns)
{
var styles = new List<string>();
foreach(var col in columns)
{
styles.Add(col.Style);
}
<input id="styles" type="hidden" value="@string.Join("#",styles)" />
}
این تابع را در تابع کمکی ساخت گرید فراخوانی می‌کنیم :
@SetHeaderColumnsStyle(columns)
و در view کد
javascript زیر را اضافه می‌کنیم :
<script>
$(document).ready(function () {
var styles = $("#styles").attr("value").split('#');
var $cols = $("#listItems th");
$cols.each(function (i) {
$(this).addClass(styles[i]);
});
});
</script>
حال اگر صفحه را بارگذاری کنید با
اینکه رکوردی وجود ندارد اما ساختار گرید به همان شکل تعریف شده باقی مانده است .
پروژه نمونه را میتوانید
از اینجا دانلود کنید .
