图书管理系统源码，图书管理系统开发，图书借阅系统源码四TuShuManager应用程序MVC视图View

mabanbang2023-11-28 9:54

Asp.net web应用程序MVC之View视图

.ASP.NET MVC页面也就是要说的视图基本被放在Views文件夹下；

2.利用APS.NET MVC模板生成框架，Views文件夹下的默认页面为.cshtml页面；

3.ASP.NET MVC默认页面为Razor格式的页面，因此默认页面为.cshtml页面；

4.ASP.NET MVC中，支持WebForm页面，即.aspx页面；

5.ASP.NET MVC中，支持静态html页面；

注意这里使用的是.cshtml页面的视图

ReaderCatgory.cshtml视图页面

该视图是分类的页面视图主要代码是

cs 复制代码 
<script>
  
    function ReaderCatgoryadd() {
        layer.open({
            type: 2,
            area: ['700px', '550px'],
            fixed: false, //不固定
            title: '读者类型新增',
            maxmin: true,
            content: '/Reader/ReaderCatgoryAdd'
        });
    }
    layui.use(['table', 'layer', 'laydate'], function () {
        var table = layui.table;
        var layer = layui.layer//弹层;
            , laydate = layui.laydate;
        var $ = layui.jquery;
        table.render({
            elem: '#test'
            , url: '/Reader/ReaderCatgoryData' //数据接口
            , method: 'post',
            title: '用户数据表'
            , cols: [[
                 { field: 'id', style: 'display:none;' }
                , { field: 'zizeng', width: 60, title: '编号', fixed: true, templet: '#zizeng' }
                , { field: 'rname', title: '用户名称', width: 90 },
                { field: 'rnum', title: '借书次数', width:120 },
                { field: 'rday', title: '借书天数', width: 190 },
                { field: 'rxnum', title: '续借次数', width: 90 },
                { field: 'idate', title: '注册日期', width: 200, sort: true},
                , { fixed: 'right', title: '操作', align: 'right', toolbar: '#barDemo', width: 90 }
            ]]
            , page: true,
            done: function (res, curr, count) {
                // 隐藏列
                $(".layui-table-box").find("[data-field='id']").css("display", "none");
            }
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            //if (obj.event === 'detail') {
            //    layer.msg('查看操作');
            //}
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {

                    obj.del();
                    layer.close(index);

                    $.ajax({
                        url: "ReaderCatgoryDelete",
                        type: 'post',
                        data: data,
                        dataType: "json",
                        /* beforeSend:function () {
                             this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] });
                         },*/
                        success: function (data) {
                            if (data == "2") {
                                layer.msg("删除失败", { icon: 5 });//失败的表情
                                return;
                            } else if (data == '1') {
                                layer.msg("删除成功", {
                                    icon: 6,//成功的表情
                                    time: 1000 //1秒关闭（如果不配置，默认是3秒）
                                }, function () {
                                    //location.href = "/jifenq/shiwan";
                                    //location.reload();
                                });
                            }
                        },
                        complete: function () {
                            layer.close(this.layerIndex);
                        },
                    });

                });
            } else if (obj.event === 'edit') {
                //window.location.href = "/systemconfig/adminuserEdit/?id=" + data.id + "";
                layer.open({
                    type: 2,
                    area: ['700px', '550px'],
                    fixed: false, //不固定
                    title: '读者分类修改',
                    maxmin: true,
                    content: '/Reader/ReaderCatgoryEdit/?id=' + data.id
                });
            }
        });
        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>

使用的是layui框架渲染数据展示列表，layui默认显示数据格式如下

使用的是其中的方法渲染

简单说一下如何使用，主要调用

cs 复制代码 
 table.render({
     elem: '#test'
     , url: '/Reader/ReaderCatgoryData' //数据接口
     , method: 'post',
     title: '用户数据表'
     , cols: [[
          { field: 'id', style: 'display:none;' }
         , { field: 'zizeng', width: 60, title: '编号', fixed: true, templet: '#zizeng' }
         , { field: 'rname', title: '用户名称', width: 90 },
         { field: 'rnum', title: '借书次数', width:120 },
         { field: 'rday', title: '借书天数', width: 190 },
         { field: 'rxnum', title: '续借次数', width: 90 },
         { field: 'idate', title: '注册日期', width: 200, sort: true},
         , { fixed: 'right', title: '操作', align: 'right', toolbar: '#barDemo', width: 90 }
     ]]
     , page: true,
     done: function (res, curr, count) {
         // 隐藏列
         $(".layui-table-box").find("[data-field='id']").css("display", "none");
     }
 });

其中url是访问控制器方法后，返回的json格式的数据

然后展示在绑定的elem:"#test"元素

javascript 复制代码 
  <table class="layui-hide" id="test" lay-filter="test"></table>
  <script type="text/html" id="zizeng">
      {{d.LAY_TABLE_INDEX+1}}
  </script>


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

ReaderCatgoryAdd.cshtml页面

页面是访问添加的视图，操作增加的页面

