توضیحات و دانلود

نمایش جزییات ردیف انتخاب شده WebGrid در ASP.NET MVC
1 0
نمایش جزییات ردیف انتخاب شده WebGrid در ASP.NET MVC

در این مقاله توضیح میدهیم كه چگونه میتوان جزییات ردیف  انتخاب شده را در WebGrid در Controller در ASP.Net MVC Razor را نمایش داد.

داده های انتخاب شده از ردیف WebGrid  با استفاده از jQuery استخراج می شوند و در قالب JSON به روش Action Controller با استفاده از فرم ارسال در ASP.Net MVC Razor ارسال می شوند.

بانك اطلاعاتی

توجه! ما از پایگاه داده Northwind مایكرو سافت استفاده میكنیم كه شما میتوانید از لینك زیر آن را دانلود كنید!دانلود اسكریپت SQL

Model

ابتدا از طریق Entity Framework به جدول پایگاه داده متصل می شویم .

فضای نام

ابتدا فضای نام زیر را اضافه كنید

using System.Web.Script.Serialization;

Controller

Controller متشكل از دو روش عمل است.

عملیات GET از نمای Index

Entity Framework  در حال حاضر پیكربندی شده و از این رو اكنون می توانیم Controller ایجاد كنیم و كد را برای بارگیری سوابق از جدول مشتریان پایگاه Northwind ایجاد كنیم .

در داخل روش Action Index، سوابق مشتری با استفاده از Entity Framework  چیده شده و به View باز می گردد.

روش مدیریت ارسال جزئیات

 این روش در اكشن هنگامی كه یك ردیف WebGrid انتخاب می شود،  ارتباط را مدیریت می كند.

مقدار پارامتر clientId برای جمع آوری ركوردهای مشتری با استفاده از چارچوب Entity Framework مورد استفاده قرار می گیرد كه سپس برای نمایش جزئیات جزء مورد استفاده قرار می گیرد.

در نهایت Partial View از Controller برمیگردد.

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        NorthwindEntities entities = new NorthwindEntities();
        return View(entities.Customers.ToList());
    }
 
    public ActionResult Details(string customerId)
    {
        NorthwindEntities entities = new NorthwindEntities();
        return PartialView("Details", entities.Customers.Find(customerId));
    }
}

View

در داخل View Index ، در خط اول، Entity Customer به عنوان IEnumerable اعلان می شود كه مشخص می كند كه مدل به عنوان یك مجموعه در دسترس خواهد بود.

WebGrid با مجموعه ای از مدل IEnumerable از اشیاء كلاس مشتری Entity به عنوان منبع اولیه مشخص شده است.

WebGrid با استفاده از روش GetHtml با پارامترهای زیر ایجاد می شود.

HtmlAttributes - برای تنظیم ویژگی های HTML به جدول HTML ایجاد شده توسط WebGrid مانند شناسه، نام، كلاس و غیره استفاده می شود.

Columns - مشخص می كند كه چه ستون هایی در WebGrid نمایش داده شوند و همچنین اجازه می دهد تا متن خاص سربرگ را برای ستون تنظیم كنید.

آخرین ستون WebGrid شامل ActionLink است كه با استفاده از روش Html.ActionLink Helper ایجاد شده است. ActionLink با یك كلاس CSS مشخص شده است كه به عنوان یك انتخاب جی كوئری برای اختصاص دادن یك رویداد jQuery Click برای ActionLink مورد استفاده قرار می گیرد.

انتخاب لینك برای انتخاب یك ردیف WebGrid استفاده می شود . هنگامی كه یك ردیف در WebGrid انتخاب شد، یك بررسی برای اطمینان از انتخاب WebGrid انجام می شود و مقدار CustomerId از ردیف انتخاب شده WebGrid به  Partial View منتقل می شود كه با استفاده از روش Html.RenderAction Helper رندر می شود.

@model IEnumerable<WebGrid_SelectedRow_MVC.Customer>
@using WebGrid_SelectedRow_MVC;
@{
    Layout = null;
    WebGrid webGrid = new WebGrid(source: Model, canSort: false, rowsPerPage: 5);
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body
        {
            font-familyArial;
            font-size10pt;
        }
        .Grid
        {
            border1px solid #ccc;
            border-collapsecollapse;
        }
        .Grid th
        {
            background-color#F7F7F7;
            font-weightbold;
        }
        .Grid th.Grid td
        {
            padding5px;
            border1px solid #ccc;
        }
        .Grid.Grid table td
        {
            border0px solid #ccc;
        }
        .Grid a.Grid  a:visited
        {
            colorblue;
        }
    </style>
</head>
<body>
    @webGrid.GetHtml(
        htmlAttributes: new { @id = "WebGrid", @class = "Grid" },
        columns: webGrid.Columns(
                 webGrid.Column("CustomerID""دسته مشتری"),
                 webGrid.Column("ContactName""نام مشتری"),
                 webGrid.Column("City""شهر"),
                 webGrid.Column("Country""كشور"),
                 webGrid.Column("Select"null, format: @<text>@item.GetSelectLink("Select")</text>)
      ))
    <br />
    @if (webGrid.HasSelection)
    {
        string customerId = (webGrid.SelectedRow.Value as Customer).CustomerID;
        Html.RenderAction("Details"new { customerId = customerId });
    }
</body>
</html>

مشاهده جزئیات

برای اضافه كردن نمایش جزئیات ، شما باید داخل كلاس كنترلر راست كلیك كنید و بر روی گزینه Add View كلیك كنید تا یك View برای Controller كننده ایجاد شود.

نام  Details ,View تعریف شده است ، گزینه Template به صورت Empty تنظیم شده است، كلاس Model به Entity Customer (كه توسط Entity Framework ساخته شده است)، كلاس Data context به NorthwindEntities تنظیم شده و در نهایت Create as یك گزینه نمایش جزئیات باید بررسی شود.

در داخل Partial View ، در قسمت اول، Entity Customer به عنوان مدل برای Partial View اعلام می شود . جزئیات مشتری با استفاده از روش Html.DisplayFor نمایش داده می شود.

@model WebGrid_SelectedRow_MVC.Customer
 
<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="top" style="width:65px"><b>@Html.DisplayNameFor(model => model.Address):</b></td>
        <td>
            @Html.DisplayFor(model => model.Address)
            <br />
            @Html.DisplayFor(model => model.City),
            @Html.DisplayFor(model => model.PostalCode)
            <br />
            @Html.DisplayFor(model => model.Country)
        </td>
    </tr>
</table>
 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :