一、母版页、子母版页、页面之间的关系

母版页和子母版页，功能的页面之间的关系，在不同功能的页面怎么进行差异化管理样式和脚本，提高页面的响应速度，使页面更加简洁。

页面布局的结构图：

一、子母版页_Edit、_Frame、_List、_Detail 继承母版_Layout，可以差异化加载页面相关的样式和脚本

1、_Layout

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title</title>
<link rel="stylesheet" href="@Url.Content("~/Content/Fonts/yspt.fonts.min.css")" />
<link rel="stylesheet" href="~/Content/Frame/base.css" />
<script type="text/javascript" src="~/Scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.form.js"></script>
<script type="text/javascript" src="~/Scripts/Common/global.js"></script>
</head>
<body>
@RenderBody()
</body>
</html>

2、子母版页_List

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@RenderBody()
<footer>
    <link rel="stylesheet" href="~/Content/flexigrid/flexigrid.css" type="text/css" />
    <script type="text/javascript" src="~/Scripts/flexigrid.js" charset="gb2312"></script>
</foote

3、子母版页_Edit

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<header>
    <link rel="StyleSheet" href="~/Content/User/User.css" type="text/css" />
    <script type="text/javascript" src="~/Scripts/DatePicker/WdatePicker.js"></script>
</header>
@RenderBody()
<div id="dvErrorMsg" style="text-align:left;margin-top:-20px;margin-left:5px;">
    @{Html.RenderAction("ErrorMessage", "ErrorManage");}
</div>

4、列表的页面加载子母版页_List

