آموزش کار با Partial View در ASP.Net MVC

آموزش کار با Partial View در ASP.Net MVC :

در این درس به آموزش کار با Partial View در ASP.Net MVC خواهیم پرداخت.

Partial View چیست؟

Partial View یک View چند بار قابل استفاده است که می توان آن را در یک یا چندین child view، به صورت همزمان به کار برد. Partial View عملکردی مشابه user control ها در ASP.Net دارند. این ابزار، کد نویسی های تکراری و چند باره را با امکان استفاده از یک مجموعه کد در بخش های مختلف یک View از بین می برد. شما می توانید Partial View را در یک Layout View و یا یک View معمولی، به صورتی یکسان به کار ببرید. با استفاده از Partial View، سرعت کد نویسی بالا رفته و همچنین فرآیند به روز رسانی View ها، بسیار آسان می شود.
برای شروع کار، بیایید یک Partial View ساده را جهت تکرار بخش منو (Navigation bar) در پروژه تمرینی خود، ایجاد کنیم. برای بخش منو که در عکس زیر نشان داده شده است، یک Partial View Partial View خواهیم ساخت. بنابراین شما می توانید این بخش از منو را بدون نیاز به نوشتن چند باره کد آن، در یک یا چندین Layout View و یا View مستقل به کار ببرید.

عکس زیر، کد HTML مربوط به بخش منو (navigation bar) را نشان داده است. کد این کپی را Cut کرده و در یک Partial View Partial View قرار می دهیم :

آموزش ایجاد یک Partial View جدید در ASP.Net MVC :

برای ایجاد یک Partial View، بر روی پوشه Shared Folder، کلیک راست کرده و به ترتیب گزینه های Add و View را بزنید.

همانند تصویر زیر، در کادر Add New View، نام View را تعیین کرده و سپس گزینه “Create as a partial " را علامت بزنید.

در این مثال قصد نداریم تا از یک model برای Partial View استفاده کنیم، بنابراین کادر کشویی Template را خالی (Empty) با مقدار (without model) تنظیم کنید. این کار باعث ایجاد یک partial view خالی درون پوشه Shared Folder می شود.
هم اکنون می توانید کد بخش منو (Navigation Bar) را در فایل _HeaderNarBar.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>

هم اکنون یک Partial View حاوی کد منوی بالای سمت راست را ایجاد کرده اید. در ادامه به آموزش نحوه reuder آن در صفحه مقصد خواهیم پرداخت.

آموزش Reuder Partial View :

شما می توانید یک Partial View را با استفاده از متدهای کمکی Partial()، ()Reuder Partial و ()Reuder Action در Partial View مورد نظر reuder کنید. ابتدا بیایید نگاهی کلی به هر کدام از متدهای فوق انداخته و ببینیم Partial View چگونه از آن ها استفاده می کند.

بررسی متد کمکی Html.Partial() :

متد کمکی @Html.Partial() نما Partial View تعیین شده برای آن را تولید (Reuder) می کند. این متد نام Partial View را به عنوان یک پارامتر string دریافت کرده و یک شی MVC HtmlString را بر می گرداند. از آنجایی که این متد یک html string را به عنوان خروجی بر می گرداند، بنابراین این امکان را دارید تا کد آن را قبل از reuder شدن، ویرایش نمایید.
جدول زیر، لیست حالت های مختلف فراخوانی متد کمکی Partial یا Overload های آن را نشان می دهد :

بررسی متد ()Html.ReuderPartial :

متد کمکی ()ReuderPartial همانند متد ()Partial است، با این تفاوت که هیچ مقداری را بر نمی گرداند (return void) و کد HTML تولید شده Partial View مورد نظر را به صورت مستقیم در یک http response می نویسد.
جدول زیر overload های مختلف فراخوانی متد ()ReuderPartial را نشان می دهد.

بررسی متد کمکی ()Html ReuderAction :

متد کمکی ReuderAction یک کنترلر و action خاص مورد نظر را فراخوانی کرده و نتیجه را به صورت یک Partial View، اجرا (Reuder) می کند. متد Action تعیین شده بایستی با استفاده از متد Partial خروجی Partial;ViewResult را بازگرداند.
جدول زیر Overload های مختلف متد ()ReuderAction را نشان داده است :

بنابراین، اکنون می توانید با استفاده از هر یک از متدهای reudering فوق، فایل _HeaderNavBar Partial View را تولید کرده و در صفحه _Layout.cshtml قرار دهید. در کد مثال عملی زیر، layout view با استفاده از متد ()ReuderPartial بخش Partial View را تولید کرده است :

<!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>© @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

در کد مثال عملی زیر نیز، layout view از یک متد Partial برای تولید _HeaderNavBar.cshtml در partial View استفاده کرده است :

<!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>© @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

در پایان، خروجی زیر را در هنگام اجرای برنامه در UI خواهید دید :

بنابراین در روش فوق، می توانید از Partial view بدون هیچ تفاوتی در UI استفاده کنید.