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

需要跨域

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> & ...

随机推荐

Codeforces_714_A
http://codeforces.com/problemset/problem/714/A 水,注意K的值. #include <iostream> using namespace st ...
2019牛客多校2 F Partition problem(dfs)
题意: n<=28个人,分成人数相同的两组,给你2*n*2*n的矩阵,如果(i,j)在不同的组里,竞争力增加v[i][j],问你怎么分配竞争力最 4s 思路: 枚举C(28,14)的状态,更新答 ...
12306 抢票系列之只要搞定RAIL_DEVICEID的来源,从此抢票不再掉线(上)
郑重声明: 本文仅供学习使用,禁止用于非法用途,否则后果自负,如有侵权,烦请告知删除,谢谢合作! 开篇明义本文针对自主开发的抢票脚本在抢票过程中常常遇到的请求无效等问题,简单分析了 12306 网站 ...
Spring事务中的隔离级别
TransactionDefinition接口中定义了五个表示隔离级别的常量: TransactionDefinition.ISOLATION_DEFAULT:使用后端数据库默认的隔离界别,MySQL ...
教你如何快速上手markdown语法，编写技术博客（史上最全最简，用MarkDown写博客）
首先,进行有道云笔记官网,新建一份markdown文档, 如下图然后,在文档编辑区,左边,复制如下段落文字加粗斜线标记颜色下划线废弃线一级标题二级标题三级标题四级标题五级标题六 ...
SpringBoot嵌入式Servlet配置原理
SpringBoot嵌入式Servlet配置原理 SpringBoot修改服务器配置配置文件方式方式修改,实际修改的是ServerProperties文件中的值 server.servlet.con ...
PBFT 算法 java实现（下）
PBFT 算法的java实现(下) 在上一篇博客中(如果没有看上一篇博客建议去看上一篇博客),我们介绍了使用Java实现PBFT算法中节点的加入,view的同步等操作.在这篇博客中,我将介绍PBFT算 ...
asp.net core 3.x 授权默认流程
一.前言接上一篇<asp.net core 3.x 授权中的概念>,本篇看看asp.net core默认授权的流程.从两个方面来看整个授权系统是怎么运行的:启动阶段的配置.请求阶段中间件 ...
（数据科学学习手札77）基于geopandas的空间数据分析——文件IO
本文对应代码和数据已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介在上一篇文章中我们对geopandas中的 ...
localStorage 存储
localStorage 的优势 localStorage 拓展了 cookie 的 4K 限制. localStorage 会可以将第一次请求的数据直接存储到本地,这个相当于一个 5M 大小的针对于 ...

html+layui

html+layui的更多相关文章

随机推荐

热门专题