ASP.NET MVC5入门2之Ajax实现数据查询
开发环境：VS2013
数据库：SQL Server2008R2
架构：ASP.NET MVC5
开发语言：C#
代码下载链接：http://download.csdn.net/detail/u010312811/9789790
数据库数据：
数据库结构：
数据库数据：
ASP.NET MVC5：
1.创建项目：
新建 “ASP.NET Web应用程序” 项目
选择“MVC”项目，“添加测试单元”作为可选项
项目新建完成，项目的架构如下：
2.新建数据模型
选择：“数据”-->“ADO.NET 实体数据模型”，并为数据连接命名
选择“来自数据库的CodeFirst”
设置数据库的连接，最后一定“测试连接”，成功后再点击“确定”
此处的连接设置不推荐修改名字，默认即可
选择希望访问的数据库
点击“完成”后，项目自动完成创建，默认生成的项目结构如下：
对生成的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.添加图片资源
添加图片资源
3.添加布局页
_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.添加控制器
此时会新建一个名为SinfersController的控制器，并包含有默认的代码：
修改代码如下：
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）
将布局页名称命名为“Index”，对应Controller中的Index方法。
选择之前创建的“_BasicPage.cshtml”布局页
新建成的Index.cshtml中只有一行代码，如下：
@{
Layout = "~/Views/Shared/_BasicPage.cshtml";
}
此时该页面将引用布局页，直接调试，就可以打开Index页面
6.使用Ajax访问数据库
（1）安装Ajax
（2）编写ajax数据访问的分部页，并命名为：_SingersSearch.cshtml
向_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实现数据查询的更多相关文章
- Asp.Net MVC5入门学习系列③
原文:Asp.Net MVC5入门学习系列③ 添加一个视图(View) 接着上篇的入门系列,上面解说添加一个简单Controller(控制器),这里我们简单的在来添加一个View(视图)来展示我们Co ...
- Asp.Net MVC5入门学习系列②
原文:Asp.Net MVC5入门学习系列② 添加一个Controller(控制器) 因为我们用的是Asp.Net MVC,MVC最终还是一套框架,所以我们还是需要遵循它才能玩下去,或者说是更好的利用 ...
- Asp.Net MVC5入门学习系列①
原文:Asp.Net MVC5入门学习系列① 现在直接开始MVC5的学习系列,学习资源来自Micrsoft. 开始使用Asp.Net MVC 5 打开Visual Studio 2013,然后新建一个 ...
- Asp.Net MVC5入门学习系列⑦
原文:Asp.Net MVC5入门学习系列⑦ 接着上篇结尾所说,如果开发中刚才遇到Model需要添加或者减少字段/属性的话,但是刚好你也利用EF的Code frist通过Model生存的数据库,这时改 ...
- Asp.Net MVC5入门学习系列⑤
原文:Asp.Net MVC5入门学习系列⑤ 检查VS生产的编辑方法和编辑窗体 前面我们一步使用强类型,然后创建Controller(控制器)的时候,VS默认已经给我们把CURD都简单的实现了.这篇的 ...
- Asp.Net MVC5入门学习系列⑥
原文:Asp.Net MVC5入门学习系列⑥ 接着上次的篇幅,我们这篇手动来写一个查询的流程代码! 搜索/查询 流程功能的实现 那现在要做搜索(查询)功能我们第一步应该做什么呢!第一次是不是我们应该去 ...
- Asp.Net MVC5入门学习系列④
原文:Asp.Net MVC5入门学习系列④ 添加Model且简单的使用EF 对于EF(EntityFramework)不了解的朋友可以去百度文科或者在园子里搜一些简资源看下,假如和我一样知道EF的概 ...
- ASP.NET MVC5入门1之项目创建
本博文参考ASP.NET MVC5入门指南,下载链接: ASP.NET_MVC5_入门指南 1.创建项目 文件 --> 新建 --> 项目 Visual C# --> Web --& ...
- ASP.NET + MVC5 入门完整教程八 -—-- 一个完整的应用程序（上）
https://blog.csdn.net/qq_21419015/article/details/80509513 SportsStore 1.开始创建Visual Studio 解决方案和项目这里 ...
随机推荐
- Spark源码剖析 - SparkContext的初始化(八)_初始化管理器BlockManager
8.初始化管理器BlockManager 无论是Spark的初始化阶段还是任务提交.执行阶段,始终离不开存储体系.Spark为了避免Hadoop读写磁盘的I/O操作成为性能瓶颈,优先将配置信息.计算结 ...
- Spring 单例模式
恶汉模式:Ehan.java package com.cn.danli; /** * 饿汉式单例模式 */ public class Ehan { private static Ehan eh = n ...
- termios结构体的内容
一.结构体成员 struct termios { tcflag_t c_iflag; tcflag_t c_oflag; tcflag_t c_cflag; tcflag_t c_lflag; cc_ ...
- [译]在vuejs中使用任意js库
原文 全局变量 最naive的办法是通过附加类库到window对象,使之成为全局变量: entry.js window._ = require('lodash'); MyComponent.vue e ...
- 【Django】git建仓上传时遇到的小问题
根据教程 http://tutorial.djangogirls.org/zh/deploy/,在github上建仓上传项目文件. 执行到 git push -u origin master 时,输入 ...
- 【noip 2015】普及组
T1.金币 题目链接 #include<cstdio> #include<algorithm> #include<cstring> using namespace ...
- 【51nod 1100】斜率最大
Description 平面上有N个点,任意2个点确定一条直线,求出所有这些直线中,斜率最大的那条直线所通过的两个点. (点的编号为1-N,如果有多条直线斜率相等,则输出所有结果,按照点的X轴坐标 ...
- CSS面试复习（二）：CSS的使用
一.CSS基础 1.选择器 选择器{ 属性:值: 属性:值 } 作用:用于匹配HTML元素.分类和权重.解析方式和性能.值得关注的选择器 分类: 元素选择器a{} 伪元素选择器::before{} 类 ...
- 合肥学院第二届卓越IT-程序设计大赛E+J
E链接 小飞有nn的魔法纸片(可以变出糖果), 现在有m个人来找小飞玩游戏, 小飞希望用魔法纸片来使朋友们开心,纸片可以被随便裁剪,nn的魔法纸片可以裁剪成任意大小的小魔法纸片,小飞通过pubgoso ...
- Censys
Censys Censys持续监控互联网上所有可访问的服务器和设备,以便您可以实时搜索和分析它们,了解你的网络攻击面,发现新的威胁并评估其全球影响.从互联网领先的扫描仪ZMap的创造者来说,我们的使命 ...