بارگذاری مجدد PartialView در MVC

زمانی که نیاز است محتوای یک PartilaView را با استفاده از Ajax در یک صفحه‌ای بارگذاری مجدد کنیم از روش زیر استفاده میکنیم:

  1. View
    در جایی که مدنظر داریم PartilaView لود شود یک تگ HTML قرار میدهیم
<a class="btn btn-sm btn-primary" onclick="RefreshGallery();"><i class="fa fa-recycle"></i> بازخوانی</a>
<div id="productImages"></div>

در بخشی که برای جاوااسکریپت در نظر گرفته‌ایم کد زیر را قرار میدهیم و صدا کردن آنرا به یک دکمه وصل میکنیم.

function RefreshGallery() {
	$.ajax({
		url: '@Url.Action("ProductImageList", "Ajax")',
		type: 'POST',
		contentType: "application/json; charset=utf-8",
		dataType: "html",
		success: function (result) {
			$("#productImages").html(result);
		}
	});
}

2. Controller
در این بخش، متدی به شکل زیر آماده میکنیم:

        [HttpPost]
        public ActionResult ProductImageList()
        {
            List<BLL.Files.Images_BLL.Images_DATA> _Result = null;
            BLL.Files.Images_BLL imageBLL = new BLL.Files.Images_BLL();
            _Result = imageBLL.GetAllImages();
            return PartialView("~/Views/PartialViews/__Images.cshtml", _Result);
        }

3.PartialView
در این بخش اجزایی که قرار است نمایش داده شود را پیاده‌سازی میکنیم:

@model List<BLL.Files.Images_BLL.Images_DATA>



@if (Model != null)
{
    if (Model.Count == 0)
    {
        <div class="row">
            <div class="col-md-12">
                <div class="alert alert-warning">
                    در حال حاضر فایلی در سرور بارگذاری نشده است!
                </div>
            </div>
        </div>
    }
    else if (Model.Count > 0)
    {
        var itemsList = Model;

        <div class="row">
            @for (int i = 0; i < itemsList.Count; i++)
            {
                <div class="col-md-3 pb-1">
                    <div class="thumbnail">
                        <a href="#" title="@Html.Raw(itemsList[i].UploadName)" onclick="@Html.Raw($"SelectImage({itemsList[i].ID});")">
                            <img src="../upload/@Html.Raw(itemsList[i].TumbnailName)" class="img-thumbnail" id="@Html.Raw($"image_{itemsList[i].ID}")" />
                        </a>
                    </div>
                </div>
            }
        </div>

    }

}
else
{
    <div class="row">
        <div class="col-md-12">
            <div class="alert alert-warning">
                در حال حاضر فایلی در سرور بارگذاری نشده است!
            </div>
        </div>
    </div>
}




دیدگاهتان را بنویسید