layui表格增删改查与上传图片+Api

API 控制器1 主要用于增删改查已经反填数据查询

using System;

using System.Collections.Generic;

using System.Data.SqlClient;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Web.Http;

using UserInfoAPI.Models;

namespace UserInfoAPI.Controllers

{

    public class UserInfoSController : ApiController

    {

        UserDbContext db = new UserDbContext();

       /// <summary>

       /// 显示 分页

       /// </summary>

       /// <returns></returns>

        public Paging Get(int PageIndex=1 , int PageSize=5)

        {

            SqlParameter[] sp = new SqlParameter[]

            {

                 new SqlParameter("@PageIndex",PageIndex){ DbType=System.Data.DbType.Int32},

                 new SqlParameter("@PageSize",PageSize){ DbType=System.Data.DbType.Int32},

                 new SqlParameter("@TotalCount",System.Data.DbType.Int32){Direction=System.Data.ParameterDirection.Output}

            };

           string sql = "U_FenYe @PageIndex,@PageSize,@TotalCount output";

            Paging paging = new Paging();

            paging.data= db.Database.SqlQuery<UserInfoS>(sql,sp).ToList();

            paging.code = 0;

            paging.msg = "";

            paging.count =Convert.ToInt32(sp[2].Value);

            return paging;

        }

       /// <summary>

       /// 添加

       /// </summary>

       /// <param name="m"></param>

       /// <returns></returns>

        public int Post(UserInfoS m)

        {

            db.UserInfoS.Add(m);

            return db.SaveChanges();

        }

       /// <summary>

       /// 修改

       /// </summary>

       /// <param name="m"></param>

       /// <returns></returns>

        public int PostUpt(UserInfoS m)

        {

            db.Entry<UserInfoS>(m).State = System.Data.Entity.EntityState.Modified;

            return db.SaveChanges();

        }

        /// <summary>

        /// 删除

        /// </summary>

        /// <param name="id"></param>

        /// <returns></returns>

        public int GetResult(int id)

        {

            var user = db.UserInfoS.Find(id);

            db.UserInfoS.Remove(user);

            return db.SaveChanges();

        }

        /// <summary>

        /// 用于修改反填

        /// </summary>

        /// <param name="id"></param>

        /// <returns></returns>

        public UserInfoS GetUserInfo(int id)

        {

            return db.UserInfoS.Find(id);

        }

    }

}

　　Api 控制器2 用于上传图片

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Web;

using System.Web.Http;

namespace UserInfoAPI.Controllers

{

    public class UploadController : ApiController

    {

        public UploadModel Post()

        {

            HttpFileCollection file = HttpContext.Current.Request.Files;

            UploadModel model = new UploadModel()

            {

                code = 0,

                msg = "",

                data = null

            };

            if (file!=null)

            {

                string str = Path.GetExtension(file[0].FileName).ToLower();

                if (str.Equals(".jpg") || str.Equals(".png") || str.Equals(".gif"))

                {

                    string p = "/Imgs/" + Path.GetFileName(file[0].FileName);

                    file[0].SaveAs(HttpContext.Current.Server.MapPath(p));

                    ImgsModel m = new ImgsModel()

                    {

                        msg = "成功",

                        src = p

                    };

                    model.data = m;

                }

            }

            return model;

        }

    }

    public class ImgsModel

    {

        public string msg { get; set; }

        public string src { get; set; }

    }

    public class UploadModel

    {

        public int code { get; set; }

        public string msg { get; set; }

        public ImgsModel data { get; set; }

    }

}

　　Html 显示页面

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

    <link href="~/layui/css/layui.css" rel="stylesheet" />

    <script src="~/Scripts/jquery-3.4.1.js"></script>

</head>

