ASP.NET MVC5入门2之Ajax实现数据查询

开发环境:VS2013

数据库:SQL Server2008R2

架构:ASP.NET MVC5

开发语言:C#

代码下载链接http://download.csdn.net/detail/u010312811/9789790

数据库数据:

数据库结构:

ASP.NET MVC5入门2之Ajax实现数据查询

数据库数据:

ASP.NET MVC5入门2之Ajax实现数据查询

 ASP.NET MVC5:

1.创建项目:

ASP.NET MVC5入门2之Ajax实现数据查询

新建 “ASP.NET Web应用程序” 项目

ASP.NET MVC5入门2之Ajax实现数据查询

选择“MVC”项目,“添加测试单元”作为可选项

ASP.NET MVC5入门2之Ajax实现数据查询

项目新建完成,项目的架构如下:

ASP.NET MVC5入门2之Ajax实现数据查询

2.新建数据模型

ASP.NET MVC5入门2之Ajax实现数据查询

选择:“数据”-->“ADO.NET 实体数据模型”,并为数据连接命名

ASP.NET MVC5入门2之Ajax实现数据查询

选择“来自数据库的CodeFirst

ASP.NET MVC5入门2之Ajax实现数据查询

设置数据库的连接,最后一定“测试连接”,成功后再点击“确定”

ASP.NET MVC5入门2之Ajax实现数据查询

此处的连接设置不推荐修改名字,默认即可

ASP.NET MVC5入门2之Ajax实现数据查询

选择希望访问的数据库

ASP.NET MVC5入门2之Ajax实现数据查询

点击“完成”后,项目自动完成创建,默认生成的项目结构如下:

ASP.NET MVC5入门2之Ajax实现数据查询

对生成的SingersDB文件进行修改,修改后的代码如下:

     public partial class SingersDB : DbContext
     {
         //public SingersDB()
         //    : base("name=SingersDB")
         //{
         //}
         public virtual DbSet<TSinger> TSingers { get; set; }
         public virtual DbSet<T_Music> T_Music { get; set; }
     }

 2.添加图片资源

ASP.NET MVC5入门2之Ajax实现数据查询

添加图片资源

ASP.NET MVC5入门2之Ajax实现数据查询

3.添加布局页

ASP.NET MVC5入门2之Ajax实现数据查询

ASP.NET MVC5入门2之Ajax实现数据查询

_BasicPage页生成以后,会添加一些默认的代码:

 <!DOCTYPE html>

 <html>
 <head>
     <meta name="viewport" content="width=device-width" />
     <title>@ViewBag.Title</title>
 </head>
 <body>
     <div>
         @RenderBody()
     </div>
 </body>
 </html>

将布局页代码进行修改,修改之后为:

 <!DOCTYPE html>

 <html>
 <head>
     <meta name="viewport" content="width=device-width,initial-scale=0.1" />
     <title>@ViewBag.Title</title>
     @Styles.Render("~/Content/css")
     @Styles.Render("~/bundles/modernizr")
 </head>
 <body>
     <nav class="navbar navbar-default navbar-fixed-top">
         <div class="container" style="text-align:left;height:25px">
             <div class="navbar-header">
                 <a href="#" class="navbar-brand">龙的音乐</a>
             </div>
             <img src="~/Images/龙.jpg" style="width:50px;height:30px;top:10px;position:fixed" class="img-rounded" alt="Alternate Text" />
             <ul class="nav navbar-nav navbar-right">
                 <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
                 <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
             </ul>
         </div>
     </nav>
     <div>
         @RenderBody()
     </div>
     @Scripts.Render("~/bundles/jquery")
     @Scripts.Render("~/bundles/bootstrap")
     @RenderSection("scripts", required: false)
 </body>
 </html>

新添加的代码以黄色背景标注:

  • 7~8:引入样式
  • 11~22:导航栏,12~21:导航栏的大小及样式,13~15:添加一行文本,并设置超链接,16:添加一个图片,17~22:添加注册及登录功能
  • 26~28:引入jquery

注:jquery引入一般在body结束之前,所有的标记之后,这样使得页面响应最快

