我们在使用搜索引擎时经常会看到这样一个效果

在输出输入相关文字时会有与之对应的相关提醒，作为一个MVC初学者我也做了一个简单版的“搜索工具”，分享给初学mvc和ajax的童鞋（各位大神勿喷），也加深我对代码的理解

第一部数据部分：数据库部分，你可以自己建一张表，然后加几条数据就可以了，我在此用的是我自己做的一个测试系统的试题表

第二部 就是代码编写部分了，mvc Model部分我没有运用Linq或EF，而是运用了DBhelp类访问数据库，这样更易于初学者理解，下图Topic为上图的表类

后台代码：DBhelp相信大家都会写，这里我就不多说了

Model：Topic

public class Topic

    {

        public int T_ID { get; set; }

        public string T_Title { get; set; }

        public string T_AnswerA { get; set; }

        public string T_AnswerB { get; set; }

        public string T_AnswerC { get; set; }

        public string T_AnswerD { get; set; }

        public string T_Answer { get; set; }

        public int C_CourseID { get; set; }

        public string C_CourseName { get; set; }

    }

Controllers代码

Models.DBhelp help = new Models.DBhelp();

        DataTable table = new DataTable();

        public ActionResult Index()

        {

            return View();

        }

        [HttpPost]

        public ActionResult Index(int? Tid)

        {

            table = help.getDataTable(string.Format(@"select * from Topic inner join Course

                                                    on Topic.C_CourseID=Course.C_C_CourseID

                                                    where T_ID='{0}'", Tid));

            if (table.Rows.Count > )

            {

                List<Models.Topic> list = new List<Models.Topic>();

                foreach (DataRow item in table.Rows)

                {

                    Models.Topic T = new Models.Topic();

                    T.T_ID = Convert.ToInt32(item["T_ID"]);

                    T.T_Title = item["T_Title"].ToString();

                    T.T_AnswerA = item["T_AnswerA"].ToString();

                    T.T_AnswerB = item["T_AnswerB"].ToString();

                    T.T_AnswerC = item["T_AnswerC"].ToString();

                    T.T_AnswerD = item["T_AnswerD"].ToString();

                    T.T_Answer = item["T_Answer"].ToString();

                    T.C_CourseID = Convert.ToInt32(item["C_CourseID"]);

                    T.C_CourseName = item["C_CourseName"].ToString();

                    list.Add(T);

                }

                /*如果有多张表最好将集合转换为JsonResult对象*/

                //JsonResult json = new JsonResult

                //{

                //    Data = list

                //};

                return Json(list);

            }

            else

            {

                return Json("No");

            }

        }






前台代码




@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <script src="~/Scripts/jquery-1.10.2.js"></script>

    <script src="~/Scripts/jquery.validate-vsdoc.js"></script>

    <script type="text/javascript">

        $(function () {

            $("#text").bind("keyup", function () {

                if ($("#text").val() == "") {

                    $("#showDiv").empty();//清空标记类容

                    return;

                } else {

                    $.ajax({

                        type: "post",

                        url: "/Home/Index",

                        data:

                            {

                                Tid: $("#text").val()

                            },

                        datatype: "json",

                        success: function (data) {

                            if (data == "No") {

                                $("#showDiv").text("非法数据");

                            }

                            else {

                                var strHTML = "";

                                $("#showDiv").empty();

                                //用$.each方法解析获取到的Json

                                //$.each(data, function (i, Que) {

                                //    strHTML += "编号" + Que["T_ID"] + "<br/>";

                                //    strHTML += "科目" + Que["C_CourseName"] + "题目" + Que["T_Title"] + "<br/>";

                                //    strHTML += "A:" + Que["T_AnswerA"] + "<br/>";

                                //    strHTML += "B:" + Que["T_AnswerB"] + "<br/>";

                                //    strHTML += "C:" + Que["T_AnswerC"] + "<br/>";

                                //    strHTML += "D:" + Que["T_AnswerD"] + "<br/>";

                                //    strHTML += "答案：" + Que["T_Answer"] + "<br/>";

                                //});

                                //用for循环解析获取到的Json

                                for (var i = , length = data.length; i < length; i++) {;

                                    strHTML += "编号" + data[i].T_ID + "<br/>";

                                    strHTML += "科目" + data[i].C_CourseName + "\

                                                <br/>题目" + data[i].T_Title + "<br/>";

                                    strHTML += "A:" + data[i].T_AnswerA + "<br/>";

                                    strHTML += "B:" + data[i].T_AnswerB + "<br/>";

                                    strHTML += "C:" + data[i].T_AnswerC + "<br/>";

                                    strHTML += "D:" + data[i].T_AnswerD + "<br/>";

                                    strHTML += "答案：" + data[i].T_Answer + "<br/>";

                                }

                                $("#showDiv").html(strHTML);

                            }

                        }

                    });

                }

            })

        });

    </script>

    <title>Index</title>

</head>

<body>

    <div id="textDiv">

        <input type="text" id="text" />

    </div>

    <br />

    <div id="showDiv"></div>

</body>

</html>




完成后的效果是这样的,输入对应的试题编号，就会无刷新的显示对应试题信息




当然你会说这个效果与搜索引擎的效果相差甚远，但是当你仔细分析两者之间的原理时，你会发现这就是一个简单的搜索引擎效果，任何东西都是由简到复杂的，在学习编程时，我们只有弄懂一段段简单的代码的原理，才能在实践过程中更好的去理解和操作代码
												


											
MVC $.Ajax()+Json实现数据库访问并显示数据的更多相关文章
	

    
								
  1. jquery ajax json简单的分页，模拟数据，没有封装，只显示原理
		
    简单的分页,模拟数据,没有封装,显示原理,大家有兴趣可以自己封装,这里只是个原理过程,真正的分页也差不多是这个原理,只是请求数据不太一样,html部分: <!TOCTYPE HTML> & ...
    
		
    2. 
						
  2. Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图
		
    http://my.oschina.net/xshuai/blog/345117?fromerr=hEXYMdR0 http://www.oschina.net/code/snippet_144464 ...
    
		
    3. 
						
  3. 初探Node-red结合阿里云数据库，定时显示数据
		
    在最近的项目中,隔壁项目组推荐了一个很好的基于node.js开源IOT框架Node-Red,它的优点很明显,使用可视化编程的方式,实现了大部分需要在物联网领域的技术,而且能很好的对接各个云平台,快捷部 ...
    
		
    4. 
						
  4. Oracle DBLink跨数据库访问SQL server数据同步 踩坑实录
		
    项目需求:这里暂且叫A公司吧,A公司有一套人事管理软件,需要与我们公司的软件做人员信息同步,A公司用的是SQL server数据库,我们公司用的Oracle,接口都不会开发(一万句"fuck ...
    
		
    5. 
						
  5. 基于MVC4+EF5.0+Ajax+Json+CSS3的简单注册页面（get&post）
		
    使用mvc4可以很快速的创建页面,但封装的过多,难免会有些性能上的问题.所以基于此,通过使用简单的手写html,加ajax,json来创建一个注册页面,会比较干净,简洁. 本项目的环境是MVC4+EF ...
    
		
    6. 
						
  6. Django+Ajax+Mysql实现数据库数据的展示
		
    最近老师让搞一个系统,仅仅展示一下数据库的数据 在做海底捞时,是交接的师兄的项目,用的语言是java,框架是SSM(Spring.SpringMVC.MyBatis),这次我准备用Python写,前端 ...
    
		
    7. 
						
  7. AJAX && JSON之讲解
		
    Ajax技术的核心是XMLHttpRequest对象(简称XHR),可以通过使用XHR对象获取到服务器的数据,然后再通过DOM将数据插入到页面中呈现.虽然名字中包含XML,但Ajax通讯与数据格式无关 ...
    
		
    8. 
						
  8. Django 之Ajax&Json&CORS&同源策略&Jsonp用法
		
    什么是Json 定义: JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规范)的一个子集 ...
    
		
    9. 
						
  9. jQuery +ajax +json+实现分页
		
    正文 首先我们创建一般处理程序,来读取数据库中内容,得到返回值. 创建文件,GetData.ashx. 我这里是用的存储过程,存储过程会再下面粘出来,至于数据只是实例,你们可根据需求自行读取数据 代码 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Java跨语言调用，使用JNA访问Java外部接口
			
    1. JNA简单介绍 先说JNI(Java Native Interface)吧,有过不同语言间通信经历的一般都知道,它允许Java代码和其他语言(尤其C/C++)写的代码进行交互,只要遵守调用约定即 ...
    
			
    2. 
						
  2. numpy.pad
			
    np.pad()常用与深度学习中的数据预处理,可以将numpy数组按指定的方法填充成指定的形状. np.pad() 对一维数组的填充 import numpy as np arr1D = np.arr ...
    
			
    3. 
						
  3. 在word中优雅地插入代码
			
    PlanetB:带行号 http://www.planetb.ca/syntax-highlight-word   Pygments(推荐):不带行号,多种样式可选 http://pygments.o ...
    
			
    4. 
						
  4. 根据模板导出excel
			
    @RequestMapping(value = "/export", method = RequestMethod.GET) public void exportApprovals ...
    
			
    5. 
						
  5. 安装 wordpress 出现 抱歉，我不能写入wp-config.php文件
			
    本文告诉大家如何安装 wordpress ,在安装过程出现 抱歉,我不能写入wp-config.php文件如何解决 下载 wordpress China 简体中文 - WordPress 安装 在安装 ...
    
			
    6. 
						
  6. win10 uwp unix timestamp 时间戳 转 DateTime
			
    有时候需要把网络的 unix timestamp 转为 C# 的 DateTime ,在 UWP 可以如何转换? 转换函数可以使用下面的代码 private static DateTime UnixT ...
    
			
    7. 
						
  7. CLR 中 线程的 ThreadState 解释
			
    ThreadState   Aborted 线程已停止 AbortedRequested 线程的 Thread.Abort() 方法已被调用,但线程还未停止. Background 线程在后台执行,与 ...
    
			
    8. 
						
  8. Vertica示例数据库安装
			
    1.示例数据库简介: Vertica跟传统数据库一样,自带了示例数据库--VMart示例数据库,是一个多架构数据库.该数据是大型超市(VMart)中可能会用到的数据库,可用来访问产品.客户.员工以及网 ...
    
			
    9. 
						
  9. javascript正则表达式获取控制
			
    正则表达式的元字符是包含特殊含义的字符,他们有一些特殊的功能,可以控制匹配模式的方式,反斜杠后的元字符将失去其特殊含义 单个字符 元字符 匹配情况 . 匹配除换行符外的任意字符 [a-z0-9] 匹配 ...
    
			
    10. 
						
  10. 十九、curator recipes之PathChildrenCache
			
    简介 curator可以监听路径下子节点的变更操作,如创建节点,删除节点 官方文档:http://curator.apache.org/curator-recipes/path-cache.html  ...
    
			
    11.