زمانی که نیاز است محتوای یک PartilaView را با استفاده از Ajax در یک صفحهای بارگذاری مجدد کنیم از روش زیر استفاده میکنیم:
- 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>
}