[英]How to refresh data without page reloading in Asp.net core MVC using Ajax?
I have data filtering using a checkbox.我使用复选框进行数据过滤。 I want that when I click on the "Submit" button, only the products are updated without reloading the page
我希望当我点击“提交”按钮时,只更新产品而不重新加载页面
Here's the filtering:这是过滤:
<form id="my_form" asp-action="Face" method="get">
<label>Color:</label>
<input type="checkbox" name="color" value="black" /><span>Black</span>
<input type="checkbox" name="color" value="white" /><span>White</span>
<br />
<p></p>
<label>Manufacturer:</label>
<input type="checkbox" name="brand" value="A" /><span>A</span>
<input type="checkbox" name="brand" value="B" /><span>B</span>
<input class="btn btn-info float-right" type="submit" value="Search" />
//Etc
</form>
I need this data to be displayed first.我需要先显示这些数据。 And in the case of passing filters, they were updated depending on what I passed to the controller
在通过过滤器的情况下,它们会根据我传递给 controller 的内容进行更新
<div class="row pr-3 pl-3">
@foreach (var c in Model)
{
<div class="filter col-md-3 p-0 hover-bc-card" data-category="@c.PurposeFor">
<div class="p-3">
<a class="text-decoration-none text-dark" asp-action="Product" asp-controller="Cosmetic" asp-route-id="@c.Id">
<div>
<img class="card-img-top p-4 bg-white" src=@c.Img alt="@c.Name">
</div>
</a>
<div class="card-body">
<h5 class="card-title text-center">@c.Name</h5>
<p class="card-text text-center f-sz-12 ">@c.PurposeFor</p>
<p class="card-text rounded text-center price-for-list">@c.Price ₴</p>
</div>
</div>
</div>
}
</div>
Just in case my controller:以防万一我的 controller:
public IActionResult Face(string[] color, string[] brand, string[] PurposeFor, string sortOrder)
{
ViewBag.color = color;
ViewBag.PurposeFor = PurposeFor;
ViewBag.brand = brand;
ViewBag.NameSortParm = string.IsNullOrEmpty(sortOrder) ? "Name_desc" : "";
ViewBag.PriceSortParm = sortOrder == "Price" ? "Price_desc" : "Price";
var cosmetics = db.Cosmetics.Where(c => c.PurposeFor.Contains("Face")).ToList();
var co_cars = new List<Cosmetic>();
var ma_cars = new List<Cosmetic>();
var purposeFor = new List<Cosmetic>();
if (color.Length != 0)
{
foreach (string co in color)
{
var colorfiltercars = db.Cosmetics.Where(c => c.Color.Contains(co)).ToList();
co_cars.AddRange(colorfiltercars);
}
}
else
{
co_cars = cosmetics;
}
if (PurposeFor.Length != 0)
{
foreach (string pf in PurposeFor)
{
var purposefiltercars = db.Cosmetics.Where(c => c.PurposeFor.Contains(pf)).ToList();
purposeFor.AddRange(purposefiltercars);
}
}
else
{
purposeFor = cosmetics;
}
if (brand.Length != 0)
{
foreach (string ma in brand)
{
var manufacturerfiltercars = db.Cosmetics.Where(c => c.Brand.Contains(ma)).ToList();
ma_cars.AddRange(manufacturerfiltercars);
}
}
else
{
ma_cars = cosmetics;
}
var filtercars = co_cars.Intersect(ma_cars);
filtercars = filtercars.Intersect(purposeFor);
switch (sortOrder)
{
case "Name_desc":
filtercars = filtercars.OrderByDescending(s => s.Name);
break;
case "Price":
filtercars = filtercars.OrderBy(s => s.Price);
break;
case "Price_desc":
filtercars = filtercars.OrderByDescending(s => s.Price);
break;
default:
filtercars = filtercars.OrderBy(s => s.Name);
break;
}
return View(filtercars.ToList());
}
I want that when I click on the "Submit" button, only the products are updated without reloading the page
我希望当我点击“提交”按钮时,只更新产品而不重新加载页面
You can refer to the following code snippet to perform AJAX submission using jQuery Unobtrusive AJAX and dynamically update the target container with returned partial view result.您可以参考以下代码片段使用 jQuery Unobtrusive AJAX 执行 AJAX 提交,并使用返回的部分视图结果动态更新目标容器。
<form id="my_form" asp-action="Face" method="get" data-ajax="true" data-ajax-method="get" data-ajax-update="#panel" data-ajax-mode='replace' data-ajax-url="@Url.Action("GetPartial","Home")">
<label>Color:</label>
<input type="checkbox" name="color" value="black" /><span>Black</span>
<input type="checkbox" name="color" value="white" /><span>White</span>
<br />
<p></p>
<label>Manufacturer:</label>
<input type="checkbox" name="brand" value="A" /><span>A</span>
<input type="checkbox" name="brand" value="B" /><span>B</span>
<input class="btn btn-info float-right" type="submit" value="Search" />
</form>
Add reference to jquery-ajax-unobtrusive添加对 jquery-ajax-unobtrusive 的引用
@section scripts{
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.min.js"></script>
}
Specify id
attribute panel
to div container指定
id
属性panel
到 div 容器
<div class="row pr-3 pl-3" id="panel">
Action method that returns a partial view返回部分视图的操作方法
public IActionResult GetPartial(string[] color, string[] brand, string[] PurposeFor, string sortOrder)
{
//move your query code logic in custom method GetFilterData
var filtercars = GetFilterData(color, brand, PurposeFor, sortOrder);
return PartialView("_CarListPartial", filtercars);
}
Partial view _CarListPartial.cshtml局部视图_CarListPartial.cshtml
@model IEnumerable<WebNaApp.Models.Cosmetic>
@foreach (var c in Model)
{
<div class="filter col-md-3 p-0 hover-bc-card" data-category="@c.PurposeFor">
<div class="p-3">
<a class="text-decoration-none text-dark" asp-action="Product" asp-controller="Cosmetic" asp-route-id="@c.Id">
<div>
<img class="card-img-top p-4 bg-white" src=@c.Img alt="@c.Name">
</div>
</a>
<div class="card-body">
<h5 class="card-title text-center">@c.Name</h5>
<p class="card-text text-center f-sz-12 ">@c.PurposeFor</p>
<p class="card-text rounded text-center price-for-list">@c.Price ₴</p>
</div>
</div>
</div>
}
Test Result测试结果
I suggest you the following step if you want to avoid page reload:如果您想避免页面重新加载,我建议您执行以下步骤:
1- JQuery and Ajax Post to send data to controller 1- JQuery 和 Ajax Post 发送数据到 controller
2- Function in your controller to manage the data and send a response with the data you need 2- Function 在您的 controller 中管理数据并使用您需要的数据发送响应
3- In the success part of your Ajax.clear or.append the HTML part concerned like a div or select option 3-在您的 Ajax.clear 或.append 的成功部分中,HTML 部分与 div 或 Z999329Z482F0416EFE451 等相关的部分有关
here is a little example to guide you, but you have to adapt it corresponding to your need:这是一个指导您的小示例,但您必须根据需要对其进行调整:
In CSHTML: don't forget to add an Id to your checkbox:在 CSHTML 中:不要忘记在您的复选框中添加一个 Id:
<button type="button" onclick="checkMe()">Search</button>
<input type="checkbox" id="Checkbox1" />
<input type="checkbox" id="Checkbox2" />
<script>
function checkMe() {
// here get value of your checkbox1
var Checkbox1state = $('#Checkbox1').prop('checked');
var Checkbox2state = $('#Checkbox2').prop('checked');
// and some logic how you want to filter if there is many parameter
var id =0
if (Checkbox2state) { id=1 } else { id=2 };
$.ajax({
type: "POST",
url: "/Home/AjaxMethodeCheckMe",
data: '{id: "' + id + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (ListOfItems) {
$("#yourDropDown").empty();
$.each(ListOfItems, function (i, item) {
$("#yourDropDown").append('<option value="' + item.Value + '">' + item.Text + '</option>');
});
},
failure: function (response) {
alert("failure");
},
error: function (response) {
alert("error");
},
});
}
</script>
in your controller:在您的 controller 中:
public JsonResult AjaxMethodeCheckMe(int id)
{
List<SelectListItem> ListOfPort = new List<SelectListItem>();
ListOfPort.Add(new SelectListItem() { Text = "Text 1", Value = "Value1" });
ListOfPort.Add(new SelectListItem() { Text = "Text 2", Value = "Value2" });
ListOfPort.Add(new SelectListItem() { Text = "Text 3", Value = "Value3" });
return Json(new SelectList(ListOfPort, "Value", "Text"));
}
Here i show how to do with dropdown but you can modify...在这里,我展示了如何使用下拉菜单,但您可以修改...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.