在Web应用程序中执行常见搜索场景的服务器端方法

最新推荐文章于 2022-06-27 15:03:20 发布

寒冰屋

最新推荐文章于 2022-06-27 15:03:20 发布

阅读量195

点赞数

分类专栏： ASP.NET CORE

原文链接：https://www.codeproject.com/Tips/5303793/Server-Side-Approach-for-Executing-Common-Search-S

版权

mvc .net core

ASP.NET CORE 专栏收录该内容

1136 篇文章 56 订阅

订阅专栏

介绍

应用程序中需要的一个常见场景是针对某个搜索值搜索数据模型。由于http协议的性质（无状态）：

搜索结果的提交将再次呈现页面。
输入的搜索表达式将丢失。

这个问题的一个常见解决方案是使用jquery创建一个异步http请求来重绘将保存搜索结果的部分。

例子

1. 在Visual Studio 2019中创建一个新的ASP.NET MVC Core应用程序，如下所示：

2.在models文件夹下添加一个名为ShopInfoModel的模型，在model中放置如下代码

 public class ShopInfoModel
{

    public int ID { get; set; }


    public string Name { get; set; }


    public string Address { get; set; }


    public int Pincode { get; set; }

}

3.在控制器文件夹中用下面的代码替换Home控制器的代码

 public class HomeController : Controller
    {
        public HomeController()
        {
           
        }

        public IActionResult IndexDisplaySearchWithAjaxRequest()
        {
            return View();
        }
        public IActionResult Index()
        {
            return View(new ShopInfoSearchModel { shops = new List<ShopInfoModel>() });
        }

        [HttpGet]
        public IActionResult Search(string name)
        {
            /*For simplicity this is a dummy list for test*/
            List<ShopInfoModel> shops = new List<ShopInfoModel>
            {
               new ShopInfoModel{Name="Model1",Pincode=1},
               new ShopInfoModel{Name="Model2",Pincode=2},
            };

             shops = shops.Where(w => w.Name.Contains(name)).ToList();

            return Json(shops);
        }

    [HttpPost]
        public IActionResult Search(ShopInfoSearchModel searchModel)
        {
            /*For simplicity this is a dummy list for test*/
            List<ShopInfoModel> shops = new List<ShopInfoModel>
            {
               new ShopInfoModel{Name="Model1",Pincode=1},
               new ShopInfoModel{Name="Model2",Pincode=2},
            }; 
            
            searchModel.shops = shops.Where(w => w.Name.Contains(searchModel.SearchText)).ToList();

            return View("Index", searchModel);
        }
    }

...

4. 在views\home文件夹下添加一个名为IndexDisplaySearchWithAjaxRequest的视图。在视图中放置如下代码如下

@{

    ViewData["Title"] = "Home Page";
}

    <table>
        <tr>
            <td><input type="text" id="txtsearch" /></td>
           
            <td><button type="button" id="btnsearch">Search</button></td>
        </tr>

       
    </table>

@section Scripts
{
<script>
    
        $(document).ready(function () {
            $("#btnsearch").click(function()
             {
                $.ajax({
                    url: '@Url.Action("Search", "Home")',
                    data: { "name": $("#txtsearch").val()},
                    success: function (data)
                    {
                        var table = $("<table />");
                        for (var i = 0; i < data.length; i++) {
                            var row = $('<tr><td>' + data[i].name
                                + '</td><td>' + data[i].address + '</td><td>' + data[i].pincode + '</td></tr>');
                            //--->foreach column we will add a concat operation <---

                            $('table').append(row);
                        }
                    }
                });
                }
                )

        })
</script>
}

...

5.运行应用程序，在地址中的URL中添加Home/IndexDisplaySearchWithAjaxRequest并回车。

现在我们来到文章的核心。本文中的解决方案提出了一种服务器端方法（即，将结果绝对从控制器返回到视图）。这将减少执行以下操作所需的时间：

通过在jquery中创建一个string来创建表行，它包含表行和行单元格
对每个表格单元格重复一次concat操作

如上面第4步所示

添加搜索模型

在模型文件夹下添加一个新模型。将其命名为ShopInfoSearchModel.cs
在类中添加以下代码

//
 public class ShopInfoSearchModel
    {
        //this model is bound to the view containing the search form 
      public List<ShopInfoModel> shops { get; set; }//list of search result reocrds

        public string SearchText { get; set; }
    }
}

...

修改Home控制器

1、在模型文件夹下添加一个新模型。将其命名为ShopInfoSearchModel.cs

将home控制器中index方法的代码替换为以下代码

public IActionResult Index()
{
     return View(new ShopInfoSearchModel { shops = new List<ShopInfoModel>() });
}

...

2、在Home控制器中添加以下方法

 [HttpPost]
    public IActionResult Search(ShopInfoSearchModel searchModel)
    {
        /*For simplicity this is a dummy list for test*/
        List<ShopInfoModel> shops = new List<ShopInfoModel>
        {
           new ShopInfoModel{Name="Model1",Pincode=1},
           new ShopInfoModel{Name="Model2",Pincode=2},
        };

        searchModel.shops = shops.Where(w => w.Name.Contains(searchModel.SearchText)).ToList();

        return View("Index", searchModel);
    }
}
...

修改Home视图

将home/index.cshtm中的代码替换为以下内容

@{
   
    ViewData["Title"] = "Home Page";
}

@using (Html.BeginForm("Search", "Home", FormMethod.Post))
{
    <table>
        <tr>
            <td>@Html.TextBoxFor(f => f.SearchText)</td>
            <td><button type="submit">Search</button></td>
         
        </tr>

        @foreach (var item in Model.shops)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.ID)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Address)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Pincode)
                </td>
              
            </tr>
        }
        </table>


    }

    ...

运行应用程序时，将通过单击搜索按钮执行对模型的搜索，并将给出与ajax请求方法相同的结果

https://www.codeproject.com/Tips/5303793/Server-Side-Approach-for-Executing-Common-Search-S