۵
شهریور

جلسه ۳۱ : نمای partial در ASP.NET MVC

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش ASP.NET MVC ، را دنبال می کنند. نمای partial یا نمای جزئی در ASP.NET MVC یک نمایه با قابلیت استفاده ی مجدد است که می تواند به عنوان یک نمای زیر مجموعه در چندین نمایه دیگر مورد استفاده قرار بگیرد. نمای partial در ASP.NET MVC را می توان در layout view یا سایر نمایه ها استفاده کرد. در ادامه ی مباحث این آموزش شما را با نمای جزئی در ASP.NET MVC آشنا خواهیم کرد.

نمای partial در ASP.NET MVC

ما در این مباحث برای آشنایی شما با نمای جزئی در ASP.NET MVC از یک نمایه ساده برای نوار navigation استفاده می کنیم.

به طوریکه شما می توانید از همان نوار navigation در طرح های دیگری بدون بازنویسی مجدد کد آن ، استفاده کنید.

نمای partial در ASP.NET MVC

در شکل زیر ما کد html تشکیل دهنده ی نوار navigation را از سایر کدهای html جدا کرده ایم:

کد تشکیل دهنده ی نوار navigation

ایجاد یک نمای partial در ASP.NET MVC

برای ایجاد یک نمای جزئی در ASP.NET MVC ، روی فولدر Shared راست کلیک کرده و پس از انتخاب Add روی ..View کلیک کنید.

نکته: شما می توانید نمایه جزئی را در همان پوشه ای که از آن استفاده می شود ایجاد کنید.

در پنجره ی Add View در بخش View name نام نمایه را وارد کنید.

تیک چک باکس “Create as a partial view” را نیز بزنید. و سپس روی Add کلیک کنید.

پنجره ی Add View

ما قصد نداریم از یک مدل در نمای partial استفاده کنیم.

بنابراین منوی کشویی Template را در حالت Empty (بدون هیچ مدلی) گذاشته و روی Add کلیک کنید.

حالا شما می توانید کد html مربروط به نوار navigation را cut کرده و آن را در فایل _HeaderNavBar.cshtml قرار دهید (paste کنید):

مثال :

<div class="navbar navbar-inverse navbar-fixed-top">
                <div class="container">
                <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
                </div>
                <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                </div>
                </div>
</div>

</button>

@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })

</div>

<li>@Html.ActionLink("Home", "Index", "Home")</li>

<li>@Html.ActionLink("About", "About", "Home")</li>

<li>@Html.ActionLink("Contact", "Contact", "Home")</li>

</ul>

</div>

به این صورت شما می توانید یک نمای partial ایجاد کنید.

رندرگیری نمای partial

شما می توانید نمای partial را در نمایه های والد با استفاده از متدهای ()RenderPartial یا ()RenderAction ارائه دهید.

هر کدام از متدهای فوق برای اهداف متفاوتی استفاده می شود که در ادامه به توضیح آن می پردازیم.

Html.Partial

@Html.Partial() نمای partial مشخص شده را رندر می گیرد،این نام نمای partial را به عنوان یک پارارمتر رشته ای می پذیرد.

این متد MvcHtmlString را برمی گرداند. و این رشته ی html را برمی گرداند بنابراین شما امکان تغییر دادن html قبل از بارگذاری را دارید.

جدول زیر لیستی از بارگذاری های متد partial را نشان می دهد:

