MVC $. Ajax () +json implements database access and displays data

We often see such an effect when using search engines

In the output input related text will have a corresponding reminder, as an MVC beginner I also made a simple version of the "search tool", share to the beginner of MVC and Ajax Children's shoes (the big God do not spray), but also deepen my understanding of the code

The first part of the Data: Database section, you can build a table, and then add a few data on it, I used to do a test system of my own question sheet

The second part is the code writing part, the MVC model Part I did not use LINQ or EF, but use the Dbhelp class to access the database, so it is easier for beginners to understand, topic for the table class

Backstage code: Dbhelp I'm sure everyone will write, and I'm not going to say much here.

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 Code

Models.dbhelp help =NewModels.dbhelp (); DataTable Table=NewDataTable ();  PublicActionResult Index () {returnView (); } [HttpPost] PublicActionResult 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 =NewList<models.topic>(); foreach(DataRow Iteminchtable. Rows) {models.topic T=NewModels.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); }                /*If you have more than one table it is best to convert the collection to a Jsonresult object*/                //Jsonresult json = new Jsonresult//{                //Data = List//};                returnJson (list); }            Else            {                returnJson ("No"); }                   }

Front Code

@{Layout=NULL;}<! DOCTYPE html>"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 ();//empty tag class capacity                    return; } Else{$.ajax ({type:"Post", URL:"/home/index", data: {Tid: $ ("#text"). Val ()}, datatype:"JSON", Success:function (data) {if(Data = ="No") {                                $("#showDiv"). Text ("Illegal Data"); }                            Else {                                varstrHTML =""; $("#showDiv"). empty (); //parse the obtained JSON using the $.each method//$.each (data, function (I, Que) {//strhtml + = "number" + que["t_id" + "<br/>"; //strhtml + = "Subjects" + que["c_coursename"] + "topics" + 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 + = "Answer:" + que["t_answer" + "<br/>"; //}); //parse the obtained JSON with a for loop                                 for(vari =0, length = Data.length; i < length; i++) {; strHTML+="numbering"+ Data[i]. T_ID +"<br/>"; strHTML+="Subjects"+ Data[i]. C_coursename +"\<br/> topics"+ 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+="Answer:"+ Data[i]. T_answer +"<br/>"; }                                $("#showDiv"). HTML (strhtml);                }                        }                    });    }            })        }); </script> <title>Index</title>"Textdiv"> <input type="text"Id="text"/> </div> <br/> <div id="Showdiv"></div></body>
After the completion of the effect is this, enter the corresponding question number, there will be no refreshing display corresponding test information
Of course, you will say that this effect is far from the effect of the search engine, but when you carefully analyze the principle between the two, you will find that this is a simple search engine effect, anything is from simple to complex, when learning programming, we only understand a section of simple code principle, In order to better understand and manipulate the code in the course of practice.
MVC $. Ajax () +json implements database access and displays data