asp.net mvc+elementUI 实现增删改查

news2024/11/17 14:50:59

最开始心想着一直都是前端玩这些玩意,个人虽然不是纯前端。好歹做为一个.net全栈开发多年,我就不太想用node去搭建,那么试试吧,总归不是那么几个css和js的文件引用,如果对vue.js不太熟悉,最好先去看看。

那么先开始第一步:

1.搭建环境:VS新建asp.net mvc的网站后,我用VS 自带工具去下载从cdn下载对应的vue.js和elementUI,(也可以去官方下载后引用,或者在线引用)操作如图:

在Scritp文件夹上点击右键,选择添加客户端库,在库里面输入各种js.或者关键字都有提示,大家可以试试,这里不过多的解释了。(如果没提示,下载不了,检查网络问题

 安装好以后是这样的

 libman是一个下载的记录文件,如果不小心把文件删除了的话。打开这个文件 ctrl+ s 一下就可以重新下载回来了

 2.在layout布局文件中加入引用

<link href="~/Scripts/lib/element-ui/theme-chalk/index.css" rel="stylesheet" />
<script src="~/Scripts/lib/vue/vue.js"></script>
<script src="~/Scripts/lib/element-ui/index.js"></script>

//这个引用不是必须的,只是相比 axios 更加喜欢用 ajax 
<script src="~/Scripts/jquery-3.4.1.min.js"></script> 

3,先展示下效果,后面的东西给上代码就可以了

3.1 列表显示 分页,序号,选择,列格式化

 3.2 新增,

 3.3 编辑,赋值到表单,这里其实给表单数据对象赋值就行了

 4,以下是代码

4.1页面部分


@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "用户管理";
}

<body>
    <el-row>
        <div id="app">
            <el-row>
                <el-button type="primary" size="small" icon="el-icon-plus" v-on:click="add">新增</el-button>
                <el-button type="primary" size="small" icon="el-icon-refresh" v-on:click="reload">刷新</el-button>                
            </el-row>
            <template>
                <el-table v-bind:data="tableData" size="mini" style="width: 100%" v-loading="loading"
                          element-loading-text="加载中"
                          element-loading-spinner="el-icon-loading"
                          element-loading-background="rgba(0, 0, 0, 0.8)">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column type="index" width="60" label="序号" align="center">
                        <template scope="scope1">
                            <span>{{scope1.$index + 1}}</span> 
                             @*这里用插槽处理了,序号的问题*@
                        </template>
                    </el-table-column>
                    @*<el-table-column prop="uid" label="主键" width="180"></el-table-column>*@
                    <el-table-column prop="uAccount" label="账号" width="180"></el-table-column>
                    <el-table-column prop="uName" label="姓名" width="180"></el-table-column>
                    <el-table-column prop="uPwd" label="密码"></el-table-column>
                    <el-table-column prop="uSex" label="性别" :formatter="sexf"></el-table-column>
                    <el-table-column prop="uAge" label="年龄"></el-table-column>
                    <el-table-column prop="uSF" label="省份"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="300">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" v-on:click="handleEdit(scope.row)">编辑</el-button>
                            <el-button v-on:click="handleDel(scope.row)" type="danger" size="mini">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <!-- 分页器 -->
            <div class="block" style="margin-top:15px;">
                <el-pagination align='center'
                               v-on:size-change="handleSizeChange"
                               v-on:current-change="handleCurrentChange"
                               v-bind:current-page="currentPage"
                               v-bind:page-sizes="[1,5,10,20]"
                               v-bind:page-size="pageSize"
                               v-bind:total="total"
                               layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
            </div>

            <!-- Form -->
            <el-dialog v-bind:title="FormAttr.title" :visible.sync="FormAttr.dialogFormVisible" :close-on-click-modal="false">
                <el-form v-bind:model="form" :rules="rules" ref="ruleForm" v-bind:label-width="FormAttr.formLabelWidth" size="middle">
                    <el-form-item label="账号" prop="uName">
                        <el-input v-model="form.uName"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="uAccount">
                        <el-input v-model="form.uAccount"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="uPwd">
                        <el-input v-model="form.uPwd" placeholder="请输入密码" autocomplete="off" show-password>
                    </el-form-item>
                    @*<el-form-item label="确认密码" prop="uPwdConfirm">
                        <el-input v-model="form.uPwdConfirm" placeholder="请输入确认密码" autocomplete="off" show-password>
                    </el-form-item>*@
                    <el-form-item label="年龄" prop="uAge">
                        <el-input v-model.number="form.uAge" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="uSex">
                        <el-radio-group v-model="form.uSex">
                            <el-radio label="1">男</el-radio>
                            <el-radio label="0">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="所在省份" prop="uSF">
                        <el-select v-model="form.uSF" placeholder="请选择">
                            <el-option v-for="item in listSF"
                                       :key="item.sID"
                                       :label="item.sName"
                                       :value="item.sID">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" v-on:click="submitForm('ruleForm')">提交</el-button>
                        <el-button v-on:click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>                
            </el-dialog>
        </div>
    </el-row>
