آموزش Partial view در asp.net mvc | آکادمی استادباش

سطح مقاله : مقدماتی

نویسنده : پوریا منتخب

osbsh.ir/7ecf

Partial View چیست ؟

Partial View ها مشابه Web User Control ها در Asp.Net Web Form هستند. از پارشیال ویو ها به منظور کامپوننت محورکردن Razor View ها استفاده می شود که درنهایت موجب خوانایی بیشتر و توسعه پذیری آسان تر می گردد.به عبارت ساده تر، می توانند مسئولیت نمایش بخشی از محتوای یک صفحه را به عهده بگیرند.پارشیال ها همچنین می توانند به صورت مستقیم از سمت کنترلر ها ارجاع داده شوند. در این حالت، مرورگر ها هنوز محتوایی از نوع text/html دریافت می کنند نه لزوما HTML تنها که یک صفحه کامل را تشکیل می دهد. گفتیم از پارشال ویو ها می توان برای کامپوننت محور کردن برنامه استفاده کرد. بله درست است. شما می توانید یک پارشیال ویو را به تعداد بار دلخواه در صفحات مختلف فراخوانی نمایید به جای اینکه هر بار آن ها را مجددا کد نویسی کنید (که به ما در امر کدنویسی بهینه کمک شایانی می کند).پارشیال ویوها توسط آبجکت ViewDataDictionary از ویوی والد خود نمونه سازی می شوند و به همین دلیل است که در صفحه ها می توانند به عناصر ویوی والد نیز دسترسی داشته باشند.

انواع پارشال ویو ها

به طور کلی به دو دسته تقسیم بندی می شوند

Static Partial Views : که به منظور رندر کردن داده های ایستا و بدون تغییر هستند.
Dynamic Partial Views : که به منظور رندر کردن داده های داینامیک وقابل تغییر هستند.

Static Partial Views

@{Html.RenderPartial(“_PartialViewName”)}

متد RenderPartial خروجی از نوع Void دارد و خروجی را در صفحه نمایش نشان می دهد.

 @{Html.Partial(“_PartialViewName”)}

خروجی متد Partial از نوع MVC Html String می باشد. در این حالت شما می توانید خروجی را درون متغیر ذخیره نمایید.

Dynamic Partial Views

 @{Html.RenderAction(“_PartialViewName”)}

خروجی متد RenderAction از نوع MVC Html String است.

