mvc ajax基础,ASP.NET MVC5入门2之Ajax实现数据查询--转载

开发环境：VS2013

数据库：SQL Server2008R2

架构：ASP.NET MVC5

开发语言：C#

数据库数据：

数据库结构：

数据库数据：

ASP.NET MVC5：

1.创建项目：

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

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

项目新建完成，项目的架构如下：

2.新建数据模型

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

选择“来自数据库的CodeFirst”

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

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

选择希望访问的数据库

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

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

1 public partial class SingersDB : DbContext

2 {

3 //public SingersDB()

4 // : base("name=SingersDB")

5 //{

6 //}

7 public virtual DbSet TSingers { get; set; }

8 public virtual DbSet T_Music { get; set; }

9 }

2.添加图片资源

添加图片资源

3.添加布局页

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

1

2

3

4

5

6

@ViewBag.Title

7

8

9

10 @RenderBody()11

12

13

将布局页代码进行修改，修改之后为：

1

2

3

4

5

6

@ViewBag.Title

7 @Styles.Render("~/Content/css") 8 @Styles.Render("~/bundles/modernizr") 9

10

11

12

13

14 龙的音乐

15

16

17

18

注册

19

登录

20

21

22

23

24 @RenderBody()

25

26 @Scripts.Render("~/bundles/jquery")27 @Scripts.Render("~/bundles/bootstrap")28 @RenderSection("scripts", required: false)29

30

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

7~8：引入样式

11~22：导航栏，12~21：导航栏的大小及样式，13~15：添加一行文本，并设置超链接，16：添加一个图片，17~22：添加注册及登录功能

26~28：引入jquery

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

4.添加控制器

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

修改代码如下：

1 public class SingersController : Controller

2 {

3 SingersDB SingerDB = new SingersDB();

4 // GET: Singers

5 public ActionResult Index()

6 {

7 ViewBag.Message = "Index";

8 return View();

9 }

10 }

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

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

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

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

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

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

1 @{

2 Layout = "~/Views/Shared/_BasicPage.cshtml";

3 }

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

6.使用Ajax访问数据库

(1)安装Ajax

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

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

1 @model IEnumerable

2

3

4

5 @foreach (var item in Model)

6 {

7

@item.SingerName

8 }

9

10

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

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

1 @{

2 ViewBag.Title = "Music Home";

3 }

4

5

搜索

6

7 @using (Ajax.BeginForm("ArtistSearch", "Singer",

8 new AjaxOptions

9 {

10 InsertionMode = InsertionMode.Replace,

11 HttpMethod = "GET",

12 OnFailure = "searchFailed",

13 LoadingElementId = "ajax-loader",

14 UpdateTargetId = "searchresults",

15 }))

16 {

17

18

19

20 src="@Url.Content("~/Images/ajax-loader.gif")"

21 style="display:none" />

22 }

23

24

25

26

27 @section Scripts{

28

29 }

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

7：指明调用SingerController类中的ArtistSearch方法

12：指定数据检索失败的方法，一般使用一个jquery方法

13：指定网页加载中显示一个滚动的图片

14：检索结果放置的目标区域

19~22：只有当数据检索过程中才会显示，并且数据检索完毕后图片消失

27~29：ajax的脚本引用

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

1 public ActionResult ArtistSearch(string name)

2 {

3 var singers = GetSingers(name);

4

5 return PartialView("_SingersSearch", singers);

6 }

7

8 private List GetSingers(string name)

9 {

10 return MusicDB.TSinger

11 .Where(a=>a.SingerName.Contains(name))

12 .ToList();

13 }

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

最终效果如图：