添加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; }
}
}
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>
需要跨域
来源：https://www.cnblogs.com/jnm121/p/12324736.html