【ASP.NET MVC】使用动软(五)(13)

一、问题

前文完成的用户登录后的首页如下:

后续账单管理、人员管理等功能页面都有相同的头部,左边和下边,唯一不同的右边内容部分,所以要解决重复设计的问题。

二、解决方法------使用布局页

在Views上右键添加新建项,选择布局页,名称可改:

拷贝相同的头部、左边、下边的HTML到布局页,需要加载的地方用RenderBody

在index页面中测试

修改index页面

登录后,跳转到index

PS:图片和时间不正常的是路径的问题,如修改布局页的js路径解决时间问题

修改图片路径:

三、账单管理 页面的实现

首先 ,修改布局页中各项链接跳转

原来是静态页面方式,现改成"控制器+Action"

静态:

动态

以账单管理为例,用布局页实现功能:

在Home控制器中添加Action

       [IsLogin]
        public ActionResult billList()
        {
            Maticsoft.BLL.bill bll = new Maticsoft.BLL.bill();
            List<Maticsoft.Model.bill> list = bll.GetModelList("");
            ViewBag.list = list;
            return View();
        }

[IsLogin] 见前文,取出数据表中所有账单信息,放入ViewBag。

右键该Action添加视图:

@{
    Layout = "~/Views/_LayoutPage1.cshtml";
    List<Maticsoft.Model.bill> list = ViewBag.list;
}

<body>
     <div class="location">
                <strong>你现在所在的位置是:</strong>
                <span>账单管理页面</span>
            </div>
            <div class="search">
                <span>商品名称:</span>
                <input type="text" placeholder="请输入商品的名称"/>                
                <span>供应商:</span>
                <select name="tigong" >
                    <option value="">--请选择--</option>
                    <option value="">北京市粮油总公司</option>
                    <option value="">邯郸市五得利面粉厂</option>
                </select>
                <span>是否付款:</span>
                <select name="fukuan">
                    <option value="">--请选择--</option>
                    <option value="">已付款</option>
                    <option value="">未付款</option>
                </select>

                <input type="button" value="查询"/>
                <a href="billAdd.html">添加订单</a>
            </div>
            <!--账单表格 样式和供应商公用-->
            <table class="providerTable" cellpadding="0" cellspacing="0">
                <tr class="firstTr">
                    <th width="10%">账单编码</th>
                    <th width="20%">商品名称</th>
                    <th width="10%">供应商</th>
                    <th width="10%">账单金额</th>
                    <th width="10%">是否付款</th>
                    <th width="10%">创建时间</th>
                    <th width="30%">操作</th>
                </tr>
                @foreach (Maticsoft.Model.bill item in list)
                {
                    <tr>
                    <td>@item.id</td>
                    <td>@item.billName</td>
                    <td>@item.supplierid</td>
                    <td>@item.money</td>
                    <td>@item.zhifu</td>
                    <td>@DateTime.Now.ToString()</td>
                    <td>
                        <a href="billView.html"><img src="~/img/read.png" alt="查看" title="查看"/></a>
                        <a href="billUpdate.html"><img src="~/img/xiugai.png" alt="修改" title="修改"/></a>
                        <a href="#" class="removeBill"><img src="~/img/schu.png" alt="删除" title="删除"/></a>
                    </td>
                   </tr>
                }              
            </table>
</body>

使用布局页,解决重复页面代码问题,根据ViewBag动态生成页面内容:

PS:基于超市模板WEB项目的相关资料可以联系作者获取(740803366 易老师)

相关推荐
啦啦右一1 小时前
Spring Boot | (一)Spring开发环境构建
spring boot·后端·spring
森屿Serien1 小时前
Spring Boot常用注解
java·spring boot·后端
盛派网络小助手3 小时前
微信 SDK 更新 Sample,NCF 文档和模板更新,更多更新日志,欢迎解锁
开发语言·人工智能·后端·架构·c#
∝请叫*我简单先生3 小时前
java如何使用poi-tl在word模板里渲染多张图片
java·后端·poi-tl
zquwei4 小时前
SpringCloudGateway+Nacos注册与转发Netty+WebSocket
java·网络·分布式·后端·websocket·网络协议·spring
dessler5 小时前
Docker-run命令详细讲解
linux·运维·后端·docker
Q_19284999065 小时前
基于Spring Boot的九州美食城商户一体化系统
java·spring boot·后端
ZSYP-S6 小时前
Day 15:Spring 框架基础
java·开发语言·数据结构·后端·spring
Yuan_o_6 小时前
Linux 基本使用和程序部署
java·linux·运维·服务器·数据库·后端