.NETMVC5基于AJAX的无刷新搜索

该步骤不过多累述。

安装 jQuery Unobtrusive Ajax和Microsoft.jQuery.Unobtrusive.Ajax程序包。

安装步骤：右键项目→管理NuGet程序包→浏览，输入 jQuery Unobtrusive Ajax，选择安装。

安装Microsoft.jQuery.Unobtrusive.Ajax，与上述步骤一致。

两程序包如下图

导包成功后会在Scripts文件夹下看到多出 jquery.unobtrusive-ajax.js 和 jquery.unobtrusive-ajax.min.js 这两个文件。

在App_Start文件夹下的BundleConfig.cs文件内的RegisterBundles方法内添加以下语句。

bundles.Add(new ScriptBundle("~/bundles/jqueryajax").Include(        //"~/bundles/jqueryajax"    jqueryajax为另取的别名，可通过别名来引用
                      "~/Scripts/jquery.unobtrusive-ajax*")); 

在View文件夹下的 _Layout.cshtml文件内引用。

_Layout.cshtml文件

   @Scripts.Render("~/bundles/jqueryajax")    //通过别名引用

省略。可参考上一篇文章：

.NETMVC基于Ajax的无刷新分页

同上。

 ShowController.cs代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication5.DAL;
using Webdiyer.WebControls.Mvc;

namespace WebApplication5.Controllers
{
    public class ShowController : Controller
    {
        private DataContext db = new DataContext();    //链接数据库

        public ActionResult Search(String searchString)
        {
            var article = from a in db.Articles select a;
            if (!String.IsNullOrEmpty(searchString))
            {
                article = article.Where(a => a.Title.Contains(searchString)
                                        || a.Author.Contains(searchString));
            }
            if (Request.IsAjaxRequest())    //判断是否为Ajax请求
            {
                //第一个值为分部视图名，第二个值为封装好的数据
                return PartialView("_Search", article.OrderByDescending(a => a.PubDate).ToPagedList(1, 3));
            }
            return View(article);
        }
    }
}

创建视图也可参考：

.NETMVC基于Ajax的无刷新分页

Search的视图Search.cshtml代码如下：

@model IEnumerable

@using Webdiyer.WebControls.Mvc
@{
    ViewBag.Title = "Search";
}

    Search
    @using (Ajax.BeginForm(new AjaxOptions
    {
        HttpMethod = "get",                    //使用get方法请求
        InsertionMode = InsertionMode.Replace, //将过滤的数据覆盖原数据
        UpdateTargetId = "textList"          //覆盖的地方(值为标签ID)
        
    }))
    {
        
        
    }

    @*引用分部视图*@ 
    @Html.Partial("_Search", Model) 

Search的分部视图 _Search.cshtml 代码如下：

@model IEnumerable


@{
    ViewBag.Title = "_Search";
}



    
        @foreach (var item in Model)
        {
            
        }
    

        

            
序号
            

                @Html.DisplayNameFor(model => model.Title)
            
            

                @Html.DisplayNameFor(model => model.PubDate)
            
            

                @Html.DisplayNameFor(model => model.Author)
            
            

                @Html.DisplayNameFor(model => model.Source)
            
        

                

                    @Html.DisplayFor(modelItem => item.Title)
                
                

                    @Html.DisplayFor(modelItem => item.PubDate)
                
                

                    @Html.DisplayFor(modelItem => item.Author)
                
                

                    @Html.DisplayFor(modelItem => item.Source)
                
            

应用程序进入对应Controller中的Search方法即可。

该程序的数据库和我上一篇

.NETMVC基于Ajax的无刷新分页 中使用的是同一数据，参照着做即可。