</body>

没有用vue3是他的@符合跟asp,net mvc 里面的@符号会产生冲突,所以看到我是用的vue2的语法,跟官方有些不同

 4.2 js的部分


<script>
    var app = new Vue({
        el: '#app', 
        data: {            
            tableData: [], //表格数据
            currentPage: 1, // 当前页码
            total: 80, // 总条数
            pageSize: 5, // 每页的数据条数
            loading: true,
            //初始表单属性对象
            FormAttr: {
                title: "新增用户",
                formLabelWidth: "80px",
                dialogFormVisible: false,
            },
            listSF: [], //省份
            //初始表单对象
            form: {
                uName: '',
                uPwd: '',
                uAccount: '',
                uAge: null,
                uSex: null,
                uSF: null,
                uPwdConfirm: null
            },
            //自定义验证规则 :rules="rules"
            rules: {
                //uName 跟 prop="uName" 对应
                uName: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                uAccount: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
                ],
                uPwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
                ],
                uAge: [
                    { required: true, message: '年龄不能为空', trigger: 'blur' },
                    { type: 'number', message: '年龄必须为数字值' }
                ],
                uSex: [
                    { required: true, message: '性别不能为空', trigger: 'blur' },
                ],
                uSF: [
                    { required: true, message: '省份不能为空', trigger: 'blur' },
                ]
            }

        }, methods: {
            add: function (event) {            
                app.form = {};
                app.FormAttr.dialogFormVisible = true;
               /* app.$refs['ruleForm'].resetFields();*/
                app.FormAttr.title = "新增用户";
            },
            //提交表单 参数 formName 对饮 ref="ruleForm"
            submitForm: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var url = '/SysUsers/add';
                        if (app.FormAttr.title != "新增用户") {
                            url = '/SysUsers/Update';
                        }
                        $.ajax({
                            type: "POST",
                            url: url,
                            data: app.form,
                            dataType: "json",
                            async: true,
                            success: function (result) {
                                if (result.code == 1) {
                                    app.$message({ type: 'success', message: app.FormAttr.title + '成功!' });
                                    loadTable();
                                } else {
                                    app.$message.error("新增失败");
                                }
                            },
                            beforeSend: function () { },
                            error: function () { },
                            complete: function () { }
                        });

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //表单重置
            resetForm: function (formName) {
                this.$refs[formName].resetFields();
            },
            //刷新
            reload: function () {
                loadTable();
            },
            //编辑
            handleEdit(row) {
                /*app.$refs['ruleForm'].resetFields();*/
                app.form = {};
                app.FormAttr.title = '编辑用户';
                row.uSex = row.uSex + "";  //这两个控件把类型给转换了
                row.uSF = parseInt(row.uSF);
                app.form = row;
                app.FormAttr.dialogFormVisible = true;
            },
            //删除
            handleDel(row) {
                //console.log(row);

                this.$confirm('此操作将永久删除!, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var ids = [row.uid];
                    delUser(ids);                   
                }).catch(() => {
                    //this.$message({
                    //    type: 'info',
                    //    message: '已取消删除'
                    //});
                });
            },
            //每页条数改变时触发 选择一页显示多少行
            handleSizeChange(val) {
                //console.log('每页 ' + val + ' 条');
                this.currentPage = 1;
                this.pageSize = val;
                loadTable();
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                //console.log('当前页: ' + val + '');
                this.currentPage = val;
                loadTable();
            },
            //性别格式化
            sexf(row, column) {
                return row.uSex == '1' ? "男"
                    : row.uSex == '0' ? "女"
                        : "无";
            }
        }

    })

    $(function () {
        loadTable();
        loadSF();
    });
    //加载省份信息
    function loadSF() {
        $.ajax({
            type: "get",
            url: '/SF/GetList?r=' + Math.random(),
            dataType: "json",
            async: false,
            success: function (result) {
                if (result.code == 0) {
                    app.listSF = result.data;
                }
            },
            beforeSend: function () {
            },
            error: function () { },
            complete: function () { }
        });
    }
    function loadTable() {
        app.loading = true;
        $.ajax({
            type: "get",
            url: '/SysAdmin/SysUsers/GetList?page=' + app.currentPage + '&limit=' + app.pageSize + '&r=' + Math.random(),
            dataType: "json",
            async: true,
            success: function (result) {
                if (result.code == 0) {
                    if (app.tableData.length > 0) {
                        app.tableData.splice(0, app.tableData.length);
                    }
                    app.tableData = result.data;
                }
                app.loading = false;
                app.total = result.total;

            },
            beforeSend: function () {
            },
            error: function () { },
            complete: function () { }
        });
    }

    function delUser(ids) {
        $.ajax({
            type: "post",
            url: '/SysUsers/Delete',
            dataType: "json",
            data: { "ids": ids },
            async: true,
            success: function (result) {
                if (result.code == 1) {
                    app.$message({ type: 'success', message: '删除成功!' });
                    loadTable();
                } else {
                    app.$message.error("删除失败");
                }
            },
            beforeSend: function () {
            },
            error: function () { },
            complete: function () { }
        });
    }

