زمانی که نیاز است محتوای یک 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> }