如何使用Ajax在Asp.net核心MVC中刷新数据而无需重新加载页面? [英] How to refresh data without page reloading in Asp.net core MVC using Ajax?

问题描述

我使用复选框进行了数据过滤.当我点击提交"时，我想要按钮，仅更新产品而无需重新加载页面

以下是过滤条件:

 < form id ="my_form"asp-action =脸部"method ="get"<标签>颜色:</label><输入类型=复选框"；名称=颜色"值=黑色"；/< span>黑色</span><输入类型=复选框"；名称=颜色"值＝白色"./< span>白色</span>< br/>< p></p><标签>制造商:</label><输入类型=复选框"；名称=品牌"值="A"/< span> A</span><输入类型=复选框"；名称=品牌"值="B"；/> spanB//span< input class ="btn btn-info float-right"；type ="submit"value =搜索"/>//ETC</form> 

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

 < div class ="row pr-3 pl-3">@foreach(模型中的var c){< 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 =产品"asp-controller =化妆品".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 =卡体">< h5 class =卡片标题文本中心"> @ c.Name</h5>< p class ="卡片文本文本中心f-sz-12" @ c.PurposeFor</p>< p class =卡片文本舍入的文本中心价目表价格" @@ c.</div></div></div>}</div> 

以防万一我的控制器是

  public IActionResult Face(字符串[]颜色，字符串[]品牌，字符串[] PurposeFor，字符串sortOrder){ViewBag.color =颜色；ViewBag.PurposeFor = PurposeFor;ViewBag.brand =品牌；ViewBag.NameSortParm = string.IsNullOrEmpty(sortOrder)吗?" Name_desc":"；ViewBag.PriceSortParm = sortOrder =="Price"?"Price_desc":价格"；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>();如果(color.Length！= 0){foreach(颜色为字符串co){var colorfiltercars = db.Cosmetics.Where(c => c.Color.Contains(co)).ToList();co_cars.AddRange(colorfiltercars);}}别的{co_cars =化妆品；}如果(PurposeFor.Length！= 0){foreach(PurposeFor中的字符串pf){var Purposefiltercars = db.Cosmetics.Where(c => c.PurposeFor.Contains(pf)).ToList();PurposeFor.AddRange(purposefiltercars);}}别的{目的用于=化妆品；}如果(brand.Length！= 0){foreach(品牌中的字符串ma){var Manufacturerfiltercars = db.Cosmetics.Where(c => c.Brand.Contains(ma)).ToList();ma_cars.AddRange(manufacturerfiltercars);}}别的{ma_cars =化妆品；}var filtercars = co_cars.Intersect(ma_cars);filtercars = filtercars.Intersect(purposeFor);开关(sortOrder){情况"Name_desc":filtercars = filtercars.OrderByDescending(s => s.Name);休息;案例价格":filtercars = filtercars.OrderBy(s => s.Price);休息;案例"Price_desc":filtercars = filtercars.OrderByDescending(s => s.Price);休息;默认:filtercars = filtercars.OrderBy(s => s.Name);休息;}返回View(filtercars.ToList());} 

解决方案

当我点击提交"按钮，仅更新产品而无需重新加载页面

您可以参考以下代码段，以

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

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

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.

<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

@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

<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

@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

这篇关于如何使用Ajax在Asp.net核心MVC中刷新数据而无需重新加载页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！