C#MVC4基础（总）（借助jQueryeasyUI实现登录，显示（分页），查询，删除）

最新推荐文章于 2022-02-17 13:20:38 发布

随心随性随天意

最新推荐文章于 2022-02-17 13:20:38 发布

阅读量320

点赞数

分类专栏： MVC4 文章标签： MVC4中jQueryeasyUI datagrid实现显示分页查询删除

本文链接：https://blog.csdn.net/weixin_44713389/article/details/93380832

版权

MVC4 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

流程

使用建好的数据库进行数据建模，形成模型和相应的类的代码
在母版页中拉入相应的jquery文件和css样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <script src="~/Scripts/jquery.min.js"></script>
    <script src="~/Scripts/jquery.easyui.min.js"></script>
    <script src="~/Scripts/easyui-lang-zh_CN.js"></script>
    <link href="~/Content/themes/icon.css" rel="stylesheet" />
    <link href="~/Content/themes/easyui.css" rel="stylesheet" />
</head>
<body>
    @RenderBody()
</body>
</html>

新建Home控制器在控制器中引用Models文件
在Index方法和Show方法（自己复制粘贴改个名字）中右键新建视图（记得引用母版页）

代码块

HomeController控制器

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using 结业考试案例.Models;

namespace 结业考试案例.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        //在方法外为数据上下文类new一个对象，便于调用
        private static kslEntities db = new kslEntities();
        //第一个视图，拿来放登录部分
        public ActionResult Index()
        {
            return View();
        }
        //登录判断
        public ActionResult Login(string name, string pwd)
        {
            if (db.ksl_ft.Where(n => n.Name.Equals(name) && n.Name.Equals(pwd)).FirstOrDefault() != null)
                return Json(true, JsonRequestBehavior.AllowGet);
            else
                return Json(false, JsonRequestBehavior.AllowGet);
        }
        //第二个视图，拿来放显示部分（登录成功跳转的地方）
        public ActionResult Show()
        {
            return View();
        }
        //显示和查询
        public ActionResult Select(string RName, int page, int rows)
        {
            IQueryable<object> Goods = null;
            //查询
            if (string.IsNullOrWhiteSpace(RName))
                Goods = from g in db.ksl_ft
                        orderby g.Uid
                        select new
                        {
                            g.Uid,
                            g.Name,
                            g.Rank.RName,
                        };   //因为存在主从表关系所以要new一个东西来接受
            else
                Goods = from g in db.ksl_ft
                        orderby g.Uid
                        where g.Name.Contains(RName)
                        select new
                        {
                            g.Uid,
                            g.Name,
                            g.Rank.RName,
                        };
            //分页
            int count = Goods.Count();
           
            if (count > 0)
            {
                if (page <= 1)
                    Goods = Goods.Take(rows);
                else
                    Goods = Goods.Skip((page - 1) * rows).Take(rows);
            }

            var result = new
            {
                total = count,
                rows = (Goods).ToArray()
            };

            return Json(result, JsonRequestBehavior.AllowGet);
        }
        //删除
        public ActionResult Del(List<int> id)   //获得主键的集合
        {   
            foreach (var i in id)
            {
                db.ksl_ft.Remove(db.ksl_ft.Find(i));   //查询出来的同时进行删除
            }
            db.SaveChanges();   //将操作结果保存在数据库
            return Json(true, JsonRequestBehavior.AllowGet);
        }
    }
}

Index视图

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>
<script>
    $(function () {
        $('#dd').dialog({
            title: '登录',
            width: 400,
            height: 200,
            closed: false,
            cache: false,
            modal: true,
            buttons: [{
                text: '登录',
                handler: function () {
                    if ($('#ff').form('validate')) {
                        $.ajax({
                            type: 'post',
                            datatype: 'json',
                            data: $('#ff').serialize(),
                            url: '/Home/Login',
                            success: function (data) {
                                if (data)
                                    window.open('/Home/Show');
                                else
                                    alert('登录失败')
                            }
                        })
                    }
                    else
                        alert('请填写相关信息')
                }
            }]
        });

    })
</script>

<div id="dd">
    <form id="ff">
        <table>
            <tr>
                <td>用户名：</td>
                <td>
                    <input class="easyui-textbox" name="name" data-options="required:true" style="width: 200px"></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td>
                    <input class="easyui-textbox" name="pwd" data-options="required:true" style="width: 200px"></td>
            </tr>
        </table>
    </form>
</div>

Show视图

@{
    ViewBag.Title = "Show";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Show</h2>
<script>

    $(function () {
        $('#btn').click(function () {
            $('#dg').datagrid('reload', { RName: $('#Q').val() })
        })
        $('#dg').datagrid({
            url: '/Home/Select',
            pagination: true,
            columns: [[
                { field: 'Uid', title: '编号', width: 100 },
                { field: 'Name', title: '姓名', width: 100 },
                { field: 'RName', title: '等级', width: 100 },
            ]],
            toolbar: [{
                iconCls: 'icon-edit',
                text: '删除',
                handler: function () {
                    var select = $('#dg').datagrid('getSelections');
                    if (select[0] == null)
                        alert('请选择要删除的行')
                    else
                        if (window.confirm('是否删除所选?')) {
                            var str = select[0].Uid;
                            for (var i = 1; i < select.length; i++) {
                                str += "&"+select[i].Uid;
                            }
                            $.ajax({
                                type: 'post',
                                datatype: 'json',
                                data: {
                                    id:str
                                },
                                url: '/Home/Del',
                                success: function (data) {
                                    if (data) {
                                        alert('删除成功')
                                        $('#dg').datagrid('load')
                                    }
                                    else
                                        alert('删除失败')
                                }
                            })
                        }
                }
            }]
        });

    })
</script>

<input class="easyui-textbox" name="RName" id="Q" data-options="iconCls:'icon-search'" style="width: 300px">
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
<table id="dg"></table>

PS:因为课上完考这个，所以就先敲这个，剩下章节后来有空补上

成品地址：https://download.csdn.net/download/weixin_44713389/11254649

随心随性随天意

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
C#MVC4基础（总）（借助jQueryeasyUI实现登录，显示（分页），查询，删除）

流程使用建好的数据库进行数据建模，形成模型和相应的类的代码在母版页中拉入相应的jquery文件和css样式<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /...
复制链接

扫一扫