我們在使用搜索引擎時經常會看到這樣一個效果
在輸出輸入相關文字時會有與之對應的相關提醒，作為一個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 > 0) { 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 = 0, 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>
完成后的效果是這樣的,輸入對應的試題編號，就會無刷新的顯示對應試題信息
當然你會說這個效果與搜索引擎的效果相差甚遠，但是當你仔細分析兩者之間的原理時，你會發現這就是一個簡單的搜索引擎效果，任何東西都是由簡到復雜的，在學習編程時，我們只有弄懂一段段簡單的代碼的原理，才能在實踐過程中更好的去理解和操作代碼