"MVC learning" gives Little White's first MVC study demo

First with VS2012 above vs Create an MVC site, after the creation of the solution view should have these files, my project name here is called Taobao, you can take your own

The highlight is the focus, which is m-v-c, which is now available by default

You can right-click, view the source code, IE is called to view the source file. Will find in the introduction of a lot of JS, including the AJAX request we want to use jquery, and this bootstrap is a good thing to use to layout the Web page, can be used on the PC and mobile phone a set of interfaces, this post we learn

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

...........

<script src= "/scripts/bootstrap.js" ></script>

We open the Controller directory under the HomeController.cs file, HomeController inherit to the controller, and then add their own controllers, do not forget

Using system;using system.collections.generic;using system.linq;using system.web.mvc;namespace Taobao. controllers{public    class Homecontroller:controller    {public        actionresult Index ()        {            return View ();        }            }}

Very simple, the index action directly in the return View (), so that the Views/home directory is displayed under the index.cshtml template file

Well, all this is not what we want, we need our own things, then we start from scratch to build an original

STEP 1: Create a controller, in the Controller folder right click "Add", "Controller", "MVC5 Controller", enter the name, here named demo, come out as follows controller

Using system;using system.collections.generic;using system.linq;using system.web;using System.Web.Mvc;namespace Taobao. controllers{public    class Democontroller:controller    {        ////        GET:/demo/public        ActionResult Index ()        {            return View ();}}        }

STEP 2: Create a View file

You will find that VS has created a folder called demo under Views, we right-click on the folder, add, and then select New item, in order to start from scratch, we select the MVC5 view page (without layout)

　　

@{    Layout = null;} <! DOCTYPE html>
　　
Add the necessary file references in the head, we need to use jquery, adding <script src= "/scripts/jquery-1.10.2.js" ></script>
This time can press F5 run your site, and then navigate to Demo/index, look at our page, a blank is right. (such as my native Http://localhost:35606/Demo/Index, you have to replace the corresponding port number)
STEP 3: Create a database
For convenience, there is no SQL Server database, directly using SQLite, direct use, do not need to go to the deployment. We use the SQLite Expert personal tool (Baidu to download) to create a database called demo, and then create a table called Table1 which has the ID and the title two column, the ID is the integer type marked as the primary key and self-increment
Insert some test data
Insert INTO table1 (title) VALUES (' This is MVC demo ')
Insert INTO table1 (title) select title from table1 (repeated execution several times, there is a lot of data)
Last modified as title, in order to differentiate
Update table1 Set title = Title | | Id
STEP 4: Create a modals, right-click on the Models folder, "Add", "Class", named Table1, can be other names, add ID and title two properties
Using system;using system.collections.generic;using system.linq;using system.web;namespace Taobao. models{public    class Table1    {public        int ID {get; set;}        public string Title {get; set;}}    }
STEP 5: How to create a query in a controller
To access SQLite we need to add System.Data.SQLite.dll references, in Solution View, "references" there right-click, add Reference--Browse Select the System.Data.SQLite.dll file that we downloaded (already included in the uploaded file)
Modify the Web. config in the ConnectionString node to add:
<add name= "sqliteconnection" connectionstring= "Data source=d:\ fast disk \mywork\taobao\taobao\demo.db; version=3; "/>
　　
[HttpGet] PublicJsonresult Querylist (intPageIndex) {List<Models.Table1> LST =NewList<models.table1>(); using(Sqliteconnection conn =NewSqliteconnection (system.configuration.configurationmanager.connectionstrings["sqliteconnection"]. ConnectionString)) {Conn.                Open (); Sqlitecommand cmd=NewSqlitecommand ("SELECT * FROM table1"+ (PageIndex >0?"Limit Ten Offset"+ ((pageindex-1)*Ten)  :""), conn); //sqlitedataadapter da = new Sqlitedataadapter (cmd); //System.Data.DataTable dt = new System.Data.DataTable (); //da. Fill (DT);Sqlitedatareader dr =cmd.                ExecuteReader ();  while(Dr. Read ()) {Taobao. Models.table1 T1=NewModels.table1 () {ID = Dr. GetInt32 (0), Title = Dr. GetString (1) }; Lst.                ADD (t1); } conn.            Close (); }                        returnJson (Lst,jsonrequestbehavior.allowget); }
The part of the note, is to tell you that we do not have to modal (that is, the entity), with a DataTable is also possible, and here is also used in SQLite paged query, our purpose is to click, load 10 rows of records
This action return value is Jsonresult, the purpose is to format the list into JSON, so that the front-end JavaScript control, Jsonresult is actually inherited to ActionResult
STEP 6: Refine front-end queries
The body adds two elements, one is the a tag that triggers the query, and the other is the div that is displayed
　　
<a href= "Javascript:query ()" > Point I load ...</a> <div id= "Listdisplay" >  </div>
　　
Defines a variable pageIndex, initially 0
Defining query Functions
        functionquery () {PageIndex++; $(function() {$.ajax ({URL:"Querylist?pageindex=" +PageIndex, Success:function(data) {if(Data.length > 0) {                            varCon = $ ("#listDisplay");                            Con.empty (); $ (data). each (function() {Con.append ("<div> <span>" + This. ID + "</span> <span>" + This. Title + "</span></div>")                            })                        }                        Else{alert ("No More records!"); }}, Error:function(HX) {alert ("Error:" +hx.responsetext);            }                }); })        }
The $.ajax method here is jquery with Ajax Query method, success is the content returned by the server, we have formatted into JSON
Well, to some of our demo already has the query function, add and modify the function is also very similar, we can extend a bit.
Demo download
"MVC learning" gives Little White's first MVC study demo