<body>

    <div>

        <button class="layui-btn layui-btn-lg" onclick="Add()">

                添加

        </button>

    </div>

    <div>

        <table id="demo" lay-filter="test"></table>

    </div>

    <script type="text/html" id="toolbarDemo">

        <div class="layui-btn-container">

            <button class="layui-btn layui-btn-sm" lay-event="Upt">修改</button>

            <button class="layui-btn layui-btn-sm" lay-event="Del">删除</button>

        </div>

    </script>

    <script type="text/html" id="TouXiang">

        <div class="layui-btn-container">

            <img style="height:30px;width:30px;border-radius:50%;line-height:150px!important;" src="{{d.UImg}}" />

        </div>

    </script>

    <script src="~/layui/layui.js"></script>

    <script>

        layui.use('table', function () {

            var table = layui.table;

            table.render({

                elem: '#demo',

                height: 312,

                url: "https://localhost:44304/api/userinfos/Get",

                page: true,

                cols:

                    [[

                        { field: 'UName', title: "用户名", sort: true, fixed: 'left' },

                        { field: 'UPwd', title: "密码", sort: true, fixed: 'left' },

                        { field: 'USex', title: "性别", sort: true, fixed: 'left', templet: function (d) { if (d.gender == false) { return '女' } else { return '男' } } },

                        { field: 'UHobby', title: "爱好", sort: true, fixed: 'left' },

                        { field: 'UImg', title: "头像", sort: true, fixed: 'left',templet:'#TouXiang' },

                        { field: 'URemark', title: "描述", sort: true, fixed: 'left' }

                        , { title: "操作", templet: '#toolbarDemo' }

                    ]],

                request:

                {

                    pageName: 'PageIndex',

                    limitName: 'PageSize'

                }

            });

            table.on('tool(test)', function (obj) {

                var data = obj.data; //获取当前行数据

                var layEvent = obj.event; //获取lay-event对应得值

                console.log(data);

                if (layEvent == 'Del') {

                    layer.confirm('真得删除吗？', function (index) {

                        $.ajax({

                            url: 'https://localhost:44304/api/userinfos/GetResult/' + data.Id,

                            success: function (d) {

                                if (d > 0) {

                                    layer.msg('删除成功', { icon: 1 });

                                    obj.del();

                                }

                                else {

                                    alert('失败')

                                }

                            }

                        })

                    })

                }

                if (layEvent == 'Upt') {

//因为用的是MVC所以跳转是控制器/方法 如果是html 直接名字加.html即可

location.href = '/UserInfoS/Upt?Id=' + data.Id; } }) }); function Add() {
//因为用的是MVC所以跳转是控制器/方法 如果是html 直接名字加.html即可

            location.href = '/UserInfoS/Add';

        }

    </script>

</body>

</html>

　　添加页面

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Add</title>

    <link href="~/layui/css/layui.css" rel="stylesheet" />

    <script src="~/Scripts/jquery-3.4.1.js"></script>

</head>

<body>

    <div>

        <form action="/" method="post" class="layui-form">

            <div class="layui-form-item">

                <label class="layui-form-label">头像</label>

                <div class="layui-input-block">

                    <input type="image" name="UImg" id="test2" src="" value="" />

                    <button type="button" class="layui-btn" id="test1">

                        <i class="layui-icon"></i>上传图片

                    </button>

                </div>

            </div>

            <div class="layui-form-item">

                <label class="layui-form-label">用户名</label>

                <div class="layui-input-block">

                    <input type="text" name="UName" required lay-verify="required" placeholder="请输入用户名" class="layui-input" />

                </div>

            </div>

            <div class="layui-form-item">

                <label class="layui-form-label">密码</label>

                <div class="layui-input-block">

                    <input type="password" name="UPwd" required lay-verify="required" placeholder="请输入密码" class="layui-input" />

                </div>

            </div>

            <div class="layui-form-item">

                <label class="layui-form-label">性别</label>

                <div class="layui-input-block">

                    <input type="radio" name="USex" value="男" title="男" checked />

                    <input type="radio" name="USex" value="女" title="女" />

                </div>

            </div>

            <div class="layui-form-item">

                <label class="layui-form-label">爱好</label>

                <div class="layui-input-block">

                    <input type="checkbox" name="UHobby" value="写作" title="写作" checked />

                    <input type="checkbox" name="UHobby" value="阅读" title="阅读" />

                    <input type="checkbox" name="UHobby" value="发呆" title="发呆" />

                </div>

            </div>

            <div class="layui-form-item layui-form-text">

                <label class="layui-form-label">描述</label>

                <div class="layui-input-block">

                    <textarea name="URemark" placeholder="请输入内容" class="layui-textarea"></textarea>

                </div>

            </div>

            <div class="layui-form-item">

                <div class="layui-input-block">

                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>

                </div>

            </div>

        </form>

    </div>

    <script src="~/layui/layui.all.js"></script>

    <script>

        layui.use('upload', function () {

            var upload = layui.upload;

            var uploadInst = upload.render({

                elem: "#test1",

                url: "https://localhost:44304/api/Upload/Post",

                done: function (res)

                {

                    console.log(res);

                    layui.$("#test2").attr('src', 'https://localhost:44304' + res.data.src);

                      layui.$("#test2").attr('value','https://localhost:44304'+ res.data.src);

                    alert('上传成功');

                },

                error: function ()

                {

                }

            })

        })

        layui.use('form',function () {

            var form = layui.form;

            form.on('submit(formDemo)', function (data) {

                console.log(data);

                $.ajax({

                    url: "https://localhost:44304/api/userinfos/Post",

                    data: data.field,

                    type:"Post",

                    success: function () {

                        alert('成功');

//因为用的是MVC所以跳转是控制器/方法 如果是html 直接名字加.html即可

                        location.href = '/UserInfoS/Index';

                    }

                })

                       return false;

            }

                )

        })

    </script>

