MVC-Ajax-jquery分页 (服务器返回一个json数据,客户端解析)

前端之家收集整理的这篇文章主要介绍了MVC-Ajax-jquery分页 (服务器返回一个json数据,客户端解析)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

《1》

控制器

<pre class="csharp" name="code">using System;
using System.Collections.Generic;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Script.Serialization;

namespace MvcTest.Controllers
{
    public class TestController : Controller
    {
        salesEntities db = new salesEntities();
        public ActionResult Index()
        {
            //展示数据
            var query3 = (from a in db.T_User
                          select a).OrderBy(r => r.Id).Take(20);
            
            return View(query3); 
        }
		//Ajax请求的数据 (做分页的)
        public JsonResult Paging(int pageIndex) //用户传递一个当前页码过来
        {
            var query = ((from a in db.T_User           //根据当前页来查询数据
                          where a.Id > pageIndex * 5
                          select a).Take(5)).ToList();

            JsonResult json = new JsonResult();
	    json.JsonRequestBehavior = JsonRequestBehavior.AllowGet;  //允许来自客户端的HTTP GET请求
            json.Data = new   
            {
                result = query
            };
            return json;  //返回一个Json数据
		}
		
		
		//--------------------------------------------------------------
		
		//--------------------------------------增
		
		 [HttpGet]                     
        public ActionResult Add()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Add(T_User u)
        {
            db.Entry(u).State = System.Data.EntityState.Added;
            db.SaveChanges();
            return RedirectToAction("Index");
        }
		
		//--------------------------------------删
		
		[HttpGet]                      
        public ActionResult Del(int Id)
        {
            T_User u = db.T_User.SingleOrDefault(r => r.Id == Id);

            return View(u);
        }
        [HttpPost]
        public ActionResult Del(T_User u)
        {
            T_User uu = db.T_User.SingleOrDefault(r => r.Id == u.Id);
            db.Entry(uu).State = System.Data.EntityState.Deleted;
            db.SaveChanges();
            return RedirectToAction("Index");
        }
       
		//--------------------------------------改
		
        public ActionResult Edit(int Id)
        {
            T_User u = db.T_User.SingleOrDefault(r => r.Id == Id);
            return View();
        }
        [HttpPost]
        public ActionResult Edit(T_User u)
        {
            
            db.Entry(u).State = System.Data.EntityState.Modified;
            db.SaveChanges();
            return RedirectToAction("Index");

        }
	}	
}

 

Index视图

@model IEnumerable<MvcTest.T_User>
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <Meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.8.2.js"></script>
</head>
<body>
    @*<div>@RenderPage("~/Views/Test/GGGGG.cshtml")</div>*@
    <table id="t1">
        @*@foreach (var i in Model)
        {
            <tr><td>@i.Id</td><td>@i.UserName</td><td>@i.Password</td><td>@i.Errors</td><td>@i.Session</td><td><a href="/Test/Del/@i.Id">删</a> @Html.ActionLink("添","Add")
                @Html.ActionLink("改","Edit",new { id=@i.Id})</td></tr>
        }*@
    </table> 
</body>
</html>
<script type="text/javascript">
    $(function () {
        $.get("/Test/Paging",{ "pageIndex": 1 },function (data) {
           
            var jsonData = data.result;
            
            $.each(jsonData,function (key,val) {
              
                var strTb = "<tr><td>" + val.Id + "</td><td>" + val.UserName + "</td><td>" + val.Password + "</td><td>" + val.Errors + "</td><td>" + val.Session + "</td></td><td><a href='/Test/Add'>添</a><td><a href=/Test/Del/" + val.Id + ">删</a></td><td><a href=/Test/Edit/" + val.Id + ">改</a></td></tr>";
                $("#t1").append(strTb);
            })
            
        })
    })
</script>
原文链接:https://www.f2er.com/ajax/163483.html

猜你在找的Ajax相关文章