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工具的使用. 系 ...
随机推荐
- 从 posix_spawn() 函数窥探漏洞逃逸
posix_spawn() 函数是用来在Linux上创建子进程的,头文件是 #include <spawn.h> ,语法如下: #include <spawn.h> int p ...
- 小白学Java：包装类
目录 小白学Java:包装类 包装类的继承关系 创建包装类实例 自动装箱与拆箱 自动装箱 自动拆箱 包装类型的比较 "=="比较 equals比较 自动装箱与拆箱引发的弊端 自动装 ...
- 基于 HTML5 + WebGL 的 3D 风力发电场
前言 风能是一种开发中的洁净能源,它取之不尽.用之不竭.当然,建风力发电场首先应考虑气象条件和社会自然条件.近年来,我国海上和陆上风电发展迅猛.海水.陆地为我们的风力发电提供了很好地质保障.正是 ...
- linux入门系列5--新手必会的linux命令
上一篇文章"linux入门系列4--vi/vim编辑器"我们讨论了在linux下如何快速高效对文本文件进行编辑和管理,本文将进一步学习必须掌握的linux命令,掌握这些命令才能让计 ...
- GDAL集成GEOS
因为要用到缓冲区分析,在使用Buffer的时候提示:ERROR 6: GEOS support not enabled,查了一下资料需要集成GEOS库.因为GDLA默认编译是没有集成GEOS库的. 现 ...
- Spring Boot 入门（十）：集成Redis哨兵模式，实现Mybatis二级缓存
本片文章续<Spring Boot 入门(九):集成Quartz定时任务>.本文主要基于redis实现了mybatis二级缓存.较redis缓存,mybaits自带缓存存在缺点(自行谷歌) ...
- Java 第一次课堂测验
周一下午进行了开学来java第一次课堂测验,在课堂上我只完成了其中一部分,现代码修改如下: 先定义 ScoreInformation 类记录学生信息: /** * 信1805-1 * 胡一鸣 * 20 ...
- Android 平台JS调试技术
1. 测试技术简介 Android平台微信公众号一般以H5的形式开发,测试发现流量一般都通过js进行加密传输,导致无法对越权.SQL注入等风险点进行测试.针对此难点,本手册会介绍包括Android环 ...
- axios全局引用
在vue项目开发中,我们使用axios进行ajax请求,很多人一开始使用axios的方式,会当成vue-resoure的使用方式来用,即在主入口文件引入import VueResource from ...
- excel 转换成pdf 总结
excl 转换成pdf 1.freespire 只能转换前三页 // 使用此组件 只能转换前3页 //需要引用 如下命名空间 //using Spire.Doc; //Document doc = ...