html+layui
添加html+layui项目
先引用一个js文件
<form class="layui-form" action=""> <link href="js/layui/css/layui.css" rel="stylesheet" /> <script src="js/jquery-3.3.1.js"></script> <script src="js/layui/layui.js"></script> <div class="layui-form-item"> <label class="layui-form-label">输入框</label> <div class="layui-input-block"> <input id="Rname" type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">文本域</label> <div class="layui-input-block"> <textarea id="Reamk" name="desc" placeholder="请输入内容" class="layui-textarea"></textarea> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" type="button" lay-filter="formDemo" onclick="fun1()">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> <script> //Demo layui.use('form', function () { var form = layui.form; //监听提交 form.on('submit(formDemo)', function (data) { layer.msg(JSON.stringify(data.field)); return false; }); }); function fun1() { $.ajax({ url: 'https://localhost:44398/api/index/PostAdd', type: 'post', data: { NewsName: $("#Rname").val(), Reamk: $("#Reamk").val() }, success: function (d) { ) { alert('添加成功!'); location.href = 'Index.html'; } } }) } </script>
edit
<form class="layui-form" action=""> <link href="js/layui/css/layui.css" rel="stylesheet" /> <script src="js/jquery-3.3.1.js"></script> <script src="js/layui/layui.js"></script> <div class="layui-form-item"> <label class="layui-form-label">输入框</label> <div class="layui-input-block"> <input type="hidden" id="UId" /> <input id="Rname" type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">文本域</label> <div class="layui-input-block"> <textarea id="Reamk" name="desc" placeholder="请输入内容" class="layui-textarea"></textarea> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" type="button" lay-filter="formDemo" onclick="fun1()">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> <script> //Demo layui.use('form', function () { var form = layui.form; //监听提交 form.on('submit(formDemo)', function (data) { layer.msg(JSON.stringify(data.field)); return false; }); }); ]; Fantian(); function Fantian() { $.ajax({ url: 'https://localhost:44398/api/index/FindMo/' + Id, type: 'get', data: {}, dataType:'json', success: function (d) { $("#UId").val(d.Id); $("#Rname").val(d.NewsName), $("#Reamk").val(d.Reamk) } }) } function fun1() { $.ajax({ url: 'https://localhost:44398/api/index/UpdateNews', type: 'post', data: { Id:$("#UId").val(),NewsName: $("#Rname").val(), Reamk: $("#Reamk").val() }, success: function (d) { ) { alert('修改成功!'); location.href = 'Index.html'; } } }) } </script>
index
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="js/layui/css/layui.css" rel="stylesheet" /> <script src="js/jquery-3.3.1.js"></script> <script src="js/layui/layui.js"></script> </head> <body> <a href="Add.html">添加新闻信息</a> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> <table id="demo" lay-filter="test"></table> <script> layui.use('table', function () { var table = layui.table; //第一个实例 var ta = table.render({ elem: '#demo' , height: , url: 'https://localhost:44398/api/index/getnews' //数据接口 , page: true //开启分页 , limit: , cols: [[ //表头 { field: , sort: true, fixed: 'left' } , { field: } , { field: , sort: true } , { , align: 'center', toolbar: '#barDemo' } ]] }); //监听行工具事件 table.on('tool(test)', function (obj) { //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值" var data = obj.data //获得当前行数据 , layEvent = obj.event; //获得 lay-event 对应的值 if (layEvent === 'detail') { layer.msg('查看操作'); } else if (layEvent === 'del') { layer.confirm('真的删除行么', function (index) { layer.close(index); //向服务端发送删除指令 $.ajax({ url: 'https://localhost:44398/api/index/RomveNews?Id=' + data.Id, type: 'post', success: function (d) { ) { alert('删除成功!'); ta.reload(); } } }) }); } else if (layEvent === 'edit') { location.href = 'Edit.html?Id=' + data.Id; } }); }); </script> </body> </html>
新建一个文件
IndexController
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http; using WebApplication1.Models; using System.Data.SqlClient; namespace WebApplication1.Controllers { public class IndexController : ApiController { Dbtext db = new Dbtext(); public int PostAdd(NewInfo model) { //db.NewInfo.Add(model); //return db.SaveChanges(); //设置参数 SqlParameter[] sqlParameters = new SqlParameter[] { new SqlParameter{ ParameterName="NewsName", SqlDbType=System.Data.SqlDbType.VarChar, SqlValue=model.NewsName }, new SqlParameter{ ParameterName="Reamk", SqlDbType=System.Data.SqlDbType.VarChar, SqlValue=model.Reamk }, }; return db.Database.ExecuteSqlCommand("InsertProc @NewsName,@Reamk", sqlParameters); } public ReturnModel GetNews(int page,int limit) { SqlParameter[] sqlParameters = new SqlParameter[] { new SqlParameter{ ParameterName="pageIndex", SqlDbType=System.Data.SqlDbType.Int,SqlValue=page}, new SqlParameter{ ParameterName="pageSize", SqlDbType=System.Data.SqlDbType.Int,SqlValue=limit}, new SqlParameter{ ParameterName="TotalCount", SqlValue=System.Data.SqlDbType.Int,Direction=System.Data.ParameterDirection.Output } }; List<NewInfo> list = db.Database.SqlQuery<NewInfo>("layUiPage @pageIndex,@pageSize,@TotalCount", sqlParameters).Cast<NewInfo>().ToList(); ReturnModel model = new ReturnModel(); model.code = ; model.msg = "成功!"; model.count =; model.data = list; return model; } public int RomveNews(int Id) { NewInfo news = db.NewInfo.Find(Id); db.NewInfo.Remove(news); return db.SaveChanges(); } [HttpGet] public NewInfo FindMo(int Id) { NewInfo news = db.NewInfo.Find(Id); return news; } public int UpdateNews(NewInfo model) { db.Entry<NewInfo>(model).State = System.Data.Entity.EntityState.Modified; return db.SaveChanges(); } } }
models
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace WebApplication1.Models { public class ReturnModel { public int code { get; set; } public string msg { get; set; } public int count { get; set; } public List<NewInfo> data { get; set; } } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data.Entity; namespace WebApplication1.Models { public class Dbtext : DbContext { public Dbtext() { } public DbSet<NewInfo> NewInfo { get; set; } } }
Web.config
<connectionStrings>
<add name="Dbtext" connectionString="Data Source=DESKTOP-SLRVHQA;Initial Catalog=Exam_Week3;Integrated Security=True" providerName="System.Data.SqlClient" />
<add name="Exam_Week03Entities" connectionString="metadata=res://*/Models.NewInfo.csdl|res://*/Models.NewInfo.ssdl|res://*/Models.NewInfo.msl;provider=System.Data.SqlClient;provider connection string="data source=.;initial catalog=Exam_Week03;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework"" providerName="System.Data.EntityClient" />
</connectionStrings>
需要跨域
html+layui的更多相关文章
- layui常用方法
很好用的一个ui组件,弹出,分页等 http://layer.layui.com/ 1 带叉叉的弹窗 layer.open({ type: , title: false, //不显示标题 conten ...
- 开源网站.NETMVC+ Layui+SqlSugar+RestSharp
SugarSite一个前端支持移动端的企业网站,目前只支持了简单功能,后续还会加上论坛等. 源码GIT地址: https://github.com/sunkaixuan/SugarSite 技术介绍 ...
- 分页组件 - layui.laypage
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 日期时间组件 - layui.laydate
全部参数 一.核心方法:laydate(options); options是一个对象,它包含了以下key: '默认值' { elem: '#id', //需显示日期的元素选择器 event: 'cli ...
- 关于layui
之前用layer用了很长时间,感觉很好用,最近看到了layui的发布很想尝试尝试. 加入了挺多的功能,比如编辑器,上传,form表单等等.
- 日期控件,layui
<link rel="stylesheet" href="<%=path%>/layui/css/layui.css" type=" ...
- 使用的组件:Layui
Layui 经典模块化前端框架 由职业前端倾情打造,面向所有层次的前后端程序猿,中国最容易使用的前端UI解决方案 Layui 出蛋于2016年金秋,是一款带着浓烈情怀的国产前端UI框架,她追求极简,又 ...
- 【开源项目SugarSite】ASP.NET MVC+ Layui+ SqlSugar+RestSharp项目讲解
SugarSite一个前端支持移动端的企业网站,目前只支持了简单功能,后续还会加上论坛等. 源码GIT地址: https://github.com/sunkaixuan/SugarSite 技术介绍 ...
- 前端框架layui
可以了解下jQuery组件layer layui开始使用Layui兼容除IE6/7以外的全部浏览器,并且绝大多数结构支持响应式 弹出层如果你使用的是Layui,那么你直接在官网下载layui框架即可, ...
- Layui - 示例
示例地址 http://www.layui.com/demo/ 下载地址 http://www.layui.com/ 示例代码 <!doctype html> <html> & ...
随机推荐
- [urllib]urlretrieve在python3
python3下面要使用:urllib.request.urlretrieve()这种形式的调用 from urllib.request import urlretrieve urlretrieve( ...
- 静态代码块&非静态代码块&构造函数
总结:静态代码块总是最先执行.非静态代码块跟非静态方法一样,跟对象有关.只不过非静态代码块在构造函数之前执行.父类非静态代码块.构造函数执行完毕后(相当于父类对象初始化完成), 才开始执行子类的非静态 ...
- (四)mybatis逆向工程
构建 逆向工程就是说通过数据库当中的表生成class,mapper,接口,不需要自己编写那些,很方便.跟symfony里面的自动生成是一样的:视频里的人说用的不多,但我觉得很方便呀 具体步骤,首先导入 ...
- overflow:hidden;zoom:1;外框自适应 [转]
在排页面时,碰到了,外框里的元素用fluid 布局,外框的高度不能适应的问题,查了一下资料,发现了博友的一篇文章,解决了这个问题,现在分享给大家. 解释不到位的请大牛补充~~~~~~ 高度自适应: h ...
- 高精度模板(Vector实现更加方便)
计算的数long long 甚至更大的数据类型的都存不下的时候,应该怎么办 ? 解决方法 :我们可以把一个很大的数当做字符串进行处理,这时候就需要用到高精度. 话不多说,咱们边看代码边处理 : 加法 ...
- ubuntu docker中crontab任务不执行的问题
problem of task of crontab in docker of ubuntu do not working! 由于各种原因,要在Ubuntu docker上部署crontab任务,如 ...
- Uncaught Error: Call to undefined function mcrypt_get_iv_size() 解决办法
函数 mcrypt_get_iv_size 在只在(PHP 4 >= 4.0.2, PHP 5, PHP 7 < 7.2.0, PECL mcrypt >= 1.0.0) 这几个版本 ...
- Django使用 djcelery时报ImportError: No module named south.db错误
这时候可能是安装的Django-celery.celery的版本过低引起的,可以到pycharm查看推荐的版本,把版本更换到的推荐的版本就解决了
- C# 利用委托事件进行窗体间的传值(简化)
定义委托 public delegate void SendMessageToChildForms(string s); //定义了一个参数是string ,无返回值的委托,名为 SendMessag ...
- OpenLayers要素拖拽
//拖拽要素 function dragFeature (_map,_dragEndCallback) { let selFeature = null; _map.on("pointerdr ...