4.添加控制器

ASP.NET MVC5入门2之Ajax实现数据查询

ASP.NET MVC5入门2之Ajax实现数据查询

ASP.NET MVC5入门2之Ajax实现数据查询

此时会新建一个名为SinfersController的控制器,并包含有默认的代码:

ASP.NET MVC5入门2之Ajax实现数据查询

修改代码如下:

     public class SingersController : Controller
     {
         SingersDB SingerDB = new SingersDB();
         // GET: Singers
         public ActionResult Index()
         {
             ViewBag.Message = "Index";
             return View();
         }
     }

如此,则SingersController控制器中的Index方法指向一个名为Index的页面。

5.添加(带有布局的)视图页

Views-->Singers文件夹-->添加-->带有布局的MVC5视图页(Razor)

ASP.NET MVC5入门2之Ajax实现数据查询

将布局页名称命名为“Index”,对应Controller中的Index方法。

ASP.NET MVC5入门2之Ajax实现数据查询

选择之前创建的“_BasicPage.cshtml”布局页

ASP.NET MVC5入门2之Ajax实现数据查询

新建成的Index.cshtml中只有一行代码,如下:

 @{
     Layout = "~/Views/Shared/_BasicPage.cshtml";
 }

此时该页面将引用布局页,直接调试,就可以打开Index页面

ASP.NET MVC5入门2之Ajax实现数据查询

 6.使用Ajax访问数据库

(1)安装Ajax

ASP.NET MVC5入门2之Ajax实现数据查询

(2)编写ajax数据访问的分部页,并命名为:_SingersSearch.cshtml

ASP.NET MVC5入门2之Ajax实现数据查询

向_SingersSearch.cshtml中添加代码如下:

 @model IEnumerable<Singers.Models.TSinger>

 <div id="searchresults">
     <ul>
         @foreach (var item in Model)
         {
             <li>@item.SingerName</li>
         }
     </ul>
 </div>

这段代码的作用是遍历获取的数据,将SingerName以列表的形式显示,注意id为:searchresults

(3)在Index中添加Ajax的访问代码

 @{
     ViewBag.Title = "Music Home";
 }
 <div class="panel panel-default">
     <div class="panel-heading">搜索</div>
     <div class="panel-body">
         @using (Ajax.BeginForm("ArtistSearch", "Singer",
             new AjaxOptions
             {
                 InsertionMode = InsertionMode.Replace,
                 HttpMethod = "GET",
                 OnFailure = "searchFailed",
                 LoadingElementId = "ajax-loader",
                 UpdateTargetId = "searchresults",
             }))
         {
             <input type="text" name="name" />
             <input type="submit" value="search" />
             <img id="ajax-loader"
                  src="@Url.Content("~/Images/ajax-loader.gif")"
                  style="display:none" />
         }
         <div id="searchresults"></div>
     </div>
 </div>

 @section Scripts{
 <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
 }

注意,因为此处使用了Ajax,所以需要在页脚27~29处添加对Ajax的引用,但是不建议在模板页引用,这样会使所有的页面加载Ajax,降低网页的访问速度。

  • 7:指明调用SingerController类中的ArtistSearch方法
  • 12:指定数据检索失败的方法,一般使用一个jquery方法
  • 13:指定网页加载中显示一个滚动的图片
  • 14:检索结果放置的目标区域
  • 19~22:只有当数据检索过程中才会显示,并且数据检索完毕后图片消失
  • 27~29:ajax的脚本引用

(4)在控制器中添加代码

     public ActionResult ArtistSearch(string name)
     {
         var singers = GetSingers(name);

         return PartialView("_SingersSearch", singers);
     }

     private List<TSinger> GetSingers(string name)
     {
         return MusicDB.TSinger
                       .Where(a=>a.SingerName.Contains(name))
                       .ToList();
     }

函数GetSingers用于获取数据库中的Singer名称,ArtistSearch用于指向分部页

最终效果如图

ASP.NET MVC5入门2之Ajax实现数据查询

上一篇:Robot Framework - 建立本地测试环境


下一篇:io模型---非阻塞模型