cs 复制代码 
<link href="~/content/layui/css/layui.css" rel="stylesheet" />
<script src="~/content/layui/layui.js"></script>
<script src="~/content/layui/jquery.min.js"></script>
<div style="margin-top:20px;">
    <!-- 内容主体区域 -->
    <form class="layui-form" action="">

        <div class="layui-form-item">
            <div class="layui-form-item">
                <label class="layui-form-label">类型名称</label>
                <div class="layui-input-block">
                    <input type="text" name="rname" lay-verify="required" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">借书次数</label>
            <div class="layui-input-block">
                <input type="text" name="rnum" autocomplete="off" placeholder="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">借书天数</label>
            <div class="layui-input-block">
                <input type="text" name="rday" autocomplete="off" placeholder="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">续借次数</label>
            <div class="layui-input-block">
                <input type="text" name="rxnum" autocomplete="off" placeholder="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">注册时间</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" id="idate" name="idate">

            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="demo1" id="tijiao">立即提交</button>
                <button class="layui-btn layui-btn-primary" id="closeIframe">关闭</button>
            </div>
        </div>
    </form>

</div>

<script>
    layui.use(['form', 'layedit', 'laydate', 'element'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;
        var element = layui.element;
        var $ = layui.jquery, form = layui.form;
        //日期
        laydate.render({
            elem: '#idate'
            , type: 'datetime'
            , value: new Date()
        });
        laydate.render({
            elem: '#date1'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');
        //监听提交
        form.on('submit(demo1)', function (data) {
            //layer.msg(JSON.toString(base64img));
            var userInfo = data.field;

                var url = "/Reader/ReaderCatgorySave";
                $.ajax({
                    url: url,
                    type: 'post',
                    data: userInfo,

                    dataType: "json",
                    /* beforeSend:function () {
                         this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] });
                     },*/
                    success: function (data) {
                        if (data == "2") {
                            layer.msg("增加失败", { icon: 5 });//失败的表情
                            return;
                        } else if (data == '1') {
                            layer.msg("添加成功", {
                                icon: 6,//成功的表情
                                time: 1000 //1秒关闭（如果不配置，默认是3秒）
                            }, function () {
                                    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                                    parent.location.reload();
                                    parent.layer.close(index);
                                    //location.href = "/systemconfig/index";
                            });
                        }
                    },
                    complete: function () {
                        layer.close(this.layerIndex);
                    },
                });
                return false;//阻止表单跳转链接！

            //layer.msg($('#appimg').val());

            /* layer.alert(JSON.stringify(data.field), {
               title: '最终的提交信息'
             })
             return false;*/
        });

        //表单初始赋值
        /* form.val('example', {
           "username": "贤心" // "name": "value"
           ,"password": "123456"
           ,"interest": 1
           ,"like[write]": true //复选框选中状态
           ,"close": true //开关状态
           ,"sex": "女"
           ,"desc": "我爱 layui"
         })*/


    });
</script>

其中

cs 复制代码 
  //监听提交
        form.on('submit(demo1)', function (data) {
            //layer.msg(JSON.toString(base64img));
            var userInfo = data.field;

                var url = "/Reader/ReaderCatgorySave";

form.on监听的是页面提交按钮的事件。调用url = "/Reader/ReaderCatgorySave";前面说到的控制器ReaderController.cs中ReaderCatgorySave保存方法

ReaderCatgoryEdit.cshtml页面

修改页面和前面增加页面原理差不多一样

相关推荐
V+zmm101346 小时前
基于小程序宿舍报修系统的设计与实现ssm+论文源码调试讲解
java·小程序·毕业设计·mvc·ssm
鲨鱼辣椒不吃辣c2 天前
拦截器魔法：Spring MVC中的防重放守护者
java·spring·mvc
goTsHgo2 天前
在 Spring Boot 的 MVC 框架中 路径匹配的实现 详解
spring boot·后端·mvc
李小白662 天前
Spring MVC(上)
java·spring·mvc
王ASC2 天前
SpringMVC的URL组成，以及URI中对/斜杠的处理，解决IllegalStateException: Ambiguous mapping
java·mvc·springboot·web
撒呼呼2 天前
# 起步专用 - 哔哩哔哩全模块超还原设计！(内含接口文档、数据库设计)
数据库·spring boot·spring·mvc·springboot
zybishe3 天前
免费送源码：Java+ssm++MVC+HTML+CSS+MySQL springboot 社区医院信息管理系统的设计与实现 计算机毕业设计原创定制
java·hadoop·sql·zookeeper·html·json·mvc
nie66688884 天前
springmvc的拦截器，全局异常处理和文件上传
spring·mvc
王ASC4 天前
Springboot访问到Controller中不存在的接口BUG
spring boot·后端·mvc
de之梦-御风5 天前
【进阶编程】MVVM的物理架构目录
架构·mvc·.net
热门推荐
0119个Web前端交互式3D JavaScript框架和库02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07【一文读懂】NTN（非地面网络）技术介绍08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10ZZ038 物联网应用与服务赛题第J套