</script>

看到这里,后面其实又发现了新的问题,在涉及到复杂验证,必须在初始化的data里面构建函数,所以这个写法,还是有些问题,最好还是根据官方的写法去处理

先写到这里,欢迎交流 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/96537.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

智能家居创意DIY之智能触摸面板开关

触摸开关&#xff0c;即通过触摸方式控制的墙壁开关&#xff0c;其感官场景如同我们的触屏手机&#xff0c;只需手指轻轻一点即可达到控制电器的目的&#xff0c;随着人们生活品质的提高&#xff0c;触摸开关将逐渐将换代传统机械按键开关。 触摸开关控制原理 触摸开关我们把…

springboot入门案例

今天写一个springboot入门案例&#xff0c;接下来我将带大家走进springboot第一课的案例。如果有问题&#xff0c;望大家指正。 目录 1. 简介 2. 开发示例 2.1 创建springboot工程 3. 启动类 4. 常用注解 5. springboot配置文件 6. 开发一个controller 1. 简介 Spring …

大一学生WEB前端静态网页——旅游网页设计与实现(15页面)

&#x1f468;‍&#x1f393;学生HTML静态网页基础水平制作&#x1f469;‍&#x1f393;&#xff0c;页面排版干净简洁。使用HTMLCSS页面布局设计,web大学生网页设计作业源码&#xff0c;这是一个不错的旅游网页制作&#xff0c;画面精明&#xff0c;排版整洁&#xff0c;内容…

Git GitHub入门

目录Git1. 安装Git1. 下载Git2. 安装Git2. Git常用命令1. 设置用户签名2. 初始化本体库3. 查看本地库状态4. 添加暂存区5. 提交本地库6. 查看历史记录7. 修改文件8. 版本穿梭3. Git分支操作1. 查看分支2. 创建分支3. 切换分支4. 合并分支GitHub操作1. 创建远程仓库2. 远程仓库操…

【sciter】历经一个月封装的Web组件库使用说明文档

Web 组件库 1、组件库总体架构 2、目录结构及组件库引入 使用时,只需要引入 CSS 样式文件及组件入口文件即可。 3、组件注意事项 1、当组件支持绑定事件时,事件名称命名规则为 Sc + DOM事件名称且首字母大写,即点击事件(click)对应(ScClick) 在 sciter 中,通过原生 D…

0127 排序 Day16

剑指 Offer 45. 把数组排成最小的数 输入一个非负整数数组&#xff0c;把数组里所有数字拼接起来排成一个数&#xff0c;打印能拼接出的所有数字中最小的一个。 示例 1: 输入: [10,2] 输出: "102" 示例 2: 输入: [3,30,34,5,9] 输出: "3033459" class…

浅谈 Flink 窗口

本次只记录最近对于窗口的新认知 关于窗口的详细知识可以参考如下链接: https://blog.csdn.net/mynameisgt/article/details/124223193 窗口的作用是为了在无限流上进行统计计算,数据到来时,则为此条数据开辟窗口。当 Flink 的时间大于等于窗口的结束时间时,触发这个窗口…

线程池的设计与原理解析(四)之---runWorker()方法

在调用start()方法&#xff0c;调用的就是worker的run方法&#xff0c;实际上调用的是runWorker()方法 public void run() {// 这个是核心方法&#xff0c;worker启动后的逻辑从这里进入runWorker(this);}简单的梳理runWorker的流程 如果构造worker的时候&#xff0c;指定了fi…

LinuxOS-IO-动静态库

