layui表格增删改查与上传图片+Api

API 控制器1 主要用于增删改查已经反填数据查询

using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using UserInfoAPI.Models;
namespace UserInfoAPI.Controllers
{
    public class UserInfoSController : ApiController
    {

        UserDbContext db = new UserDbContext();

       /// <summary>
       /// 显示 分页
       /// </summary>
       /// <returns></returns>
        public Paging Get(int PageIndex=1 , int PageSize=5)
        {
            SqlParameter[] sp = new SqlParameter[]
            {
                 new SqlParameter("@PageIndex",PageIndex){ DbType=System.Data.DbType.Int32},
                 new SqlParameter("@PageSize",PageSize){ DbType=System.Data.DbType.Int32},
                 new SqlParameter("@TotalCount",System.Data.DbType.Int32){Direction=System.Data.ParameterDirection.Output}
            };
           string sql = "U_FenYe @PageIndex,@PageSize,@TotalCount output";
            Paging paging = new Paging();
            paging.data= db.Database.SqlQuery<UserInfoS>(sql,sp).ToList();
            paging.code = 0;
            paging.msg = "";
            paging.count =Convert.ToInt32(sp[2].Value);
            return paging;
        }
       /// <summary>
       /// 添加
       /// </summary>
       /// <param name="m"></param>
       /// <returns></returns>
        public int Post(UserInfoS m)
        {
            db.UserInfoS.Add(m);
            return db.SaveChanges();
        }

       /// <summary>
       /// 修改
       /// </summary>
       /// <param name="m"></param>
       /// <returns></returns>
        public int PostUpt(UserInfoS m)
        {
            db.Entry<UserInfoS>(m).State = System.Data.Entity.EntityState.Modified;
            return db.SaveChanges();
        }

        /// <summary>
        /// 删除
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public int GetResult(int id)
        {
            var user = db.UserInfoS.Find(id);
            db.UserInfoS.Remove(user);
            return db.SaveChanges();
        }
        /// <summary>
        /// 用于修改反填
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public UserInfoS GetUserInfo(int id)
        {
            return db.UserInfoS.Find(id);
        }
    }
}

　　Api 控制器2 用于上传图片

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web;
using System.Web.Http;

namespace UserInfoAPI.Controllers
{
    public class UploadController : ApiController
    {

        public UploadModel Post()
        {

            HttpFileCollection file = HttpContext.Current.Request.Files;

            UploadModel model = new UploadModel()
            {
                code = 0,
                msg = "",
                data = null
            };

            if (file!=null)
            {
                string str = Path.GetExtension(file[0].FileName).ToLower();
                if (str.Equals(".jpg") || str.Equals(".png") || str.Equals(".gif"))
                {
                    string p = "/Imgs/" + Path.GetFileName(file[0].FileName);

                    file[0].SaveAs(HttpContext.Current.Server.MapPath(p));

                    ImgsModel m = new ImgsModel()
                    {
                        msg = "成功",
                        src = p

                    };
                    model.data = m;
                 
                }
            }
            return model;
        }
       
     


    }


    public class ImgsModel
    {
        public string msg { get; set; }

        public string src { get; set; }
    }

    public class UploadModel
    {
        public int code { get; set; }
        public string msg { get; set; }
        public ImgsModel data { get; set; }

    }
}

　　Html 显示页面

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.4.1.js"></script>
</head>
<body>
    <div>
        <button class="layui-btn layui-btn-lg" onclick="Add()">
                添加   
        </button>
    </div>
    <div>
        <table ></table>
    </div>

    <script type="text/html" >
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="Upt">修改</button>
            <button class="layui-btn layui-btn-sm" lay-event="Del">删除</button>
        </div>
    </script>
    <script type="text/html" >
        <div class="layui-btn-container">
            <img style="height:30px;30px;border-radius:50%;line-height:150px!important;" src="{{d.UImg}}" />
        </div>
    </script>
    <script src="~/layui/layui.js"></script>
    <script>

        layui.use('table', function () {
            var table = layui.table;

            table.render({
                elem: '#demo',
                height: 312,
                url: "https://localhost:44304/api/userinfos/Get",
                page: true,
                cols:
                    [[
                        { field: 'UName', title: "用户名", sort: true, fixed: 'left' },
                        { field: 'UPwd', title: "密码", sort: true, fixed: 'left' },
                        { field: 'USex', title: "性别", sort: true, fixed: 'left', templet: function (d) { if (d.gender == false) { return '女' } else { return '男' } } },
                        { field: 'UHobby', title: "爱好", sort: true, fixed: 'left' },
                        { field: 'UImg', title: "头像", sort: true, fixed: 'left',templet:'#TouXiang' },
                        { field: 'URemark', title: "描述", sort: true, fixed: 'left' }
                        , { title: "操作", templet: '#toolbarDemo' }
                    ]],
                request:
                {
                    pageName: 'PageIndex',
                    limitName: 'PageSize'
                }
            });

            table.on('tool(test)', function (obj) {
                var data = obj.data; //获取当前行数据
                var layEvent = obj.event; //获取lay-event对应得值
                console.log(data);
                if (layEvent == 'Del') {
                    layer.confirm('真得删除吗？', function (index) {

                        $.ajax({
                            url: 'https://localhost:44304/api/userinfos/GetResult/' + data.Id,
                            success: function (d) {
                                if (d > 0) {
                                    layer.msg('删除成功', { icon: 1 });
                                    obj.del();
                                }
                                else {
                                    alert('失败')
                                }
                            }
                        })
                    })
                }
                if (layEvent == 'Upt') {

//因为用的是MVC所以跳转是控制器/方法 如果是html 直接名字加.html即可

location.href = '/UserInfoS/Upt?Id=' + data.Id; } }) }); function Add() {
//因为用的是MVC所以跳转是控制器/方法 如果是html 直接名字加.html即可
            location.href = '/UserInfoS/Add';
        }
    </script>