@{
    ViewBag.Title ="组织管理";
    Layout = "~/Views/Shared/_List.cshtml";
}
<script>
    $(document).ready(function () {
        $("#dvCmpBtn").flexigrid({
            //工具栏
            buttons:
            [
               { name: ‘新增‘, bclass: ‘icon-plus_sign‘,onpress:CpMa.AddItem,id: ‘‘ },
               { name: ‘修改‘, bclass: ‘icon-edit‘, onpress: CpMa.EditItem, id: ‘‘ },
               { name: ‘删除‘, bclass: ‘icon-trash‘, id: ‘‘ },
               { name: ‘排序‘, bclass: ‘icon-list‘, id: ‘‘ }
            ],
            width: ‘auto‘,
            height: ‘auto‘
        });
    });
    var CpMa = {
        AddItem: function () {
            var vSelNode = ObjTree();
            global.ShowModelWin("/OrgManage/CpMaEdit/Add/" + vSelNode + "", 800, 535);

        },
        EditItem: function () {
            var vSelNode = ObjTree();
            global.ShowModelWin("/OrgManage/CpMaEdit/Edit/" + vSelNode + "", 800, 535);
        }
    }
    function ObjTree(){
        var objTree = $(‘#dvCmpTree‘).jstree(true);//获取整个树
        var arrSelNode = objTree.get_selected();
        if (!arrSelNode.length) { return false; }
        var vSelNode = arrSelNode[0];
        return vSelNode;
    }
    function AddJsTreeNode(vNodeName) {
        var vSelNode = ObjTree();
        var objTree = $(‘#dvCmpTree‘).jstree(true);//获取整个树
        var isCreateNode = objTree.create_node(vSelNode, {"text": vNodeName }, "last")
    }
</script>
<div class="contentwrapper" style="padding:0;margin:0;z-index:-3">
    <div class="orgcontentwrapper">
        <table class="orgmain" cellspacing="0"  cellpadding="0">
            <tr>
                <td id="lPan" align="left" valign="top">
                    <div id="dvCmpBtn"></div>
                    <div id="dvCmpTree" style="margin:0;padding:0;overflow-y:auto;width:280px; height:550px;"></div>
                </td>
                <td id="cPan" style="border-left:1px solid #C0C0C0;text-align:center;vertical-align:middle;">
                    <div></div>
                </td>
                <td id="rPan" style="text-align:left;vertical-align:top;">
                    <iframe name="ifrmCmp" frameborder="0" src="javascript:void()" style="margin:0;padding:0;width:100%;height:480px;z-index:-5"></iframe>
                </td>
            </tr>
        </table>
    </div>
    <div style="display:none">
        @Html.Hidden("hddCmpNodeCode","0")
    </div>
</div>
<footer>
    <link rel="stylesheet" href="~/Content/themes/default/style.css" type="text/css" />
    <script type="text/javascript" src="~/Scripts/jstree.min.js"></script>
    <script type="text/javascript" src="~/Scripts/OrgManage/CpMa.js"></script>
</footer>

5、编辑的页加载子母版页_Edit

@using YSPT.Application.DTO.OrgManage
@model CompanyView
@{
    ViewBag.Title = "组织管理";
    Layout = "~/Views/Shared/_Edit.cshtml";
}
<div class="formbox1">
    <h2>
        <label id="lblTitle">新增</label>
        <span>注：以下带 <font class="red">*</font> 号表单为必填项</span>
    </h2>
    <form id="CpMaForm" name="ModuleForm">
        <table class="form_main" cellspacing="0" cellpadding="0">
            <tr>
                <td class="title">
                    名称：
                </td>
                <td class="main">
                    @Html.TextBox("CmpName", Model.CmpName, new { @class = "inputs hyfilterkey" })
                     <font class="red">*</font>
                </td>

                <td class="title">
                    助记码：
                </td>
                <td class="main">
                    @Html.TextBox("CmpShortName", Model.CmpShortName, new { @class = "inputs hyfilterkey" })
                </td>
            </tr>
            <tr>
                <td class="title">
                    上级公司：
                </td>
                <td class="main">
                    @Html.TextBox("ParentCompany",null, new { @class = "inputs" })
                </td>

                <td class="title">
                    公司性质：
                </td>
                <td class="main"></td>
            </tr>
            <tr>
                <td class="title">
                    法人：
                </td>
                <td class="main">
                    @Html.TextBox("txtCompanyBoss", null, new { @class = "inputs" })
                </td>

                <td class="title">
                    成立时间：
                </td>
                <td class="main">
                    @Html.TextBox("txtSetUpTime", null, new { @class = "inputs Wdate" })
                </td>
            </tr>
            <tr>
                <td class="title">
                    营业执照：
                </td>
                <td class="main">
                    @Html.TextBox("txtBusinessLicense", null, new { @class = "inputs" })
                </td>

                <td class="title">
                    纳税人识别号：
                </td>
                <td class="main">
                    @Html.TextBox("txtTaxpayerCode", null, new { @class = "inputs" })
                </td>
            </tr>
            <tr>
                <td class="title">
                    开户行：
                </td>
                <td class="main">
                    @Html.TextBox("txtOpeningBank", null, new { @class = "inputs" })
                </td>

                <td class="title">
                    银行账号：
                </td>
                <td class="main">
                    @Html.TextBox("txtBankAccount", null, new { @class = "inputs" })
                </td>
            </tr>
            <tr>
                <td class="title">
                    电话：
                </td>
                <td class="main">
                    @Html.TextBox("txtCompanyPhone", null, new { @class = "inputs" })
                </td>

                <td class="title">
                    传真：
                </td>
                <td class="main">
                    @Html.TextBox("txtCompanyFax", null, new { @class = "inputs" })
                </td>
            </tr>
            <tr>
                <td class="title">
                    地址：
                </td>
                <td class="main" colspan="3">
                    @Html.TextBox("txtCompanyAddress", null, new { @class = "inputs", @style = "width:97%" })
                </td>
            </tr>
            <tr>
                <td class="title">
                    公司简介：
                </td>
                <td style=" text-align:left; background-color:White;" colspan="3">
                    <div>
                        <input id="radChineseSummary" name="radSummary" type="radio" checked="checked" onclick="showSummary()" />中文
                        <input id="radEnglishSummary" name="radSummary" type="radio" onclick="showSummary()" />英文
                    </div>
                    <div style="display:block;" id="div_C">
                        @Html.TextArea("txtChineseSummary", null, new { @class = "inputs", @style = "width:97%;height:60px;" })
                    </div>
                    <div style="display:none;" id="div_E"></div>
                </td>
            </tr>
            <tr>
                <td class="title">
                    备注：
                </td>
                <td class="main" colspan="3">
                    @Html.TextArea("Remark", Model.Remark, new { @class = "inputs", @style = "width:97%;height:60px;" })
                </td>
            </tr>
            <tr>
                <td class="title">
                    状态：
                </td>
                <td class="main" colspan="3"></td>
            </tr>
        </table>
        @Html.Hidden("ParentNodeCode", Model.ParentNodeCode)
        @Html.Hidden("hddAcType", ViewData["AcType"])
        @Html.Hidden("hddIsSuccess", ViewData["vIsSuccess"])
    </form>
    <div class="form_bottom">
        <input type="button" id="btnSave" name="btnSave" class="button" value="保存" onclick="GetObjJstree();" />
        <input type="button" id="btnCancel" class="button" value="取消" onclick="window.close();" />
    </div>
    <footer>
        <script type="text/javascript">
            $("#btnSave").bind("click", function () {
                var vAcType = $("#hddAcType").val();
                var vParentNodeCode = $("#ParentNodeCode").val();
                global.doFormToJson("/OrgManage/SaveCpMaForm/" + vAcType + "/" + vParentNodeCode + "/" + global.rdm, "CompanyView", "CpMaForm");
                //
                //var isSuccess = $("#hddIsSuccess").val();
                //if (isSuccess) {
                //    var vNodeName = $("#txtCompanyName").val();
                //    var objTree = window.opener.window.AddJsTreeNode(vNodeName);
                //}
                var vNodeName = $("#CmpName").val();
                window.opener.window.AddJsTreeNode(vNodeName);
            })
        </script>
    </footer>
</div>

列表页面：

编辑的页面：

时间： 2024-08-10 21:15:20

一、母版页、子母版页、页面之间的关系的相关文章

项目分享三：页面之间的传值

一.回调函数的使用我们首先来看一下,页面间传值的一个经典例子,列表页与明细页之间的传值,如下面二张图所图.在列表页点击评价晒单,进入评价晒单页面,当用户在该页面完成操作后,列表页对应的选项,相应地改为“已评价".那么这个是怎么实现的呢?在这个案例里面,使用的是回调函数 ,我们来看一下相关的代码. 下面这段代码,是列表页的代码,当用户点击”评价晒单“按钮时,打开评价晒单详细页.关键点在于 evaluatePage['submited'] 这个回调函数. evaluate = (item) =&

MySQL---数据库从入门走上大神系列(四)-子查询、表与表之间的关系

本篇博客讲解(子查询)非相关子查询/相关子查询,一对一,一对多,多对一,多对的的关系! 准备: 首先我们创建一列sex.再为部分行设置好值0(女)或者1(男): delete from stud where age=26; 删除年龄为26的行. update stud set sex='1' where saddress like '湖南%'; 将地址中湖南开头的人的的sex修改为1. update stud set sex='0' where age>=30 and sex is null;

Iframe父页面与子页面之间的相互调用

iframe元素就是文档中的文档. window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象.但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者iframe标签),浏览器就会为原始文档创建一个window对象,再为每个iframe创建额外的window对象,这些额外的window对象是原始窗口的子窗口. contentWindow: 是指指定的iframe或者iframe所在的window对象 Demo1 父页面fu.html: <!DOCT

Iframe父页面与子页面之间的调用

专业词语解释如下: Iframe:iframe元素是文档中的文档. window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象.但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者iframe标签),浏览器就会为原始文档创建一个window对象,再为每个iframe创建额外的window对象,这些额外的window对象是原始窗口的子窗口. contentWindow: 是指指定的iframe或者iframe所在的window对象.

