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

پیاده سازی و نمایش jQuery Modal Popup Dialog در ASP.Net MVC Razor
0 0
پیاده سازی و نمایش jQuery Modal Popup Dialog در ASP.Net MVC Razor

با سلام  در این مقاله، با یک مثال توضیح خواهیم داد که چگونه پنجره jQuery Modal Popup Dialog را در ASP.Net MVC Razor اجرا و نمایش دهیم.
نمایش جزئی نشان داده می شود و با استفاده از جی کوئری AJAX جمع و در نهایت به عنوان HTML در داخل jQuery Modal Dialog (Modal Popup window) ارائه می شود .
بانک اطلاعاتی
این مقاله از پایگاه داده Northwind استفاده می کند. دستورالعمل های دانلود و نصب در لینک زیر ارائه شده است.
پایگاه داده Northwind را دانلود و نصب کنید
پیکربندی و اتصال Entity Frameworkبه پایگاه داده
حالا مراحل پیکربندی و اضافه کردن Entity Framework و نیز نحوه اتصال آن با پایگاه داده توضیح خواهیم داد.
شما نیاز دارید که Model داده Entity را به پروژه خود اضافه کنید با راست کلیک بر روی Solution Explorer و سپس بر روی گزینه افزودن و  گزینه New Item در منوی زمینه کلیک کنید.

از پنجره افزودن آیتم جدید، ADO.NET Entity Data Model را انتخاب کرده و نام خود را به عنوان NorthwindModel تنظیم کنید و سپس روی افزودن کلیک کنید.

سپس داده Entity Data Model Wizard باز خواهد شد و در آنجا باید گزینه پایگاه داده EF Designer را انتخاب کنید.

در حال حاضر Wizard از شما میخواهد که اتصال و پیکربندی روتر اتصال را به پایگاه داده متصل کنید.

شما باید انتخاب کنید :
1. Instance SQL Server
2. پایگاه داده

و سپس روی Test Connection کلیک کنید تا مطمئن شوید تمام تنظیمات درست است.

هنگامی که String اتصال ایجاد می شود، روی دکمه Next کلیک کنید تا به مرحله بعدی بروید.

بعد شما باید نسخه Entity Framework را برای اتصال مورد استفاده قرار دهید.

حالا شما باید جداول هایی را که نیاز دارید برای اتصال و کار با Entity Framework را انتخاب کنید . جدول مشتریان اینجا انتخاب شده است.

این مرحله آخرین مرحله بود و شما باید Entity Data Model را با جدول مشتریان پایگاه Northwind آماده کنید

Controller
Controller متشکل از دو روش است.
روش دست زدن به عملیات GET
در داخل این روش ، سوابق 10 مشتری برتر از جدول مشتریان Northwind Database گرفته شده و به View باز می گردد.
روش اداره عملیات POST جی کوئری
این روش ارتباط گرفته شده از عمل POST جی کوئری در View را مدیریت می کند.
ارزش پارامتر clientId برای جمع آوری رکوردهای مشتری با استفاده از چارچوب Entity Framework مورد استفاده قرار می گیرد که سپس برای جزئیات View نمایش داده می شود.
در نهایت View Partial از Controller بازگشته است.

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        NorthwindEntities entities = new NorthwindEntities();
        return View(from customer in entities.Customers.Take(10)
                    select customer);
    }
 
    [HttpPost]
    public ActionResult Details(string customerId)
    {
        NorthwindEntities entities = new NorthwindEntities();
        return PartialView("Details", entities.Customers.Find(customerId)); 
    }
}

View
 شما باید در داخل کلاس Controller راست کلیک کنید و بر روی گزینه Add View کلیک کنید تا یک View برای Controller ایجاد شود.
نام View به Index و گزینه Template به Empty تنظیم شده است، کلاس Model به Entity Customer (که ما با استفاده از Entity Framework ایجاد کرده ایم) و در نهایت کلاس context Data برای NorthwindEntities تنظیم شده است.

 

درون View ، در اولین خط اول، Entity مشتری به عنوان IEnumerable اعلام می شود که مشخص می کند آن به صورت مجموعه در دسترس خواهد بود.
برای View سوابق، یک جدول HTML استفاده می شود. یک حلقه بر روی Modal اجرا می شود که ردیف جدول HTML را با سوابق مشتری تولید می کند.
ستون آخر جدول HTML متشکل از یک Link Anchor است. Link Anchor HTML دارای یک رویداد jQuery Click است.
هنگامی که Link Anchor Link کلیک می شود، یک ارتباط جی کوئری AJAX به روش Action Controller ساخته می شود و جزئیات به عنوان HTML نمایش داده می شود که در نهایت با استفاده از پنجره jQuery Modal Dialog Popup نشان داده می شود.

@model IEnumerable<Partial_View_MVC.Customer>
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <h4>Customers</h4>
    <hr/>
    <table cellpadding="0" cellspacing="0" id="CustomerGrid">
        <tr>
            <th>CustomerID</th>
            <th>Contact Name</th>
            <th>City</th>
            <th>Country</th>
            <th></th>
        </tr>
        @foreach (Customer customer in Model)
        {
            <tr>
                <td>@customer.CustomerID</td>
                <td>@customer.ContactName</td>
                <td>@customer.City</td>
                <td>@customer.Country</td>
                <td><a class="details" href="javascript:;">View</a></td>
            </tr>
        }
    </table>
    <div id="dialog" style="display: none">
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
          rel="stylesheet" type="text/css"/>
    <script type="text/javascript">
        $(function () {
            $("#dialog").dialog({
                autoOpen: false,
                modal: true,
                title: "View Details"
            });
            $("#CustomerGrid .details").click(function () {
                var customerId = $(this).closest("tr").find("td").eq(0).html();
                $.ajax({
                    type: "POST",
                    url: "/Home/Details",
                    data: '{customerId: "' + customerId + '" }',
                    contentType: "application/json; charset=utf-8",
                    dataType: "html",
                    success: function (response) {
                        $('#dialog').html(response);
                        $('#dialog').dialog('open');
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });
            });
        });
    </script>
</body>
</html>

 

Partial View
برای اضافه کردن Partial View، شما باید در داخل کلاس Controller راست کلیک کنید و بر روی گزینه Add View کلیک کنید تا یک View برای Controller ایجاد شود.
نام View به جزئیات تعریف شده است ، گزینه Template به Empty تنظیم شده است، کلاس Model به Entity Customer (که با استفاده از Entity Framework ساخته شده است)، کلاس Data context به NorthwindEntities تنظیم شده و در نهایت Create As گزینه partial view باید بررسی شود.

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

@model Partial_View_MVC.Customer
 
<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="top"><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 استفاده کنید.

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