</body>
</html>

　　添加页面

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Add</title>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.4.1.js"></script>
</head>
<body>
    <div> 
        <form action="/" method="post" class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-block">
                
                    <input type="image" name="UImg"  />
                    <button type="button" class="layui-btn" >
                        <i class="layui-icon">�</i>上传图片
                    </button>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="UName" required lay-verify="required" placeholder="请输入用户名" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="UPwd" required lay-verify="required" placeholder="请输入密码" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="USex" value="男" title="男" checked />
                    <input type="radio" name="USex" value="女" title="女" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">爱好</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="UHobby" value="写作" title="写作" checked />
                    <input type="checkbox" name="UHobby" value="阅读" title="阅读" />
                    <input type="checkbox" name="UHobby" value="发呆" title="发呆" />
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-block">
                    <textarea name="URemark" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                </div>
            </div>
        </form>
    </div>
    <script src="~/layui/layui.all.js"></script>
    
    <script>

        layui.use('upload', function () {
            var upload = layui.upload;

            var uploadInst = upload.render({
                elem: "#test1",
                url: "https://localhost:44304/api/Upload/Post",
                done: function (res)
                {
                    console.log(res);
                    layui.$("#test2").attr('src', 'https://localhost:44304' + res.data.src);
                      layui.$("#test2").attr('value','https://localhost:44304'+ res.data.src);
                    alert('上传成功');
                },
                error: function ()
                {

                }
            })
        })



        layui.use('form',function () {
            var form = layui.form;

            form.on('submit(formDemo)', function (data) {

                console.log(data);
         
                $.ajax({
                    url: "https://localhost:44304/api/userinfos/Post",
                    data: data.field,
                    type:"Post",
                    success: function () {
                        alert('成功');

//因为用的是MVC所以跳转是控制器/方法 如果是html 直接名字加.html即可



                        location.href = '/UserInfoS/Index';
                    }
                })
                       return false;
               
            }
                )
        })
    </script>
</body>
</html>

　　修改页面

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Add</title>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.4.1.js"></script>
</head>
<body>
    <div>
        <form action="/" method="post" class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-block">

                    <input type="image" name="UImg"  />
                    <button type="button" class="layui-btn" >
                        <i class="layui-icon">�</i>上传图片
                    </button>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text"  />
                    <input type="hidden"  />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password"  />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" checked />
                    <input type="radio" name="USex" value="女" title="女" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">爱好</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="UHobby" value="写作" title="写作" checked />
                    <input type="checkbox" name="UHobby" value="阅读" title="阅读" />
                    <input type="checkbox" name="UHobby" value="发呆" title="发呆" />
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-block">
                    <textarea name="URemark" ></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                </div>
            </div>
        </form>
    </div>
    <script src="~/layui/layui.all.js"></script>

    <script>

      var loc = window.location.search;
      var n1 = loc.length;//地址的总长度
      var n2 = loc.indexOf("=");//取得=号的位置
      var id = loc.substr(n2 + 1, n1 - n2);//从=号后面的内容

        $.ajax({
            url: 'https://localhost:44304/api/UserInfoS/GetUserInfo/' + id,
            dataType: "json",
            success: function (d)
            {
                console.log(d);
                $("#UId").val(id);
                $("#UName").val(d.UName);
                $("#UPwd").val(d.UPwd);
                $("#USex").attr('checked', d.USex);
                $("#URemark").val(d.URemark);
            }
        })




        layui.use('upload', function () {
            var upload = layui.upload;

            var uploadInst = upload.render({
                elem: "#test1",
                url: "https://localhost:44304/api/Upload/Post",
                done: function (res) {
                    console.log(res);
                    layui.$("#test2").attr('src', 'https://localhost:44304' + res.data.src);
                    layui.$("#test2").attr('value', 'https://localhost:44304' + res.data.src);
                    alert('上传成功');
                },
                error: function () {

                }
            })
        })



        layui.use('form', function () {
            var form = layui.form;

            form.on('submit(formDemo)', function (data) {

                console.log(data);
           
                $.ajax({
                    url: "https://localhost:44304/api/userinfos/PostUpt",
                    data: data.field,
                    type: "Post",
                    success: function () {
                        alert('成功');

//因为用的是MVC所以跳转是控制器/方法 如果是html 直接名字加.html即可



                        location.href = '/UserInfoS/Index';
                    }
                })

                return false;
            }
            )
        })
    </script>
</body>
</html>

layui表格增删改查与上传图片+Api

相关推荐