js父页面和子页面之间传值

今天和朋友一块讨论,怎样通过js在父页面和子页面之间传值的问题,总结例如以下: 需求描写叙述:父页面有多个子页面.实如今父页面点击子页面,传值到子页面. 看着非常easy,试了好久.主要纠结在怎样获取iframe,刚開始用document.getElementById('iframe的ID'),后来查资料才发现这样的方法仅仅是去取出了一个OBJECT,不能操作它的函数方法.后来改成window.iframes["iframe的name"],这样就能够获取子页面的整个DOM,能够操作它的

MVC中——Layout和ViewStart以及页面Index之间的关系

1._ViewStart.cshtml页面是整个MVC中,必定会加载的,它是在一般普通页面,如Index.cshtml页面之前加载. 2._ViewStart.cshtml初始加载页面中,页首一般会包含 @{ Layout = "~/Views/Shared/_Layout.cshtml"; } _Layout.cshtml这个布局页面 3.这样_ViewStart.cshtml._Layout.cshtml.Index.cshtml三个页面加载时候的先后顺序就是: _Layou

（转）C#/.NET主线程与子线程之间的关系

一般一个应用程序就对应一个进程,一个进程可有一个或多个线程,而一般有一个主线程. 有的博客上说“至少一个主线程”,这一说法持有怀疑主线程与子线程之间的关系 **默认情况,在新开启一个子线程的时候,他是前台线程,只有,将线程的IsBackground属性设为true;他才是后台线程 *当子线程是前台线程,则主线程结束并不影响其他线程的执行,只有所有前台线程都结束,程序结束 *当子线程是后台线程,则主线程的结束,会导致子线程的强迫结

iframe 父页面与子页面之间的方法的相互调用

如果你采用嵌入iframe机制,不可避免的要用到各个iframe页面之间方法和属性的相互调用.这里介绍的是兼容各个浏览器的iframe调用方式. 这里设定有3个页面,一个父页面main.html,它嵌入了两个iframe,分别是:childPage1.html和childPage2.html main.html有一个函数叫parentFunc().main.html代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN

3.5 盒子之间的关系

读者要理解前几节的内容并不困难,因为都只涉及一个盒子内部的关系.而实际网页往往是很复杂的,一个网页可能存在着大量的盒子,并且它们以各种关系相互影响着. 要把一个盒子与外部的其他盒子之间的关系理解清楚,并不是简单的事情.在很多CSS资料中大都通过简单的分类,就CSS本身的介绍来说明这个问题,往往只是就事论事.如果不能从站得更高的角度来理解这个问题,那么想真正搞懂它是很困难的,因此这里尝试从更深入的角度来介绍CSS与HTML的关系,希望对读者的理解有所帮助. 为了能够方便地组织各种盒子有序的排列和布