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

目录

介绍

例子

添加搜索模型

修改Home控制器

修改Home视图

介绍

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

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

这个问题的一个常见解决方案是使用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() });
        }

        [HttpGet]
        public IActionResult Search(string name)
        {
            /*For simplicity this is a dummy list for test*/
            List shops = new List
            {
               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 shops = new List
            {
               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";
}

    
        
            
           
            Search
        

       
    

@section Scripts
{

    
        $(document).ready(function () {
            $("#btnsearch").click(function()
             {
                $.ajax({
                    url: '@Url.Action("Search", "Home")',
                    data: { "name": $("#txtsearch").val()},
                    success: function (data)
                    {
                        var table = $("");
                        for (var i = 0; i < data.length; i++) {
                            var row = $('' + data[i].name
                                + '' + data[i].address + '' + data[i].pincode + '');
                            //--->foreach column we will add a concat operation  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))
{
    
        
            @Html.TextBoxFor(f => f.SearchText)
            Search
         
        

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


    }

    ...

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

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