添加显示分页修改反填MVC

1、控制器

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebMVC2.Controllers
{
public class UserController : Controller
{
// GET: User
public ActionResult Index()
{
return View();
}
public ActionResult AddUser()
{
return View();
}
public ActionResult UptUser(int id)
{
ViewBag.id = id;
return View();
}
}
}

2、添加前台

@{
Layout = null;
}

<meta name="viewport" content="width=device-width" />
<title>AddUser</title>
<script src="~/Scripts/jquery-3.4.1.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script>
    $(function () {
        Bind();
    })
    function Add() {
        var obj = {
            UName: $("#name").val(),
            UAge: $("#age").val(),
            TId: $("#type").val()
        };
        $.ajax({
            url: "http://localhost:5824/api/User/AddUser",
            data: obj,
            type: "post",
            dataType: "json",
            success: function (d) {
                if (d > 0) {
                    alert("提交成功");
                    location.href = "/User/Index";
                }
                else {
                    alert("失败");
                }
            }
        })
    }
    //下拉
    function Bind() {
        $.ajax({
            url: "http://localhost:5824/api/User/BindType",
            type: "get",
            dataType: "json",
            success: function (d) {
                $("#type").empty();
                $(d).each(function () {
                    $("#type").append(
                        "<option value='" + this.TId + "'>" + this.TName + "</option>"
                    );
                })
            }
        })
    }
</script>


<div> 
    <table class="table">
        <tr>
            <td>姓名</td>
            <td>
                <input id="name" type="text" />
            </td>
        </tr>
        <tr>
            <td>类型</td>
            <td>
                <select id="type">
                </select>
            </td>
        </tr>
        <tr>
            <td>年龄</td>
            <td>
                <input id="age" type="text" />
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="button" value="提交" onclick="Add()" />
            </td>
        </tr>
    </table>
</div>

3、显示前台

@{
Layout = null;
}

<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-3.4.1.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script>
    var pageindex = 1;
    var pagesize = 2;
    var pagecount = 1;
    $(function () {
        Show();
    })
    function Show() {
        $.ajax({
            url: "http://localhost:5824/api/User/GetUserInfos?pageindex=" + pageindex + "&&pagesize=" + pagesize,
            type: "get",
            dataType: "json",
            success: function (d) {
                pageindex = d.PageIndex;
                pagesize = d.PageSize;
                pagecount = d.PageCount;
                $("#pcount").text(d.PageCount);
                $("#acount").text(d.AllCount);
                $("#pindex").text(d.PageIndex);
                $("#tb").empty();
                $(d.List2).each(function () {
                    $("#tb").append(
                        "<tr>" +
                        "<td>" + this.UName + "</td>" +
                        "<td>" + this.TName + "</td>" +
                        "<td>" + this.UAge + "</td>" +
                        "<td>" + "<input id='Buttondel' type='button' value='删除' onclick='Del(" + this.UId + ")' />" + "</td>" +
                        "<td>" + "<input id='Buttonupt' type='button' value='修改' onclick='Upt(" + this.UId + ")' />" + "</td>" +
                        "</tr>"
                    );
                })
            }
        })
    }
    //删除
    function Del(id) {
        $.ajax({
            url: "http://localhost:5824/api/User/DelUser?id=" + id,
            type: "post",
            dataType: "json",
            success: function (d) {
                if (d > 0) {
                    alert("成功");
                    Show();
                }
                else {
                    alert("失败");
                }
            }
        })
    }
    function Upt(id) {
        location.href = "/User/UptUser?id=" + id;
    }
    function first() {
        pageindex = 1;
        Show();
    }
    function pre() {
        if (pageindex <= 1) {
            alert("没有上一页了");
        }
        else {
            pageindex--;
            Show();
        }
    }
    function next() {
        if (pageindex >= pagecount) {
            alert("没有下一页了");
        }
        else {
            pageindex++;
            Show();
        }
    }
    function last() {
        pageindex = pagecount;
        Show();
    }
</script>


<div>
    <input id="Buttontiao" type="button" value="跳转添加" onclick="location.href='/User/AddUser'" />
    <table class="table">
        <tr>
            <td>姓名</td>
            <td>类型</td>
            <td>性别</td>
            <td>操作</td>
        </tr>
        <tbody id="tb"></tbody>
    </table>
    <p>共<span id="acount"></span>条数据 当前第<span id="pindex"></span>页 共<span id="pcount"></span>页</p>
    <input id="Buttonfirst" type="button" value="首页" onclick="first()" />
    <input id="Buttonpre" type="button" value="上一页" onclick="pre()" />
    <input id="Buttonnext" type="button" value="下一页" onclick="next()" />
    <input id="Buttonlast" type="button" value="尾页" onclick="last()" />
</div>

4、修改反填前台

@{
Layout = null;
}

<meta name="viewport" content="width=device-width" />
<title>UptUser</title>
<script src="~/Scripts/jquery-3.4.1.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script>
    $(function () {
        Bind();
        Fan();
    })
    function Bind() {
        $.ajax({
            url: "http://localhost:5824/api/User/BindType",
            type: "get",
            dataType: "json",
            success: function (d) {
                $("#type").empty();
                $(d).each(function () {
                    $("#type").append(
                        "<option value='" + this.TId + "'>" + this.TName + "</option>"
                    );
                })
            }
        })
    }
    function Fan() {
        $.ajax({
            url: "http://localhost:5824/api/User/Fan?id=" + $("#Hidden1").val(),
            type: "get",
            dataType: "json",
            success: function (d) {
                $("#name").val(d.UName);
                $("#age").val(d.UAge);
                $("#type").val(d.TId);
            }
        })
    }
    function Upt() {
        var obj = {
            UName: $("#name").val(),
            UAge: $("#age").val(),
            TId: $("#type").val(),
            UId: $("#Hidden1").val()
        };
        $.ajax({
            url: "http://localhost:5824/api/User/UptUser",
            data: obj,
            type: "post",
            dataType: "json",
            success: function (d) {
                if (d > 0) {
                    alert("成功");
                    location.href = "/User/Index";
                }
                else {
                    alert("失败");
                }
            }
        })
    }
</script>


<div>
    <table class="table">
        <tr>
            <td>姓名</td>
            <td>
                <input id="name" type="text" />
                <input id="Hidden1" type="hidden" value="@ViewBag.id" />
            </td>
        </tr>
        <tr>
            <td>类型</td>
            <td>
                <select id="type">
                </select>
            </td>
        </tr>
        <tr>
            <td>年龄</td>
            <td>
                <input id="age" type="text" />
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="button" value="修改" onclick="Upt()" />
            </td>
        </tr>
    </table>
</div>