asp.net mvc利用 ajax实现输入自动完成

最新推荐文章于 2020-05-30 15:20:07 发布

lycclsltt

最新推荐文章于 2020-05-30 15:20:07 发布

阅读量2.5k

点赞数

分类专栏： ASP.NET MVC 文章标签： asp.net mvc 自动完成

本文链接：https://blog.csdn.net/aspnet_lyc/article/details/11880507

版权

ASP.NET MVC 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

新建一个asp.net mvc3项目AutoComplete.

在shared/_layout.cshtml母版页中导入实现自动完成必须的js库

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css"/>
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
</head>

<body>
    @RenderBody()
</body>
</html>

Model中新建一个Singer类

    public class Singer
    {
        public int SingerId { get; set; }

        public string SingerName { get; set; }
    }

项目----添加ASP.NET文件夹----App_Data

在web.config中添加连接字符串

<connectionStrings>
    <add name="AutoDbEntities" connectionString="Data Source=.\SQLEXPRESS;Initial Catalog=AutoComplete;Persist Security Info=True;User ID=sa;Password=XXX" providerName="System.Data.SqlClient" />
</connectionStrings>

Model中新建一个继承DbContext的类AutoDbEntities.cs

    public class AutoDbEntities : DbContext
    {
        public DbSet<Singer> Singers { get; set; }
    }

Model中新建一个继承 :DropCreateDatabaseIfModelChanges<AutoDbEntities>实现播种数据的类InitData.cs

    public class InitData : DropCreateDatabaseIfModelChanges<AutoDbEntities>
    {
        protected override void Seed(AutoDbEntities context)
        {
            context.Singers.Add(new Singer { SingerName = "周杰伦"});
            context.Singers.Add(new Singer { SingerName = "周笔畅"});
            context.Singers.Add(new Singer { SingerName = "周华健"});

            context.Singers.Add(new Singer { SingerName = "12"});
            context.Singers.Add(new Singer { SingerName = "123"});
            context.Singers.Add(new Singer { SingerName = "1234"});

            base.Seed(context);
        }
    }

修改Global.asax文件，设置播种数据库

        protected void Application_Start()
        {
            System.Data.Entity.Database.SetInitializer(new AutoComplete.Models.InitData()); //若数据库不存在，则初始化数据
            AreaRegistration.RegisterAllAreas();

            RegisterGlobalFilters(GlobalFilters.Filters);
            RegisterRoutes(RouteTable.Routes);
        }

在Controllers中新建一个HomeControlle

添加Index()方法，用于显示视图，

添加QuickSearch()方法，用于实现异步查询，返回JSON数据给视图，在搜索框上显示

    public class HomeController : Controller
    {
        AutoDbEntities db = new AutoDbEntities();

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult QuickSearch(string term)
        {
            var singers = GetSingers(term).Select(a => new { value = a.SingerName });
            return Json(singers, JsonRequestBehavior.AllowGet);
        }

        private List<Singer> GetSingers(string searchString)
        {
            return db.Singers.Where(a => a.SingerName.Contains(searchString)).ToList();
        }

    }

为HomeController的index()方法,添加视图

在index.cshtml视图中添加一个搜索框，并添加data-autocomplete-source属性，在dom的ready事件中对该属性进行处理

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@{
    //在ready事件中对data-autocomplete-source属性的元素进行处理
    <script type="text/javascript">
        $(document).ready(function () {
            $("input[data-autocomplete-source]").each(function () {
                var target = $(this);
                target.autocomplete({ source:
                target.attr("data-autocomplete-source")
                });
            });
        });
    </script>
}

<div>
    @*为搜索框添加一个data-autocomplete-source属性，并设置异步查询数据的控制器和方法*@
    <input type="text" name="q" data-autocomplete-source = "@Url.Action("QuickSearch", "Home")"/>
    <input type="submit" value="搜索"/>
</div>

运行程序，效果如下