html+layui -云博客

html+layui

# 前端 2024-05-05 04:43 0 82 来源：云博客

添加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) { if (d > 0) { 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; }); }); var Id = location.href.split(‘=‘)[1]; 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) { if (d > 0) { 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: 312 , url: ‘https://localhost:44398/api/index/getnews‘ //数据接口 , page: true //开启分页 , limit: 5 , cols: [[ //表头 { field: ‘Id‘, title: ‘ID‘, width: 80, sort: true, fixed: ‘left‘ } , { field: ‘NewsName‘, title: ‘标题‘, width: 160 } , { field: ‘Reamk‘, title: ‘内容‘, width: 300, sort: true } , { fixed: ‘right‘, width: 165, 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) { if (d > 0) { 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 = 0; model.msg = "成功!"; model.count =10000; 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; } }}