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

نمایشPartial View در تگ DIV با ASP.Net MVC
0 0
نمایشPartial View در تگ DIV با ASP.Net MVC

در این مقاله با مثال توضیح خواهdم داد که چگونه  Partial view را در داخل DIV با استفاده از jQuery در ASP.Net MVC نمایش دهیم.

 اطلاعات در Partial viewا با استفاده از jQuery AJAX جمع می شود و در نهایت به صورت HTML در داخل DIV با استفاده از jQuery  بارگزاری می شود.

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

توجه! ما از پایگاه داده 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 استفاده کنید.

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