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

ارسال ردیف WebGrid به Controller در ASP.NET MVC
1 0
ارسال ردیف WebGrid به Controller در 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 باز می گردد.

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

در داخل این روش ، مقدار فیلد پنهان از طریق پارامتر clientJSON دریافت می شود.

مقدار فیلد پنهان حاوی داده های ارسال شده از ردیف WebGrid انتخاب شده در فرمت رشته سریال JSON است.

رشته JSON به شی Object مشتری بازنویسی می شود كه در نهایت به View باز می گردد.

public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            NorthwindEntities entities = new NorthwindEntities();
            return View(entities.Customers.ToList());
        }
 
        [HttpPost]
        public ActionResult Details(string customerJSON)
        {
            Customer customer = (new JavaScriptSerializer()).Deserialize<Customer>(customerJSON);
            return View(customer);
        }
    }

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 مورد استفاده قرار می گیرد.

View همچنین متشكل از یك فرم HTML است كه با استفاده از متد Html.BeginForm ایجاد شده است. فرم HTML متشكل از فیلد پنهان HTML است.

هنگامی كه روی ActionLink كلیك می شود، داده ها از ردیف WebGrid انتخاب شده برداشته می شوند و یك شی JSON با نام های مشابه كلاس Customer Entity ایجاد می شود.

سپس JSON به رشته JSON سریال داده می شود و در فیلد مخفی ذخیره می شود.

در نهایت فرم HTML به روش Action Controller ارسال می شود.

@model IEnumerable<WebGrid_Pass_SelectedRow_Controller_MVC.Customer>
@using WebGrid_Pass_SelectedRow_Controller_MVC;
@{
    Layout = null;
    WebGrid webGrid = new WebGrid(source: Model, canSort: false);
}
 
<!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(nullnull, format: @<text>@Html.ActionLink("Select"nullnullnew { @class = "select" })</text>)
      ))
    @using (Html.BeginForm("Details""Home"FormMethod.Post, new { @id = "IndexForm" }))
    {
        <input type="hidden" name="customerJSON" />
    }
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/json2/20160511/json2.min.js"></script>
    <script type="text/javascript">
        $("body").on("click"".select"function () {
            var row = $(this).closest("tr");
            var customer = {};
            customer.CustomerID = row.find("td").eq(0).html();
            customer.ContactName = row.find("td").eq(1).html();
            customer.City = row.find("td").eq(2).html();
            customer.Country = row.find("td").eq(3).html();
            $("[name=customerJSON]").val(JSON.stringify(customer));
            $("#IndexForm")[0].submit();
            return false;
        });
    </script>
</body>
</html>

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

@model WebGrid_Pass_SelectedRow_Controller_MVC.Customer
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>جزئیات</title>
    <style type="text/css">
        body
        {
            font-familyArial;
            font-size10pt;
        }
    </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td valign="top" style="width:100px"><b>ردیف انتخاب شده: </b></td>
            <td>
                @Html.DisplayFor(model => model.CustomerID)
                <br />
                @Html.DisplayFor(model => model.ContactName),
                @Html.DisplayFor(model => model.City)
                <br />
                @Html.DisplayFor(model => model.Country)
            </td>
        </tr>
    </table>
</body>
</html>

نقشه مسیرها برای مشاهده جزئیات

با استفاده از عملكرد MapRoute , باید مسیر را برای جزئیات مشخش كنیم.

این مسیر یابی لازم است در غیر این صورت مسیریابی برای View Details در هنگام كلیك بر روی ActionLink در WebGrid كار نخواهد كرد.

public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
 
            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
 
            routes.MapRoute(
               name: "Details",
               url: "{controller}/{action}/{id}",
               defaults: new { controller = "Home", action = "Details", id = UrlParameter.Optional }
           );
        }


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

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