</body>

</html>

　　修改页面

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Add</title>

    <link href="~/layui/css/layui.css" rel="stylesheet" />

    <script src="~/Scripts/jquery-3.4.1.js"></script>

</head>

<body>

    <div>

        <form action="/" method="post" class="layui-form">

            <div class="layui-form-item">

                <label class="layui-form-label">头像</label>

                <div class="layui-input-block">

                    <input type="image" name="UImg" id="test2" src="" value="" />

                    <button type="button" class="layui-btn" id="test1">

                        <i class="layui-icon"></i>上传图片

                    </button>

                </div>

            </div>

            <div class="layui-form-item">

                <label class="layui-form-label">用户名</label>

                <div class="layui-input-block">

                    <input type="text" id="UName" name="UName" required lay-verify="required" placeholder="请输入用户名" class="layui-input" />

                    <input type="hidden" id="UId" name="Id" value="" />

                </div>

            </div>

            <div class="layui-form-item">

                <label class="layui-form-label">密码</label>

                <div class="layui-input-block">

                    <input type="password" id="UPwd" name="UPwd" required lay-verify="required" placeholder="请输入密码" class="layui-input" />

                </div>

            </div>

            <div class="layui-form-item">

                <label class="layui-form-label">性别</label>

                <div class="layui-input-block">

                    <input type="radio"id="USex" name="USex" value="男" title="男" checked />

                    <input type="radio" name="USex" value="女" title="女" />

                </div>

            </div>

            <div class="layui-form-item">

                <label class="layui-form-label">爱好</label>

                <div class="layui-input-block">

                    <input type="checkbox" name="UHobby" value="写作" title="写作" checked />

                    <input type="checkbox" name="UHobby" value="阅读" title="阅读" />

                    <input type="checkbox" name="UHobby" value="发呆" title="发呆" />

                </div>

            </div>

            <div class="layui-form-item layui-form-text">

                <label class="layui-form-label">描述</label>

                <div class="layui-input-block">

                    <textarea name="URemark" id="URemark" placeholder="请输入内容" class="layui-textarea"></textarea>

                </div>

            </div>

            <div class="layui-form-item">

                <div class="layui-input-block">

                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>

                </div>

            </div>

        </form>

    </div>

    <script src="~/layui/layui.all.js"></script>

    <script>

      var loc = window.location.search;

      var n1 = loc.length;//地址的总长度

      var n2 = loc.indexOf("=");//取得=号的位置

      var id = loc.substr(n2 + 1, n1 - n2);//从=号后面的内容

        $.ajax({

            url: 'https://localhost:44304/api/UserInfoS/GetUserInfo/' + id,

            dataType: "json",

            success: function (d)

            {

                console.log(d);

                $("#UId").val(id);

                $("#UName").val(d.UName);

                $("#UPwd").val(d.UPwd);

                $("#USex").attr('checked', d.USex);

                $("#URemark").val(d.URemark);

            }

        })

        layui.use('upload', function () {

            var upload = layui.upload;

            var uploadInst = upload.render({

                elem: "#test1",

                url: "https://localhost:44304/api/Upload/Post",

                done: function (res) {

                    console.log(res);

                    layui.$("#test2").attr('src', 'https://localhost:44304' + res.data.src);

                    layui.$("#test2").attr('value', 'https://localhost:44304' + res.data.src);

                    alert('上传成功');

                },

                error: function () {

                }

            })

        })

        layui.use('form', function () {

            var form = layui.form;

            form.on('submit(formDemo)', function (data) {

                console.log(data);

                $.ajax({

                    url: "https://localhost:44304/api/userinfos/PostUpt",

                    data: data.field,

                    type: "Post",

                    success: function () {

                        alert('成功');

//因为用的是MVC所以跳转是控制器/方法 如果是html 直接名字加.html即可

                        location.href = '/UserInfoS/Index';

                    }

                })

                return false;

            }

            )

        })

    </script>

</body>

</html>

layui表格增删改查与上传图片+Api的更多相关文章

