آموزش Asp.Net MVC پارشیال ویو تو در تو

پارشیال ویو تو در تو یا nested partial view پکی از قابلیت های کاربردی در MVC میباشد که به شما امکان میدهد یک پارشیال ویو را در یک پارشیال ویو دیگر صدا بزنید. مثلا اگر یک وبلاگ را در نظر بگیرید که مجموعه ای از پست های کنار هم هستند، کل پست ها میتواند یک partial view باشد و در جاهای مختلف فراخوانی شود. ولی هر کدام از پست ها هم میتواند در قالب یک پارشیال ویو باشد، با این کار به راحتی میتوانیم آن را در حلقه های مختلف فراخوانی کنیم و یا دیزاین آن را تغییر دهیم.

برای درک بهتر موضوع در قالب یک مثال عملی آن را شرح میدهم.

• ابتدا یک مدل برای پست های خود ایجاد کنیم.

public class Blog
{
    [Key]
    [Required]
    [Display(Name = "شناسه پست")]
    public int PostID { get; set; }

    [Required]
    [MaxLength(500)]
    [Display(Name = "تایتل")]
    public string PostTitle { get; set; }

    [Display(Name = "محتوا")]
    [DataType(DataType.MultilineText)]
    [AllowHtml]
    public string PostContent { get; set; }

    [Display(Name = "تصویر شاخص")]
    [MaxLength(100)]
    [AllowHtml]
    public string PostImage { get; set; }

    [Display(Name = "گالری ")]
    [AllowHtml]
    public string PostGallery { get; set; }

    [Display(Name = "کروسل ")]
    [AllowHtml]
    public string PostCarousel { get; set; }
}

• حال قصد داریم تا پست های خود را نمایش دهیم، پس یک کنترلر و یک ویو برای آن ایجاد میکنیم.
• در ویو خود یک partial داینامیک ایجاد میکنیم و در کنترل آن پست ها را دریافت و به partial ارسال میکنیم.

@Html.Action("ShowPost","Blog")

• در پارشیال خود یک حلقه ایجاد میکنیم تا اطلاعات هر پست را دیافت کنیم.

@foreach (var item in Model)
{
    @Html.Partial("_Post1",item)
}

• درون حلقه یک پارشیال دیگر ایجاد میکنیم تا اطلاعات و دیزاین هر پست داخل آن قرار گیرد. توجه داشته باشید مقدار Item را با partial خود ارسال میکنیم و هر Item در واقع یک پست است.
• کد های partial view دوم. توجه داشته باششید اطلاعاتی که با عنوان Item ارسال شد، در صفحه partial در قالب یک مدل دریافت میشود.

@model WebApplicationFileManager.Models.Blog
<div class="col">
    <div class="card" style="width: 18rem;">
        <img src="@Model.PostImage" class="card-img-top" alt="@Model.PostTitle">
        <div class="card-body">
            <h5 class="card-title">@Model.PostTitle</h5>
            <div style="overflow-y:hidden; height:180px; line-height:25px" class="card-text">@Html.Raw(Model.PostContent)</div>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>
</div>