MVC+jQuery.Ajax异步实现增删改查和分页

下面就详细讲解一下“MVC+jQuery.Ajax异步实现增删改查和分页”的完整攻略。

一、前置知识

在进行这些操作前，需要先了解一些基本的知识，包括：

• MVC架构模式：所谓MVC，即Model (模型)、View(视图)、Controller(控制器)，是一种一种软件架构模式，将一个应用分成三个核心部分：模型（数据）、视图（UI）、控制器（业务逻辑）。
• jQuery.Ajax：这是jQuery的一个简便方法，可以通过异步方式向服务器发送请求，与服务器进行交互获取数据。

二、实现过程

1. 实现增、删、改

1.1 在Controller中实现

在Controller中，可以定义对应的方法，来接收前端页面传过来的数据，进行相应操作后存储到数据库中。例如：

[HttpPost]
public JsonResult Add(User user)
{
    var result = new JsonResult();

    if (user != null)
    {
        try
        {
            _userRepository.Add(user); // 添加用户
            _unitOfWork.Commit(); // 提交更改
            result.Data = new { success = true };
        }
        catch (Exception ex)
        {
            result.Data = new { success = false, errorMessage = ex.Message };
        }
    }

    return result;
}

其中，JsonResult是MVC默认提供的返回JSON对象的方法，User是自定义的用户实体类，_userRepository和_unitOfWork是使用依赖注入的方式注入进来的Repository和UnitOfWork。在这个方法中，我们首先判断前端传递过来的数据是否为空，如果不为空，则将其添加到数据库中。最后，我们根据添加操作是否成功，返回对应的JSON对象。

1.2 在前端页面通过Ajax实现

在前端页面中，我们通过jQuery.Ajax异步方式向后端发送请求，来实现增删改操作。例如：

// 添加用户
$("#addUser").click(function () {
    var user = {
        name: $("#name").val(),
        age: $("#age").val(),
        sex: $("#sex").val()
    };

    $.ajax({
        url: "/Home/Add",
        type: "POST",
        dataType: "json",
        data: user,
        success: function (data) {
            if (data.success) {
                $("#myModal").modal("hide"); // 隐藏模态框
                alert("添加成功");
                location.reload(); // 重新加载页面
            } else {
                alert("添加失败：" + data.errorMessage);
            }
        },
        error: function () {
            alert("添加失败");
        }
    });
});

在这个例子中，我们通过点击一个按钮来触发添加功能，获取输入框中的数据，通过Ajax的方式向后端Controller中的Add方法发送请求。如果请求成功，则显示提示信息，并重新加载页面。如果请求失败，则会显示错误信息。

2. 实现查

2.1 在Controller中实现

在Controller中，我们也可以通过定义对应的方法，来获取数据库中的数据，并返回给前端页面。例如：

[HttpGet]
public ActionResult List(int? pageIndex, int? pageSize)
{
    pageIndex = pageIndex ?? 1;
    pageSize = pageSize ?? 10; // 分页参数默认值

    var userList = _userRepository.GetAll()
        .OrderBy(u => u.Id)
        .Skip((pageIndex.Value - 1) * pageSize.Value)
        .Take(pageSize.Value)
        .ToList(); // 分页查询

    var count = _userRepository.CountAll(); // 获取总数

    var model = new UserModel
    {
        Users = userList,
        PageInfo = new PageInfo
        {
            PageIndex = pageIndex.Value,
            PageSize = pageSize.Value,
            TotalCount = count
        }
    };

    return View(model);
}

在这个方法中，我们首先获取分页参数，然后通过Repository获取到符合条件的数据，最后返回到一个View中。在View中，我们可以通过razor语法渲染出需要的HTML元素。

2.2 在前端页面通过Ajax实现

在前端页面中，我们也可以通过jQuery.Ajax异步方式向后端发送请求，来获取到数据库中的数据。例如：

// 获取用户列表
function getUserList(pageIndex, pageSize) {
    $.ajax({
        url: "/Home/List",
        type: "GET",
        data: { pageIndex: pageIndex, pageSize: pageSize },
        dataType: "html",
        success: function (data) {
            $("#userListContainer").html(data); // 将数据显示到页面中
        },
        error: function () {
            alert("获取数据失败");
        }
    });
}

在这个例子中，我们定义了一个函数getUserList，用于发送请求获取用户列表数据。请求成功后，将数据渲染到指定的HTML元素中。

3. 实现分页

3.1 在Controller中实现

在Controller中，我们可以通过分页参数实现分页效果。例如：

pageIndex = pageIndex ?? 1;
pageSize = pageSize ?? 10; // 分页参数默认值

var userList = _userRepository.GetAll()
    .OrderBy(u => u.Id)
    .Skip((pageIndex.Value - 1) * pageSize.Value)
    .Take(pageSize.Value)
    .ToList(); // 分页查询

var count = _userRepository.CountAll(); // 获取总数

var model = new UserModel
{
    Users = userList,
    PageInfo = new PageInfo
    {
        PageIndex = pageIndex.Value,
        PageSize = pageSize.Value,
        TotalCount = count
    }
};

return View(model);

在这个方法中，我们先获取分页参数的默认值，然后通过分页获取到符合条件的数据。最后，将数据和分页信息放到一个Model中，返回到View中。

3.2 在前端页面通过Ajax实现

在前端页面中，我们可以根据获取到的分页信息，实现分页效果。例如：

// 分页
$(document).on("click", ".pagination a", function (event) {
    event.preventDefault(); // 阻止链接默认跳转

    var pageIndex = $(this).attr("data-pageIndex");
    var pageSize = $("#pageSize").val();

    getUserList(pageIndex, pageSize); // 获取指定页的数据
});

在这个例子中，我们监听一个分页链接点击事件，阻止链接默认跳转，获取分页参数，然后通过Ajax的方式获取指定页的数据并渲染到HTML元素中。

三、总结

通过上述的攻略，我们可以清楚地了解到如何通过MVC+jQuery.Ajax异步方式实现增删改查和分页功能。其中，Controller部分主要负责接收请求并进行处理，前端页面则主要负责发送请求和渲染页面。这样的架构，不仅可以提高系统的可维护性和可扩展性，还可以提升系统的性能和用户体验。