ajax
سلام دوستان خسته نباشید
من از طریق ajax مقدار دوتاinputرا به سمت بکند فرستادم .وقتی دیباگ می کنم مقدار به درستی سمت کنترلر می رود ودرسرویسم همه چی به درستی انجام می شودولی درآخر هیچ تغییری درصفحه ایجاد نمی شود.ممنون می شم راهنمایی کنید.
<script>
function SetQuantity() {
var quantit = $("#skip-value-lower").val();
var caId = $("#skip-value-upper").val();
$.ajax({
type: "GET",
url: "/Product/Index?price1=" + caId + "&&price2=" + quantit,
//success: function () {
// location.reload();
//}
});
}
</script>
وکدهای مربوط به کنترلر:
public IActionResult Index(CatalogPLPRequestDto catalogPLPRequestDto,int? CatId=null)
}
; var data = getCatalogItemPLPService.Execute(catalogPLPRequestDto, CatId = null)
;return View(data)
{
وکدهای مربوط بهdto
public class CatalogPLPRequestDto
}
;public int pageIndex { get; set; } = 1
; public int pageSize { get; set; } = 24
public int? CatalogTypeId { get; set; }
public int[] brandId { get; set; }
public bool AvailableStock{ get; set; }
public string SearchKey{ get; set; }
;public int? CatId { get; set; } = null
;public string price1 { get; set; } = null
;public string price2 { get; set; } = null
public SortType SortType{ get; set; }
{
این کدها مربوط به کاربری می باشد که می خواهد قیمت کالا را فیلتر کند مثلا دنبال قیمت 1000000تا2000000 محصولی مثل تلفن همراه می باشد ووقتی قیمت را فیلتر می کند باید تلفن همراه هایی که دراین بازه می باشند را نمایش دهد .کدهارا به درستی اجرا می شوند ولی درآخر فیلتر اجرا نمی شود.
فقط نکته ای که وجود دارد این می باشد:
زمانی که مقادیررا به صورت کویری استرینگ در urlبرای بکند می فرستم فیلتر به درستی اجرا می شود.ولی باajax فیلترانجام نمی شود.
وکدهای htmlبه صورت زیر می باشد:
div class="widget shadow-around">
<div class="widget-title">محدوده قیمت</div>
<div class="widget-content">
<div class="filter-price">
<div class="mt-2 mb-2">
<div class="filter-slider">
<div id="slider-non-linear-step" class="price-slider noUi-target noUi-rtl noUi-horizontal">
<div class="noUi-base">
<div class="noUi-connects">
<div class="noUi-connect" style="transform: translate(0%, 0px) scale(1, 1);"></div>
</div>
<div class="noUi-origin" style="transform: translate(0%, 0px); z-index: 5;">
<div class="noUi-handle noUi-handle-lower" data-handle="0" tabindex="0" role="slider" aria-orientation="horizontal" aria-valuemin="0.0" id="MinPrice" aria-valuemax="700000.0" aria-valuenow="0.0" aria-valuetext="0">
<div class="noUi-touch-area"></div>
</div>
</div>
<div class="noUi-origin" style="transform: translate(-1000%, 0px); z-index: 4;">
<div class="noUi-handle noUi-handle-upper" data-handle="1" tabindex="0" role="slider" aria-orientation="horizontal" Id="MaxPrice" aria-valuemin="0.0" aria-valuemax="700000.0" aria-valuenow="700000.0" aria-valuetext="700,000">
<div class="noUi-touch-area"></div>
</div>
</div>
</div>
</div>
</div>
<ul class="filter-range">
<li data-label="از" data-currency=" تومان">
<input type="text" data-value="0" value="0" name="price[min]" data-range="0" class="js-slider-range-from disabled example-val" id="skip-value-lower" disabled="disabled">
@foreach (var queryString in Context.Request.Query.Where(p => p.Key == "price1").ToList())
{
foreach (var item in queryString.Value)
{
<input type="hidden" name="@queryString.Key" value="@item" />
}
}
</li>
<li data-label="تا" data-currency="تومان">
<input type="text" data-value="700000" value="700000" name="price[max]" data-range="700000" class="js-slider-range-to disabled example-val" id="skip-value-upper" disabled="disabled">
@foreach (var queryString in Context.Request.Query.Where(p => p.Key == "price2").ToList())
{
foreach (var item in queryString.Value)
{
<input type="hidden" name="@queryString.Key" value="@item"/>
}
}
</li>
</ul>
</div>
<div class="mt-3 mb-3">
<button onclick="SetQuantity()" type="submit" class="btn btn-primary d-inline-flex align-items-center">
<i class="fad fa-funnel-dollar ml-2"></i>
اعمال محدوده قیمت
</button>
</div>
</div>
</div>
</div>
وکدهای سرویس به صورت زیر می باشد:
public class GetCatalogItemPLPService : IGetCatalogItemPLPService
{
private readonly IDataBaseContext context;
private readonly IUriComposerService uriComposerService;
public GetCatalogItemPLPService(IDataBaseContext context, IUriComposerService uriComposerService)
{
this.context = context;
this.uriComposerService = uriComposerService;
}
public PaginatedItemsDto<CatalogPLPDto> Execute(CatalogPLPRequestDto request, int? CatId)
{
int rowCount = 0;
var query = context.CatalogItems
.Include(p => p.Discounts)
.Include(p => p.CatalogItemImages)
.AsQueryable();
if (CatId != null)
{
query = query.Where(p => p.CatalogTypeId == CatId).AsQueryable();
}
if (request.price1 != null && request.price2 != null)
{
var num = int.Parse(request.price1, NumberStyles.AllowThousands, new CultureInfo("en-au"));
var numb = int.Parse(request.price2, NumberStyles.AllowThousands, new CultureInfo("en-au"));
query = query.Where(p => p.Price < num && p.Price > numb).AsQueryable();
}
if (request.brandId!=null)
{
query = query.Where(p => request.brandId.Any(b => b == p.CatalogBrandId));
}
if(request.CatalogTypeId!=null)
{
query = query.Where(p => p.CatalogTypeId==request.CatalogTypeId);
}
if(!String.IsNullOrEmpty(request.SearchKey))
{
query = query.Where(p => p.Name.Contains(request.SearchKey) || p.Description.Contains(request.SearchKey));
}
if(request.AvailableStock==true)
{
query = query.Where(p => p.AvailableStock > 0);
}
if(request.SortType==SortType.Bestselling)
{
query = query.Include(p => p.OrderItems)
.Include(p => p.Discounts)
.OrderByDescending(p => p.OrderItems.Count());
}
if (request.SortType == SortType.MostPopular)
{
query = query
.Include(p=>p.Discounts)
.Include(p => p.CatalogItemFavourites)
.OrderByDescending(p => p.CatalogItemFavourites.Count());
}
if (request.SortType == SortType.MostVisited)
{
query = query
.OrderByDescending(p => p.VisitCount);
}
if (request.SortType == SortType.newest)
{
query = query
.OrderByDescending(p => p.Id);
}
if (request.SortType == SortType.cheapest)
{
query = query.Include(p => p.Discounts)
.OrderBy(p => p.Price);
}
if (request.SortType == SortType.mostExpensive)
{
query = query.Include(p => p.Discounts)
.OrderByDescending(p => p.Price);
}
var product = query
//.Where(p=>p.AvailableStock>0)
.PagedResult(request.pageIndex,request.pageSize, out rowCount).ToList();
var data=product.Select(p => new CatalogPLPDto
{
Id=p.Id,
Slug=p.Slug,
Name=p.Name,
Price=p.Price,
Image=uriComposerService.ComposeImageUri(p?.CatalogItemImages?.FirstOrDefault()?.Src ?? ""),
Rate=4,
AvailableStock=p.AvailableStock,
OldPrice=p.OldPrice,
PercentDiscount=p.PercentDiscount,
}).ToList();
return new PaginatedItemsDto<CatalogPLPDto>(request.pageIndex,request.pageSize, rowCount, data);
}
}
- 1402/07/16
زمانی که فیلتر ها رو به صورت دستی وارد url میکنید صفحه realod میشه و ui مجدد رندر میشه ولی تو ajax ریلود شدنی وجود نداره و اطلاعات رو باید به صورت دستی و ریل تایم به روز کنیم
توی بیشتر لود ها و سرچ ها با Ajax نمایش اطلاعات هم به صورت دستی انجام میشن
یعنی دیتا به صورت json از بک اند ارسال میشه و سمت js میاد یه المنتی رو تارگت میکنه و دیتارو توش به صورت دستی رندر میکنه
برای مثال سرچ کنید spa with ajax پیاده سازی های زیادی رو میاره
پاسخی برای این باگ ارسال کنید
لطفا کدها را درون قطعه کد ارسال نمایید
برای ارسال پاسخ باید وارد حساب کاربری خود شوید
ورود به حساب کاربری
