如何在索引视图上搜索时添加进度指示器

本文关键字：添加 指示器 搜索 索引 视图 | 更新日期: 2023-09-27 18:06:07

我有一个标准的索引控制器动作，包括搜索和排序，这里是简化的控制器动作。

我如何添加一个进度指标时，用户在搜索词的类型和结果需要一段时间才能从数据库中获得?我很困惑，我是否需要使用Jquery或微软ajax等。

我使用MVC 5与实体框架。

    public ActionResult Index(string sortOrder, 
                              string currentFilter, 
                              string searchString, 
                              int? page)
    {
        if (Request.HttpMethod == "GET")
        {
            searchString = currentFilter;
        }
        else
        {
            page = 1;
        }
        ViewBag.CurrentFilter = searchString;
        var invoices = from i in db.Invoices
                       select i;
        invoices = invoices.OrderByDescending(s => s.InvoiceDate);
        int pageSize = 20;
        int pageNumber = (page ?? 1);
        return View(invoices.ToPagedList(pageNumber, pageSize));
    }

如何在索引视图上搜索时添加进度指示器

我将有一个返回PartialViewResult的操作。然后，在视图上，有一个包含部分视图的容器(div或其他)。当您加载索引时，部分将用视图模型中的数据填充。然后，当用户进行搜索时，对返回部分的操作进行ajax调用(使用jQuery或类似的方法)。然后，该操作的结果将替换包含原始结果的容器的内容。在ajax调用之前，您可以使用jQuery显示您选择的进度指示器，并在完成/成功后再次隐藏它。

如果你需要完整的代码示例，请告诉我。

——这是一个基本的例子(不知道任何关于你的代码/设置):

——注意:这只是你可以这样做的许多方法之一:)

我希望这对你有帮助!

创建一个类IndexViewModel，它将成为索引视图的模型。viewModel将包含索引页所需的所有内容—包括发票列表

public class IndexViewModel
{
    // .. 
    public List<Invoice> Invoices { get; set; }
    // .. 
}

创建返回IndexViewModel的索引控制器动作:

[HttpGet]
public ViewResult Index()
{
    var model = new IndexViewModel
    {
        // ..
        // call to private method SearchInvoices with default values
        Invoices = this.SearchInvoices("ASC", string.Empty, string.Empty, 0)
        //..
    };
    return this.View(model);
}

创建另一个用于搜索的控制器动作，它将返回一个局部视图。(这将通过jQuery/AJAX调用

public PartialViewResult Search(string sortOrder, string currentFilter, string searchString, int? page)
{
    var invoices = this.SearchInvoices(sortOrder, currentFilter, searchString, page);
    return this.PartialView("_SearchContent", invoices);
}

下面是searchchinvoices

的实现
private List<Invoice> SearchInvoices(string sortOrder, string currentFilter, string searchString, int? page)
{
    // do your search work here (as you were in your original index action)
    // I would actually have this whole method implemented
    // in a separate service/business layer
    // ..
    var invoices = from i in db.Invoices select i;
    // ..
    return invoices.ToPagedList(pageNumber, pageSize);
}

然后是索引。CSHTML视图看起来像这样:

@model IndexViewModel
<div class="row">
    <div id="searchFieldsRow" class="col-xs-12">
        <!-- code for all of your search fields or whatever -->
    </div>
</div>
<div class="row">
    <div id="myContent" class="col-xs-12">
        <!-- display your invoices here via Partial View -->
        @Html.Partial("_SearchContent", Model.Invoices)
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <button type="button" id="searchButton">Search</button>
    </div>
</div>
<div id="loadingProgressOverlay" class="hidden">
    Loading...
</div>
<script type="text/javascript">
    (function ($) {
        $(document).ready(function () {
            // handle the click event of your search button
            $('#searchButton').click(function () {
                // show your progress indicator
                $('#loadingProgressOverlay').show();
                // assuming you have fields for these values
                var sortOrder = $('#sortOrder').val(),
                    currentFilter = $('#currentFilter').val(),
                    searchString = $('#searchString').val(),
                    page = $('#page').val();
                // make the ajax call to your Search action on your controller
                $.ajax({
                    url: 'ControllerName/Search',
                    data: {
                        sortOrder: sortOrder,
                        currentFilter: currentFilter,
                        searchString: searchString,
                        page: page
                    },
                    type: 'POST', // OR GET, whatever you want here
                    success: function (results) {
                        // upon success:
                        // - set the html of the myContent div to the PartialViewResult output
                        // - hide your progress indicator
                        $('#myContent').html(results);
                        $('#loadingProgressOverlay').hide();
                    },
                    error: function () {
                        // handle errors properly
                    }
                });
            });
        });
    })(jQuery);
</script>

_SearchContent部分视图:

@model List<Invoice>
<table class="table">
    <thead>
        <tr>
            <!-- stuff here -->
        </tr>
    </thead>
    <tbody>
        <!-- display the list of invoices however you like -->
        @Html.DisplayForModel()
    </tbody>
</table>
相关文章：