MVC returns JSON data through Jsonresult and then loads the partial view in the view page through the @html.partial () method

First, create a new MVC-type Web project:

Then define a student entity under the Model folder:

 Public classStudent { Public intID {Get;Set; }  Public stringName {Get;Set; }  Public stringSex {Get;Set; }  Public intAge {Get;Set; } }

Then create a new student controller:

usingJsondatawithmvc.models;usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingsystem.web;usingSYSTEM.WEB.MVC;namespacejsondatawithmvc.controllers{ Public classStudentcontroller:controller {//get:student         PublicActionResult Index () {returnView (); }        /// <summary>        ///return data to the front end with JSON/// </summary>        /// <returns></returns>         Public jsonresult _studentlist () {List<Student> Stumodel =NewList<student>()            {            NewStudent () {ID=1, Name="Caocao", Age= the, Sex="male"            },            NewStudent () {ID=2, name="Sun Quan", age= -, sex="male"            }            }; returnJson (Stumodel,jsonrequestbehavior.allowget); }    }}

To create the corresponding index view:

 null  ;} <! DOCTYPE html> " viewport   content="  width=device-width  /> <title>index</title> * in view Load partial view in *  @  @Html. Partial (/ Span> "  "  </div></body>

The corresponding _studentlist partial view:

@model ienumerable<jsondatawithmvc.models.student><tableclass="myTable"> <thead> <tr> <th>ID</th> <th>Name</th>            <th>Age</th> <th>Sex</th> </tr> </thead> <tbody> </tbody></table> @* Return data to front end via JSON *@ <script src="~/scripts/jquery-1.10.2.js"></script><script type="Text/javascript">$ (document). Ready (function () {//The foreground uses the Getjson method in jquery to invoke the method in the controller to load the data$.getjson ("/student/_studentlist", function (data) {varTR; //add the data from each row to the table//Note: JS Smart hints are not fully: I < data.length;,,data[i]. Name ....             for(vari =0; i < data.length; i++) {TR= $("<tr/>"); Tr.append ("<td>"+ Data[i].id +"</td>"); Tr.append ("<td>"+ Data[i]. Name +"</td>"); Tr.append ("<td>"+ Data[i]. Age +"</td>"); Tr.append ("<td>"+ Data[i]. Sex +"</td>"); //use CSS to find table, bind data to table$(". MyTable"). Append (tr); }        })                  })</script>

Compile: Modify the route to Student controller, index method, run, we can see the results

Then you will also experience loading the partial view directly in the view. Here I use the jquery load method to do, see my method two:

Add a method to the controller:

  /// <summary>        ///return to partial view/// </summary>        /// <returns></returns>         PublicPartialviewresult _studentlistinfo () {List<Student> Stumodel =NewList<student>()            {            NewStudent () {ID=1, Name="Caocao", Age= the, Sex="male"            },            NewStudent () {ID=2, name="Sun Quan", age= -, sex="male"            }            }; returnPartialview (Stumodel); }

Then add the corresponding view:

@model  ienumerable<jsondatawithmvc.models.student><table>    <thead>        <tr>            <th>ID</th>            <th>Name</th>            <th>Sex</th>            <th>age</ th>        </tr>    </thead>    <tbody>        @foreach (varin  Model)        {            <tr>                <td> @item .id</td>                <td> @item. Name</td>                <td> @item. Sex</td>                <td> @item. age</td>            </tr>        }           </tbody></table>

Next, I load the detail view in the index view with the Load method of jquery:

@{Layout=NULL;}<! DOCTYPE html>"Viewport"Content="Width=device-width"/> <title>Index</title>"mydiv">        @* Method One: Load the partial view in the view *@         @* @Html. Partial ("_studentlist")*@                   </div> <script src="~/scripts/jquery-1.10.2.js"></script> <script type="Text/javascript">//method Two, load the partial view directly with the Load method of jquery$ (document). Ready (function () {//note here that the #mydiv is the CSS selector$("#myDIV"). Load ("/student/_studentlistinfo"). Show (); })    </script></body>
Run the program, and then get the same result:
Summary: This article is mainly to record their work encountered problems, the front-end of the CSS,JS is not familiar with, to consolidate!!!
MVC returns JSON data through Jsonresult and then loads the partial view in the view page through the @html.partial () method