طراحی GridView

طراحی GridView ، در این مفاله میخواهیم راجب مقاله ی طراحی GridView در ASP.NET MVC صحبت کنیم.با ما تا پایان مقاله همراه باشید.

یکی از همکارانم از من پرسید که آیا چیزی مثل طراحی GridView  و یا DataGrid و یا چیزی شبیه آن درASP.NET MVC framework هست.

جواب اول من خیر بود. به او پیشنهاد کردم که به دنبال foreach implementation بگردد و یا از ExtJS، Dojo و یا چیزی شبیه آن استفاده کند.

که من را به فکر انداخت… چرا که ایجاد یک متود GridView ساده یک دید خوبی نیز می دهد.

Plain-HTML grid با همه ی ویژگی های مورد نیاز مثل: paging، editing، deleting، alternating rows و… .

نظریه ی آن ساده بود: یک متود گسترده برای HtmlHelper کافی خواهد بود.

طراحی GridView

پارامتر های مورد نیاز:

یک الگو برای بالا و پایین صفحه ((سربرگ) هدر و فوتر)، الگو ی بخش، الگو ی ویرایش بخش، … اما چگونه این الگو هارا با استفاده از پارامتر های ساده سی شارپ تصویب کنیم… خوشبختانه، C# 3.0 لامبدا (lambdas) را معرفی کرد! چرا؟ آنها قابلیانعطاف پذیری فوق العاده ای دارند و همه کاره (تطبیق پذیر) هستند.

برای مثال، به کد زیر نگاه کنید:

کد سی شارپ:

public void RenderPerson(Person p, ActionrenderMethod) {
    renderMethod(p);
}

کد ASP.NET:

% RenderPerson(new Person(), person = { %
    Hello! You are %=person.Name%.
% } %

کد سی شارپ:

Response.Write("Hello! You are Maarten.");

ایجاد یک متود GridView ساده خیلی هم سخت نیست.

میریم سراغروش توسعه GridView

public static class GridViewExtensions
{
    public static void GridView(
        this HtmlHelper html,
        GridViewData data,
        ActionGridViewData headerTemplate,
        ActionT, string itemTemplate,
        string cssClass,
        string cssAlternatingClass,
        Action editItemTemplate, 
        ActionGridViewData footerTemplate)
    {
        headerTemplate(data);

        int i = 0;
        foreach (var item in data.PagedList)
        {
            if (!item.Equals(data.EditItem))
            {
                itemTemplate(item, (i % 2 == 0 ? cssClass : cssAlternatingClass));
            }
            else
            {
                editItemTemplate(item);
            }

            i++;
        }

        footerTemplate(data);
    }
}

اطلاعات GridView

مطمئنن اطلاعات باید نمایش داده شوند. ما به یک ویژگی نیاز داریم که مورد جاری را به صورت ویرایش شده تنظیم کند. این مدل من هست:

public class GridViewData
{
    public PagedList PagedList { get; set; }

    public T EditItem { get; set; }
}

 

نمایش در گریدویو:

البته هیچ گونه HTMLیی بدونه مرتب سازی ارائه نشده است.

اینجا یک نسخه ساده شده هست که من متود گسترش GridView<T>، اطلاعات مورد نیاز (required data)، الگوی سربرگ، الگوی بخش، الگوی ویرایش بخش و الگوی فوتر را طی کرده ام.

همچنین اطلاع داشته باشید که ردیف های تناوبی به سادگی به صورت CSS styles منظممی شوند.

%Html.GridViewEmployee(
    this.ViewData.Model,
    data = { %
        table class="grid" cellpadding="0" cellspacing="0"
    % },
    (item, css) = { %
        tr class="%=css%"
            td%=Html.ActionImageHomeController(c = c.Edit(item.Id), "~/Content/edit.gif", "Edit", null)%/td
            td%=Html.ActionImageHomeController(c = c.Delete(item.Id), "~/Content/delete.gif", "Delete", null)%/td
            td/td
            td%=item.Name%/td
            td%=item.Email%/td
        /tr
    % },
    "item",
    "item-alternating",
    item = { %
        %using (Html.FormHomeController(c = c.Save(item.Id), FormMethod.Post, new { id = "editForm" })) {%
            tr class="item-edit"
                td%=Html.SubmitImage("save", "~/Content/ok.gif", new { alt = "Update" })%/td
                td%=Html.ActionImageHomeController(c = c.Index(), "~/Content/cancel.gif", "Cancel", null)%/td
                td/td
                td%=Html.TextBox("Name", item.Name)%/td
                td%=Html.TextBox("Email", item.Email)%/td
            /tr
        % } %
    % },
    data = { % 
        /table
% });%

کنترل:

احتمالا سخت ترین قسمت کار کنترل باشد: این بخش شامل همه ی روش هایی است که به تمامی اعمالی که توسطthe View درخواست داده می شود رسیدگی می کند.

من یک نمونه دارم که به سادگی the View را با اطلاعات جاری نمایش می دهد.

البته من یک عمل ویرایش و ذخیره را اجرا کرده ام. مطمئن شوید که نمونه زیر را خوب چک کرده اید.

<public ActionResult Show(int? page)
{
    CurrentPage = page.HasValue ? page.Value : CurrentPage;
    GridViewDataEmployee viewData = new GridViewDataEmployee
    {
        PagedList = Employees.ToPagedListEmployee(CurrentPage, 4)
    };

    return View("Index", viewData);
}

public ActionResult Edit(int id)
{
    GridViewDataEmployee viewData = new GridViewDataEmployee
    {
        PagedList = Employees.ToPagedListEmployee(CurrentPage, 4),
        EditItem = Employees.Where( e = e.Id == id).FirstOrDefault()
    };

    return View("Index", viewData);
}

public ActionResult Save(int id)
{
    BindingHelperExtensions.UpdateFrom(
        Employees.Where(e = e.Id == id).FirstOrDefault(),
        Request.Form
    );
    return RedirectToAction("Show");
}

// ...

جزئیات فایل

زبان پروژه : C#&MVCASP.NET
حجم فایل پیوست : 1 MB

دانلود فایل

دانلود با لینک مستقیم
پسورد فایل : www.mspsoft.com
محمد نجفی

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

دیدگاه‌ها

*
*

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