In MVC5, the partial view is loaded. A common method is mvc5.

In MVC5, the partial view is loaded. A common method is mvc5.

First, create a Web project of the MVC type:

Then define a Student object in the Model Folder:

public class Student    {        public int ID { get; set; }        public string Name { get; set; }        public string Sex { get; set; }        public int Age { get; set; }    }

Create a new Student controller:

Using JsonDataWithMVC. models; using System. collections. generic; using System. linq; using System. web; using System. web. mvc; namespace JsonDataWithMVC. controllers {public class StudentController: Controller {// GET: Student public ActionResult Index () {return View ();} /// <summary> /// return data to the front end using Json /// </summary> /// <returns> </returns> public JsonResult _ StudentList () {List <Student> stuModel = new List <Student> () {new Student () {ID = 1, Name = "Cao", Age = 1500, sex = "male"}, new Student () {ID = 2, Name = "Sun Quan", Age = 2000, Sex = "male" }}; return Json (stuModel, jsonRequestBehavior. allowGet );}}}

Create an Index View:

@ {Layout = null ;}<! DOCTYPE html> 
Corresponding _ StudentList segment View:
@ Model IEnumerable <JsonDataWithMVC. models. student> <table class = "myTable"> <thead> <tr> <th> ID </th> <th> Name </th> <th> Age </th> <th> Sex </th> </tr> </thead> <tbody> </table> @ * return data to the front end through 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 call the method in the Controller and load the data $. getJSON ("/Student/_ StudentList", function (data) {var tr; // Add each row of data to the table. // Note: The Smart prompts in js are incomplete: I <data. length;, data [I]. name .... for (var I = 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>"); // find the table through css and bind the data to the table $ (". myTable "). append (tr) ;}})}) </script>
Compile: change the route to the Student controller, Index method, and run the command. We can see the result.

 
 
Then, the Division view will be loaded directly in the view at work. Here I use jquery's load method to do this. Please refer to Method 2:
Add a method to the Controller:
/// <Summary> /// return to the segment view /// </summary> /// <returns> </returns> public PartialViewResult _ StudentListInfo () {List <Student> stuModel = new List <Student> () {new Student () {ID = 1, Name = "Cao", Age = 1500, sex = "male"}, new Student () {ID = 2, Name = "Sun Quan", Age = 2000, Sex = "male "}}; return PartialView (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 (var item in Model)        {            <tr>                <td>@item.ID</td>                <td>@item.Name</td>                <td>@item.Sex</td>                <td>@item.Age</td>            </tr>        }           </tbody></table>
 
Then, in the Index view, I load the local view using Jquery's load method:
@ {Layout = null ;}<! DOCTYPE html> 
After running the program, the same result is obtained:

 
 
Summary: This article mainly records the problems encountered in your work. The front-end CSS and js are unfamiliar. consolidate them !!!