文章目录AMC的了解动静态库1.理论理解2.如何制作一个库&#xff1f;&#xff1f;了解实验&#xff1a;制作库交给别人使用生成静态库生成文件 删除文件 发布文件使用静态库?生成动态库使用动态库AMC的了解 Access:文件最近被访问的时间。 我们发现实际操作下来&#xff0c;文…

谁在「元宇宙」里卖咖啡?

作者 | 曾响铃 文 | 响铃说 全球首个全场景数实融合的「世界杯元宇宙」音乐盛典&#xff0c;已经落下了帷幕。 在14日与16日举办的两场动感地带世界杯音乐盛典中&#xff0c;既能看到周杰伦、李宇春、G.E.M。邓紫棋、周深等乐坛大咖&#xff0c;又能看到动感地带数智代言人橙…

字节跳动首发485道Java岗面试题(含答案)

就目前国内的面试模式来讲&#xff0c;在面试前积极的准备面试&#xff0c;复习整个 Java 知识体系将变得非常重要&#xff0c;可以很负责任地说一句&#xff0c;复习准备的是否充分&#xff0c;将直接影响你入职的成功率。 但很多小伙伴却苦于没有合适的资料来回顾整个 Java …

docker搭建gitlab 服务器

1、搜索gitlab镜像 # 查找Gitlab镜像 docker search gitlab # 拉取Gitlab镜像 docker pull gitlab/gitlab-ce:latest 2、启动Gitlab容器 docker run \-itd \-p 9000:80 \-p 9022:22 \-v /home/gitlab/etc:/etc/gitlab \-v /home/gitlab/logs:/var/log/gitlab \-v /home/gi…

drupal远程代码执行 (CVE-2018-7600)漏洞学习与复现

文章目录一、漏洞描述二、POC&EXP一、漏洞描述 drupal是一个开源PHP管理系统&#xff0c;架构使用的是php环境mysql数据库的环境配置。在Drupal 6.x&#xff0c;7.x&#xff0c;8.x系列的版本中&#xff0c;均存在远程代码执行漏洞。该漏洞产生的原因在于Drupal对表单渲染…

ADI Blackfin DSP处理器-BF533的开发详解58:DSP控制ADXL345三轴加速度传感器的应用(含源码)

硬件准备 ADSP-EDU-BF533&#xff1a;BF533开发板 AD-HP530ICE&#xff1a;ADI DSP仿真器 软件准备 Visual DSP软件 硬件链接 MEMS三轴加速度传感器 我做了一个三轴加速度传感器的子卡&#xff0c;插在这个板子上&#xff0c;然后写了一些有意思的应用程序。 硬件实现原理…

Nacos2.2版本发布了,我为其贡献了几行代码并适配了PostgreSQL插件

目录 一、背景 二、个人贡献 三、Nacos使用适配的PostgreSQL插件 3.1、插件源码工程项目结构&#xff1a; 3.2、打包加载插件 3.3、修改配置文件为PostgreSQL连接字符串 3.4、导入数据库脚本文件 四、总结 一、背景 Nacos 是 Dynamic Naming and Configuration-Servic…

计算机毕设Python+Vue心灵治愈服务平台(程序+LW+部署)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

C++那些事之高效率开发C++/C

1.神器 目前开发C/C用的比较多的当属Vim、VS code、CLion。 Vim配上插件编写C/C效率高的不少。 VSCode配上自定义配置及快捷键、vim插件效率跟vim旗鼓相当。 CLion因其独特的CMakeLists.txt管理方式及强大的代码补全等功能&#xff0c;编写本地代码绝对好于前两者。 但是对…

什么是数据指标体系?

定义 对当前业务有参考价值的统计数据 作用 监控业务情况 通过拆解指标寻找当前业务问题 评估业务可改进的地方&#xff0c;找出下一步工作的方向 常用数据指标 谁&#xff1a;用户数据 干了什么&#xff1a;行为数据 结果怎样&#xff1a;业务数据 选好数据指标的通用…

大数据学习:学生排序

文章目录一、提出任务二、任务过程&#xff08;一&#xff09;准备数据1、在虚拟机上创建文本文件2、上传文件到HDFS指定目录&#xff08;二&#xff09;实现步骤1、创建Maven项目2、添加相关依赖3、创建日志属性文件4、创建学生实体类5、创建学生映射器类5、创建学生归并器类6…

Python变量类型教程

变量存储在内存中的值。这就意味着在创建变量时会在内存中开辟一个空间。 基于变量的数据类型&#xff0c;解释器会分配指定内存&#xff0c;并决定什么数据可以被存储在内存中。 因此&#xff0c;变量可以指定不同的数据类型&#xff0c;这些变量可以存储整数&#xff0c;小…