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

随机推荐

ARTS Week 15
Feb 3, 2020 ~ Feb 9, 2020 Algorithm Problem 172.Factorial Trailing Zeroes(阶乘末尾的0) 题目链接题目描述:给定一个整数n, ...
ant编译solr源码生成eclipse项目，解决一直resolve，一直[ivy:retrieve]的问题
这两天在学习solr,结果刚到编译solr源码就卡住了,足足卡了两天,网上找各种解决办法都是简单带过,说是缺少jar包,下载下来放到对应位置就好了....对应位置???咋不说这个问题用相应方法解决即可 ...
Java 代码实现链表
Linked List 用多少就申请多少内存. 链表是一种链式存储的线性表,所有元素的内存地址不一定连续的. 接口设计代码实现 MyList.java(接口) package com.cyb; pu ...
Django ORM各种查询
正向和反向查询正向 ----> 关联字段在当前表中,从当前表向外查叫正向反向 —> 关联字段不在当前表中,当当前表向外查叫反向正向通过字段,反向通过表名查表结构 from djan ...
DOCKER 学习笔记9 Kubernetes (K8s) 弹性伸缩容器下
前言从上一篇看来,我们已经对于Kubernetes ,通过minikube 建立集群,而后使用kubectl 进行交互,对Deployment 部署以及服务的暴露等.这节,将学习弹性的将服务部署到多 ...
java8种基本数据类型
Linux学习2-云服务器上安装java和tomcat环境
在linux上部署java的项目,首先要安装JDK和Tomcat,具体要求怎么操作呢,我们一起来学习吧! JDK的安装步骤如下: 1.首先我们从官网下载jdk-8u231-linux-x64.rpm安 ...
golang搭建一个简单的web服务器
package main import ( "io/ioutil" "log" "net/http" ) func main() { htt ...
btrfs文件系统简单学习
1 btrfs文件系统 btrfs文件系统在生产环境应用还不多,因此,本文仅仅简单学习. 1.1 btrfs文件系统核心特性 1)多物理卷支持:btrfs可由多个底层物理卷组成(可以是单块物理磁盘,也 ...
Android之ScrollView嵌套ListView冲突 (listView只显示一行)
在ScrollView中嵌套使用ListView,ListView只会显示一行多一点.两者进行嵌套,即会发生冲突.由于ListView本身都继承于ScrollView,一旦在ScrollView中嵌套 ...

html+layui

html+layui的更多相关文章

随机推荐

热门专题