Helper Method	توضیحات
(MvcHtmlString – Html.Partial(string partialViewName	محتوای نمایش داده شده partial را در نمای ذکر شده ارائه می دهد.
MvcHtmlString Html.Partial(string partialViewName,object model)	محتوای نمایش partial را در نما نمایش می کند. پارامتر مدل شیء را به نمای partial بازمیگرداند.
MvcHtmlString – Html.Partial(string partialViewName, ViewDataDictionary viewData)	پارامتر View data دایرکتوری نمای داده را به نمای partial اعمال می کند.
MvcHtmlString – Html.Partial(string partialViewName,object model, ViewDataDictionary viewData)	ترکیبی دو متد قبلی است.

متد RenderPartial همان متد partial است. با این تفاوت که این متد مقدار void را برمی گرداند و html را از یک نمای partial داخل یک نمای HTTP پاسخگو می نویسد.

Helper method	Description
(RenderPartial(String partialViewName	نمای partial مشخص شده را برمی گرداند.
RenderPartial(String partialViewName, Object (model	نمای partial مشخص شده را برگردانده و آبجکت مدل مشخص شده را تنظیم می کند.
RenderPartial(String partialViewName, ViewDataDictionary viewData)	نمایش نمای partial مشخص شده را جایگزین نمایه ViewData آن با شی ViewDataDictionary مشخص شده می کند.
RenderPartial(String partialViewName, Object model, ViewDataDictionary viewData)	نمایش نمای جزئی مشخص شده را جایگزین نمایه ViewData نمایه partial با شی ViewDataDictionary مشخص شده و شیء مشخص شده مدل را تنظیم می کند.

متد RenderAction

متد RenderAction یک کنترلر مشخص و عمل را ایجاد می کند. و نتیجه را در نمای partial نمایش می دهد. متد اجرایی باید PartialViewResult را با استفاده از متد ()Partial بازمی گرداند.

Name	Description
(RenderAction(String actionName	متد اجرایی زیر مجموعه را فراخوانی می کند و نتیجه را در نمای والد ارائه می دهد.
(RenderAction(String actionName, Object routeValue	با استفاده از پارامتر مشخص شده متد اجرایی زیر مجموعه را با استفاده از پارامتر مشخص شده انجام می دهد و نتیجه را در نمای والد نمایش می دهد.
(RenderAction(String actionName, String controllerName	با استفاده از نام کنترلر مشخص می کند که متد اجرایی زیر مجموعه اجرا شده و نتیجه در نمای والد نمایش داده می شود.
RenderAction(String actionName, RouteValueDictionary routeValues	با استفاده از پارامتر مشخص شده متد اجرایی زیر مجموعه را با استفاده از پارامترهای مشخص انجام می دهد و نتیجه را در نمای والد نمایش می دهد.
RenderAction(String actionName, String controllerName, Object routeValue)	با استفاده از پارامترهای مشخص شده و نام کنترلر، متد اجرایی مشخص شده توسط زیر مجموعه را انجام می دهد.
RenderAction(String actionName, String controllerName, RouteValueDictionary routeValues)	با استفاده از پارامترهای مشخص شده و نام کنترلر، متد اجرایی مشخص شده توسط زیر مجموعه را انجام می دهد.

حالا می توانید از هریک از متدهای رندرگیری فوق استفاده کنید.فایل _HeaderNavBar مربوط به نمای partial داخل _Layout.cshtml است.

نمای طراحی زیر ، نمای partial را با استفاده از متد () RenderPartial اجرا می کند:

مثال :

<!DOCTYPE html>
<html>
<head>
                <meta charset="utf-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>@ViewBag.Title - My ASP.NET Application</title>
                @Styles.Render("~/Content/css") 
                @Scripts.Render("~/bundles/modernizr")
</head>
<body>
                @{
                  Html.RenderPartial("_HeaderNavBar");   
    }
                <div class="container body-content">
                @RenderBody()
        
                <hr />
                <footer>
                <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
                </footer>
                </div>

                @Scripts.Render("~/bundles/jquery")
                @Scripts.Render("~/bundles/bootstrap")
                @RenderSection("scripts", required: false)
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title - My ASP.NET Application</title>

@Styles.Render("~/Content/css")

@Scripts.Render("~/bundles/modernizr")

</head>

<body>

Html.RenderPartial("_HeaderNavBar");

}

@RenderBody()

<hr />

<p>© @DateTime.Now.Year - My ASP.NET Application</p>

</footer>

</div>

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/bootstrap")

@RenderSection("scripts", required: false)

</body>

</html>

نکته: RenderPartial مقدار void را برمی گرداند. بنابراین یک semicolon در انتها نیاز است و اینکه باید با براکت { } بسته شود.

نمای طراحی زیر از متد Partial برای رندر جزئی view_HeaderNavBar.cshtml استفاده می کند:

مثال :

<!DOCTYPE html>
<html>
<head>
                <meta charset="utf-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>@ViewBag.Title - My ASP.NET Application</title>
                @Styles.Render("~/Content/css") 
                @Scripts.Render("~/bundles/modernizr")
</head>
<body>
                 @Html.Partial("_HeaderNavBar")   
                <div class="container body-content">
                @RenderBody()
        
                <hr />
                <footer>
                <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
                </footer>
                </div>

                @Scripts.Render("~/bundles/jquery")
                @Scripts.Render("~/bundles/bootstrap")
                @RenderSection("scripts", required: false)
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title - My ASP.NET Application</title>

@Styles.Render("~/Content/css")

@Scripts.Render("~/bundles/modernizr")

</head>

<body>

@Html.Partial("_HeaderNavBar")

@RenderBody()

<hr />

</footer>

</div>

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/bootstrap")

@RenderSection("scripts", required: false)

</body>

</html>

نکته : متد @Html.Partial() به کد بلاک احتایجی ندارد چراکه یک رشته ی html را برمی گرداند.

اجرای برنامه

حالا بعد از اجرای برنامه رابط کاربری زیر را مشاهده خواهید کرد:

نتیجه ی اجرای برنامه

بنابراین با استفاده از روش های فوق، شما می توانید از نمای partial بدون هیچ تغییر در رابط کاربری استفاده کنید.

نکات زیر را به خاطر بسپارید:

۱- نمای partial یک نمای با قابلیت استفاده ی مجدد است که می توان از آن در چندین نمای دیگر نیز استفاده کرد.

۲- نمای partial را می توان با استفاده از متدهای ()Html.Partial(), Html.RenderPartial یا ()Html.RenderAction پیاده سازی کرد.

کلام آخر

با استفاده از نمای partial در ASP.NET MVC می توانید یک طراحی جزئی از بخشی از قالب صفحه وب ایجاد کرده و آن را به دفعات در طراحی های دیگر نیز استفاده کنید. با این روش حجم کدهای شما نیز به مقدار قابل توجه کاهش خواهد یافت.

QR: جلسه ۳۱ : نمای partial در ASP.NET MVC

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۳۱ : نمای partial در ASP.NET MVC

مقدمه

نمای partial در ASP.NET MVC

ایجاد یک نمای partial در ASP.NET MVC

رندرگیری نمای partial

Html.Partial

متد RenderAction

اجرای برنامه

کلام آخر

لیست مطالب دوره

مقدمات آموزش ASP.NET MVC

آموزش Html helper

اعتبارسنجی در ASP.NET MVC

نمای طراحی

تکنیک Bundling

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