如何使用 Ajax 在 Asp.net core MVC 中刷新数据而不重新加载页面？

问题描述

我使用复选框进行数据过滤。我希望当我点击“提交”按钮时，只更新产品而不重新加载页面

这里是过滤：

<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>

我需要先显示这些数据。在传递过滤器的情况下，它们会根据我传递给控制器的内容进行更新

 <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>

以防万一我的控制器：

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());
    }

解决方法

我希望当我点击“提交”按钮时，只更新产品而不重新加载页面

您可以参考以下代码片段perform AJAX submission using jQuery Unobtrusive 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>
}

为 div 容器指定 id 属性 panel

<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 向控制器发送数据

2- 在您的控制器中管理数据并使用您需要的数据发送响应

3- 在 Ajax 的成功部分 .clear 或 .append 相关的 HTML 部分，如 div 或选择选项

这里有一个小例子来指导你，但你必须根据你的需要调整它：

在 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>

在您的控制器中：

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"));
}

这里我展示了如何使用下拉菜单，但您可以修改...

ajax asp.net-core asp.net-mvc c#c#