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

نحوه نمایش جزئیات ردیف جدول در پنجره Pop-up Modal Dialog با استفاده از Partial View در ASP.Net MVC
0 0
نحوه نمایش جزئیات ردیف جدول در پنجره Pop-up Modal Dialog با استفاده از Partial View در ASP.Net MVC

در این مقاله  با مثال نحوه نمایش جزئیات  ردیف جدول  در پنجره Pop-up Modal Dialog را روی Top Parent View در ASP.Net MVC توضیح خواهیم داد .
اطلاعات در Partial View با استفاده از jQuery AJAX جمع می شود و در نهایت به صورت HTML درون Pop-up Modal Dialog نمایش داده می شود.

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

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

Model

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

Controller
کنترل کننده متشکل از دو روش عمل است.
روش  GET
در داخل این روش عمل، سوابق 10 مشتری برتر از جدول مشتریان Northwind Database گرفته شده و به View باز می گردد.
روش  POST جی کوئری
در این روش ابتدا با استفاده از id دریافت شده اطلاعات مشتری را به view برای نمایش باز میگرداند.
 

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

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

@model Partial_View_MVC.Customer
<style type="text/css">
    body {
        font-familyArial;
        font-size10pt;
    }
    tabletable td {
        border0px solid #fff;
    }
</style>
 
<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>
 

صفحه index.cshtml

@model IEnumerable<Partial_View_MVC.Customer>
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body {
            font-familyArial;
            font-size10pt;
        }
 
        table {
            border1px solid #ccc;
            border-collapsecollapse;
            background-color#fff;
        }
 
        table th {
            background-color#B8DBFD;
            color#333;
            font-weightbold;
        }
 
        table thtable td {
            padding5px;
            border1px solid #ccc;
        }
 
        tabletable table td {
            border0px solid #ccc;
        }
    </style>
</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="displaynone">
    </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>


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

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