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

随机推荐

自定义内建模块 - Python Build Your Own Built-In Module
在 python 中, 用户可以通过 py 文件创建自定义的 module, 也可以通过 C 创建 dll, 扩展 python module. 当用户在一个正在编辑的模块 module 中, 引入( ...
ImportError: DLL load failed: 找不到指定的模块；ImportError: numpy.core.multiarray failed to import 报错解决
python程序运行出错,出错的两行主要信息如下: ImportError: DLL load failed: 找不到指定的模块 ImportError: numpy.core.multiarray ...
[redis读书笔记] 第一部分数据结构与对象压缩列表
压缩列表是为了节省内存而设计的,是列表键和哈希键的底层实现之一. 压缩列表的逻辑如下,
redis系列-14点的灵异事件
概述项目组每天14点都会遭遇惊魂时刻.一条条告警短信把工程师从午后小憩中拉回现实.之后问题又神秘消失.是PM喊你上工了?还是服务器给你开玩笑?下面请看工程师如何一步一步揪出真凶,解决问题. 如果不想 ...
css position absolute相对于父元素的设置方式
手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元大家知道css的position abs ...
H5页面长按复制功能实现
手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元默认情况下禁止了长按复制功能,要此功能需 ...
C++常见编程--获取当前系统时间
C++常见编程--获取当前系统时间文章首发https://www.cppentry.com 本文主要使用time() 及strftime() 函数 C++系统和时间相关的函数基本上都是使用C语言提供 ...
jni 文件切割合并
最近学习c++,看到很多常用的例子,比如文件切割,切割后后缀可以自定义,别人就无法从表面的一个文件看出是什么,也无法查看到原文件信息,只有合并后才能识别这庐山真面目实现也比较粗暴,首先在应用层定义好 ...
Python 使用OS模块调用 cmd
在os模块中提供了两种调用 cmd 的方法,os.popen() 和 os.system()os.system(cmd) 是在执行command命令时需要打开一个终端,并且无法保存command命令的 ...
Android中通过Fragment进行简单的页面切换
首先是activity中的布局 <?xml version="1.0" encoding="utf-8"?> <androidx.constr ...

html+layui

html+layui的更多相关文章

随机推荐

热门专题