添加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

<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=&quot;data source=.;initial catalog=Exam_Week03;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework&quot;" providerName="System.Data.EntityClient" />
</connectionStrings>

需要跨域

html+layui的更多相关文章

  1. layui常用方法

    很好用的一个ui组件,弹出,分页等 http://layer.layui.com/ 1 带叉叉的弹窗 layer.open({ type: , title: false, //不显示标题 conten ...

  2. 开源网站.NETMVC+ Layui+SqlSugar+RestSharp

    SugarSite一个前端支持移动端的企业网站,目前只支持了简单功能,后续还会加上论坛等. 源码GIT地址: https://github.com/sunkaixuan/SugarSite 技术介绍 ...

  3. 分页组件 - layui.laypage

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 日期时间组件 - layui.laydate

    全部参数 一.核心方法:laydate(options); options是一个对象,它包含了以下key: '默认值' { elem: '#id', //需显示日期的元素选择器 event: 'cli ...

  5. 关于layui

    之前用layer用了很长时间,感觉很好用,最近看到了layui的发布很想尝试尝试. 加入了挺多的功能,比如编辑器,上传,form表单等等.

  6. 日期控件,layui

    <link rel="stylesheet" href="<%=path%>/layui/css/layui.css" type=" ...

  7. 使用的组件：Layui

    Layui 经典模块化前端框架 由职业前端倾情打造,面向所有层次的前后端程序猿,中国最容易使用的前端UI解决方案 Layui 出蛋于2016年金秋,是一款带着浓烈情怀的国产前端UI框架,她追求极简,又 ...

  8. 【开源项目SugarSite】ASP.NET MVC+ Layui+ SqlSugar+RestSharp项目讲解

    SugarSite一个前端支持移动端的企业网站,目前只支持了简单功能,后续还会加上论坛等. 源码GIT地址: https://github.com/sunkaixuan/SugarSite 技术介绍 ...

  9. 前端框架layui

    可以了解下jQuery组件layer layui开始使用Layui兼容除IE6/7以外的全部浏览器,并且绝大多数结构支持响应式 弹出层如果你使用的是Layui,那么你直接在官网下载layui框架即可, ...

  10. Layui - 示例

    示例地址 http://www.layui.com/demo/ 下载地址 http://www.layui.com/ 示例代码 <!doctype html> <html> & ...

随机推荐

  1. 使用Apache服务器实现Nginx反向代理

    实验环境:centos7 注:因为本次实验在同一台服务器上,Apache与Nginx同为80端口,所以改Apache端口为60 1 配置Nginx服务器: 编辑Nginx配置文件,写入以下内容 loc ...

  2. BZOJ 1009 [HNOI2008]GT考试(矩阵快速幂优化DP+KMP)

    题意: 求长度为n的不含长为m的指定子串的字符串的个数 1s, n<=1e9, m<=50 思路: 长见识了.. 设那个指定子串为s f[i][j]表示长度为i的字符串(其中后j个字符与s ...

  3. Gorm与数据库（单复数）表结构之间的映射

    Gorm连接MySQL: import ( _ "github.com/go-sql-driver/mysql" "github.com/jinzhu/gorm" ...

  4. k8s系列--- dashboard认证及分级授权

    http://blog.itpub.net/28916011/viewspace-2215214/ 因版本不一样,略有改动 Dashboard官方地址: https://github.com/kube ...

  5. [CSS]三大特性之一继承性、层叠性、优先级

    <style> div { color: red; font-size: 30px; {#background: #0066ff;#} } </style> <!-- 1 ...

  6. cornerstone使用beyond compare比较工具

    prefrences->general->external compare tool->open script foder 新建一个bc.sh文件(名字可以任意,sh后缀即可)保存到 ...

  7. C# 根据天、周、月汇总统计生成统计报表

    先看核心代码: public List<DataEntity> SearchShopSalesReport(DateTimeOffset? dateFrom, DateTimeOffset ...

  8. JavaScript 基础学习（二）js 和 html 的结合方式

    第一种 使用一个标签 <script type="text/javascript"> js代码; </script> 第二种 使用 script 标签,引入 ...

  9. maven导入sqlserver驱动jar包依赖包到本地仓库

    maven导入sqlserver驱动jar包依赖包到本地仓库 maven项目使用sqlserver的依赖,先下载一个sqlserver的驱动,网址:https://www.microsoft.com/ ...

  10. dmock 基于Django的轻量级Mock平台

    GitHub:https://github.com/yjlch1016/dmock # dmock 基于Django的轻量级Mock平台 dmock即Django+Mock的缩写 一.思路: mock ...