@{Html.Action(“_PartialViewName”)

پارشیال ویو ها در Asp.Net MVC به چه صورت پیاده سازی می شوند ؟

برای تست موارد بالا مراحل زیر را دنبال کنید :

پروژه ویژوال استودیو خود را باز نمایید.
بر روی گزینه Create a new project کلیک نمایید.
در صفحه باز شده، در کادر جستجوی بالای صفحه عبارت asp.net web application را وارد نمایید و از بین گزینه های لیست شده بر روی ASP.NET Web Application (.Net Framework) کلیک نمایید.
در صفحه بعد در کادر Project name عنوان پروژه خود را به دلخواه وارد نمایید (من عنوان پروژه را PartialViewsInPractice قرار دادم) و از کادر Location مسیر مورد نظر برای ذخیره سازی وارد نمایید. از کادر Framework پایین صفحه بر روی آخرین گزینه از لیست بازشونده کلیک نمایید (برای من گزینه.Net Framework 4.8 موجود است. در صورتی که این گزینه را مشاهده نمی کنید، ویژوال استودیو خود را به آخرین نسخه بروز رسانی نمایید )
در صفحه جدید بر روی گزینه MVC کلیک نمایید تا پروژه مورد نظر ما از نوع Asp.Net MVC ایجاد گردد.
در ادامه بر روی فولدر Controller راست کلیک نمایید و از منوی باز شده بر روی گزینه Add کلیک نمایید و از لیست باز شده گزینه Controller را انتخاب نماید تا یک کنترلر جدید ایجاد شود.
در پنجره باز شده (Add Scaffold) بر روی گزینه MVC5 Controller – Empty انتخاب و از انتهای صفحه گزینه Add را کلیک کنید.
در مرحله بعد نام کنترلر مورد نظر را وارد نمایید. (من عنوان MyController را وارد کردم).
در کنترلر ایجاد شده یک متد اکشن به نام Index به صورت پیشفرض موجود می باشد. بر روی عنوان Index راست کلیک نمایید و از منوی باز شده گزینه Add View را کلیک نمایید.
در پنجره باز شده (Add View)، در کادر View Name عنوان Index را وارد نمایید (به صورت پیشفرض عنوان Index در این کادر قرار دارد) و گزینه Template را هم بر روی Empty (without model) قرار دهید و در انتها بر روی گزینه Add کلیک نمایید.
در فولدر Shared در root اصلی پروژه، ویوی _Layout را باز نمایید و در قسمت پایینی صفحه سکشن فوتر را cut نمایید.

<footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
</footer>

مجددا بر روی گزینه Shared راست کلیک نمایید و از منوی باز شده گزینه Add و سپس از منوی بعدی گزینه View را انتخاب نمایید.
در این مرحله باید یک پارشیال ویو جدید ایجاد کنید پس در کادر View name عنوان پارشیال ویو را وارد نمایید. دقت نمایید که در ابتدای نام پارشیال خود از علامت Under score یا همان _ استفاده نمایید. این یک قرارداد است که نام پارشیال ها با _ شروع شود، پس ما هم از آن پیروی می کنیم (من عنوان _MyView را وارد می کنم). سپس در همین صفحه از بین گزینه های موجود در لیست options گزینه Create as a partial view را انتخاب نمایید و در انتها بر روی Add کلیک نمایید.
حال در پارشیال ویوی جدید ایجاد شده (_MyView)، ایتدا همه کد های موجود در آن را پاک نمایید (اگر کدی موجود بود)، سپس سکشن فوتر را که در مراحل بالا Cut نمودید در این قسمت Paste کنید.
سپس مرحله شماره 13 را مجددا برای ایجاد یک پارشیال ویو دیگر انجام دهید (من نام پارشیال ویو جدید را _MyView2 قرار دادم).
مجدد در ویوی _Layout، دستورات بین دیویژنی با کلاس container را cut نمایید (منظور کد های زیر است).

<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>

سپس تکه کد بالا را که در مرحله 16 Cut نمودید. درپارشیال ویوی _MyView2 قرار دهید.
تا این مرحله ما پارشیال مورد نظر خود را ایجاد کرده ایم، فقط کافی است که آن را در هر صفحه که لازم داریم فراخوانی کنیم، از این رو در همان ویوی _Layout که کد های دیویژنی با کلاس container را Cut کرده اید، دستورا زیر را قرار دهید :

@{ 
            var MyView2Part = Html.Partial("_MyView2");
            MyView2Part = new MvcHtmlString(MyView2Part.ToString() + "<h2> My View Is Looking Now . </h2>");
}
@MyView2Part

در دستورات بالا ابتدا با استفاده از متد Html.Partial، پارشیال ویوی خود را فراخوانی و آن را درون یک متغیر قرار داده ایم. سپس در خط بعدی از کلاس MvcHtmlString نمونه ای جدید ایجاد کرده ایم و به عنوان ورودی پارشیال ویو مورد نظر را پاس داده ایم، همچنین یک تگ h2 با عنوانی کوتاه را به آن اضافه کرده ایم و در انتها با استفاده از دکوراتور @ آن را رندر کرده ایم.خروجی به شکل زیر خواهد بود.

نحوه استفاده از partial view ها به صورت استاتیک

تا این مرحله ما توانستیم پارشیال ویویی از نوع Static بسازیم و آن را فراخوانی کنیم، حال نوبت به ایجاد یک پارشیال ویو از نوع Dynamic می باشد، پس طبق بالا مراحل زیر را دنبال نمایید.

درون کنترلر MyController اکشن متدی با نام Students بسازید که خروجی آن از نوع PartialViewResult می باشد و دستورات زیر را در آن قرار دهید.

public PartialViewResult students()
        {
            string[] arr = { "CS Students ", "IT Students" , "Civil Students" , "Mech Students" };
            return PartialView("_Students", arr);
        }

حال باید پارشیال ویو مربوط به اکشن Students را بسازیم. طبق روال قبلی پارشیال ویو _Students را ایجاد کنید و درون آن دستورات زیر را قرار دهید.

<h2> Students Departments </h2>
<ul>
@foreach(var item in Model){
<li>@item</li>
}
</ul>

وارد ویو _Layout شوید و در زیر @RenderBody دستورات زیر را وارد نمایید:

@{Html.RenderPartial(“_MyView”);}
<h2>By Nitin Pandit </h2>
@{Html.RenderAction(“Students”,”My”);}

در دستورات بالا ابتدا با استفاده از متد RenderPartial، پارشیال ویوی _MyView را که به صورت استاتیک بود فراخوانی کرده ایم و در خط بعدی با استفاده از RenderAction، پارشیال ویوی درون اکشن Students واقع در کنترلر My را فراخوانی کرده ایم که به صورت داینامیک است. خروجی به شکل زیر خواهد بود.

نحوه استفاده از Partial view به صورت داینامیک