![](/img/trans.png)
[英]How to export data to Excel using ASP.NET MVC 5 without reloading the page?
[英]How to refresh data without page reloading in Asp.net core MVC using Ajax?
我使用復選框進行數據過濾。 我希望當我點擊“提交”按鈕時,只更新產品而不重新加載頁面
這是過濾:
<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>
我需要先顯示這些數據。 在通過過濾器的情況下,它們會根據我傳遞給 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>
以防萬一我的 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());
}
我希望當我點擊“提交”按鈕時,只更新產品而不重新加載頁面
您可以參考以下代碼片段使用 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>
添加對 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>
}
指定id
屬性panel
到 div 容器
<div class="row pr-3 pl-3" id="panel">
返回部分視圖的操作方法
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);
}
局部視圖_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>
}
測試結果
如果您想避免頁面重新加載,我建議您執行以下步驟:
1- JQuery 和 Ajax Post 發送數據到 controller
2- Function 在您的 controller 中管理數據並使用您需要的數據發送響應
3-在您的 Ajax.clear 或.append 的成功部分中,HTML 部分與 div 或 Z999329Z482F0416EFE451 等相關的部分有關
這是一個指導您的小示例,但您必須根據需要對其進行調整:
在 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>
在您的 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"));
}
在這里,我展示了如何使用下拉菜單,但您可以修改...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.