javascript生成表格增删改查 JavaScript动态改变表格单元格内容动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
asp.net下利用MVC模式实现Extjs表格增删改查
在网上看到有很多人写extjs下的表格控件的增删改查,但是大多数都是直接从后台读取数据,很少有跟数据库进行交互的模式. 今天就来写一个这样的例子.欢迎大家交流指正. 首先简单介绍一下MVC模式,MVC ...
SSM+layui实现增删改查
前端使用layui框架,后端使用Spring+SpringMVC+Mybatis的集合框架,数据库使用MySQL,完成对一张用户表的增删改查操作. 前后端分离开发,即前端的HTML页面通过ajax技术 ...
权限管理系统之LayUI实现页面增删改查和弹出层交互
由于对LayUI框架不太熟悉,昨天抽空看了下LayUI的文档,今天在网上找了使用LayUI进行增删改查相关内容,自己照葫芦画了个瓢,画瓢部分不是很难,主要是下午遇到了一个弹出层的问题耗时比较久. 同一 ...
Vue+Mock.js模拟登录和表格的增删改查
有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼 ...
springboot+layui实现PC端用户的增删改查 & 整合mui实现app端的自动登录和用户的上拉加载 & HBuilder打包app并在手机端下载安装
springboot整合web开发的各个组件在前面已经有详细的介绍,下面是用springboot整合layui实现了基本的增删改查. 同时在学习mui开发app,也就用mui实现了一个简单的自动登录和 ...
salesforce 零基础学习（五十一）使用 Salesforce.com SOAP API 实现用户登录以及简单的增删改查(JAVA访问salesforce)
此篇请参看:https://resources.docs.salesforce.com/202/latest/en-us/sfdc/pdf/salesforce_developer_environme ...
【转载】ASP.NET MVC Web API 学习笔记---联系人增删改查
本章节简单介绍一下使用ASP.NET MVC Web API 做增删改查.目前很多Http服务还是通过REST或者类似RESP的模型来进行数据操作的.下面我们通过创建一个简单的Web API来管理联系 ...
Android 系统API实现数据库的增删改查和SQLite3工具的使用
在<Android SQL语句实现数据库的增删改查>中介绍了使用sql语句来实现数据库的增删改查操作,本文介绍Android 系统API实现数据库的增删改查和SQLite3工具的使用. 系 ...

随机推荐

MySQL保存 emoji 表情（微信昵称表情）
问题分析在微信开发过程中,总是会遇到带有emoji表情昵称的微信用户无法自动登录的问题. 后台代码抛出类似下面的异常信息. java.sql.SQLException: Incorrect stri ...
cesium加载WFS服务(GeoServer发布)
需求: 为了便于前端渲染数据,自定义图层渲染. 思路: 获取地图服务中的要素进行渲染. 工具: GeoServer 2.6.4,cesium, 思路有了就开始找资料写代码,cesium有接口可以加载W ...
如何用visual studio code更好的编写python
目录 1.先决条件 2.Visual Studio Code扩展安装Python 3.Visual Studio Code扩展安装Python for VSCode 4.Visual Studio C ...
cogs 176. [USACO Feb07] 奶牛聚会 dijkstra
176. [USACO Feb07] 奶牛聚会 ★☆ 输入文件:sparty.in 输出文件:sparty.out 简单对比时间限制:3 s 内存限制:16 MB 译: zqzas N ...
从0开发3D引擎（八）：准备“搭建引擎雏形”
大家好,现在开始本系列的第三部分,按照以下几个步骤来搭建引擎雏形: 1.分析引擎的需求 2.实现最小的3D程序 3.从中提炼引擎原型 4.一步一步地对引擎进行改进,使其具备良好的架构 5.实现与架构相 ...
高通量计算框架HTCondor(一)——概述
目录 1. 正文 2. 目录 3. 参考 4. 相关 1. 正文 HTCondor是威斯康星大学麦迪逊分校构建的分布式计算软件和相关技术,用来处理高通量计算(High Throughput Compu ...
umake ide -h
umake ide -husage: umake ide [-h] {netbeans,idea,clion,eclipse,atom,idea-ultimate,ec ...
python3读取excel文档数据
实现场景: 1.读取Excel表数据 2.把数据作为参数传给后面的函数 3.后面的函数循环读取参数执行操作本案例Excel内容为下图,becks为表名先贴代码 import xlrd #读取exc ...
数据结构二维数组-->稀疏数组-->二维数组
稀疏数组基本概念: 稀疏数组应用场景: 当一个数组大部分的元素为"0",或者为同一个值的数组时,可以使用稀疏数组来保存该数组处理方法: 1>记录数组一共有几行几列,有多少不 ...
[ Python入门教程 ] Python中日志记录模块logging使用实例
python中的logging模块用于记录日志.用户可以根据程序实现需要自定义日志输出位置.日志级别以及日志格式. 将日志内容输出到屏幕一个最简单的logging模块使用样例,直接打印显示日志内容到 ...

layui表格增删改查与上传图片+Api

layui表格增删改查与上传图片+Api的更多相关文章

随机推荐

热门专题