FineUIMvc的分部视图连接器 --VS-- FineUIPro的用户控件连接器
[FineUIPro]用户控件
在FineUIPro中，我们可以将公用的部分定义为一个用户控件，然后添加到页面中。
一个简单的示例：http://pro.fineui.com/#/usercontrol/userinfo.aspx
首先定义用户控件：UserInfoControl
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UserInfoControl.ascx.cs"
Inherits="FineUIPro.Examples.usercontrol.UserInfoControl" %> <f:Panel runat="server" ID="Panel1" BodyPadding="10px" Title="用户控件">
<Items>
<f:Label runat="server" ID="labUserInfo">
</f:Label>
</Items>
</f:Panel>
这个用户控件可以接受一系列的参数，这些参数是在后台C#类中定义的：
public partial class UserInfoControl : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
LoadData();
}
} private void LoadData()
{ labUserInfo.Text = String.Format("{0}今年{1}岁，住在{2}。", UserName, UserAge, UserCountry); // 布局相关定义
if (BoxFlex != null)
{
Panel1.BoxFlex = BoxFlex.Value;
} if (!String.IsNullOrEmpty(Margin))
{
Panel1.Margin = Margin;
}
} private int? boxFlex;
public int? BoxFlex
{
get { return boxFlex; }
set { boxFlex = value; }
} private string margin;
public string Margin
{
get { return margin; }
set { margin = value; }
} private string userName;
public string UserName
{
get { return userName; }
set { userName = value; }
} private int userAge;
public int UserAge
{
get { return userAge; }
set { userAge = value; }
} private string userCountry;
public string UserCountry
{
get { return userCountry; }
set { userCountry = value; }
}
}
UserName，UserAge和UserCountry作为三个基本的参数，分别对应某个用户的姓名、年龄和籍贯。
在页面中直接使用此用户控件：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="userinfo.aspx.cs" Inherits="FineUIPro.Examples.usercontrol.userinfo" %> <%@ Register Src="UserInfoControl.ascx" TagName="UserInfoControl" TagPrefix="uc1" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<meta name="sourcefiles" content="~/usercontrol/UserInfoControl.ascx" />
</head>
<body>
<form id="form1" runat="server">
<f:PageManager ID="PageManager1" runat="server"></f:PageManager>
<f:ContentPanel runat="server" ID="Panel1" IsFluid="true" CssClass="blockpanel" EnableCollapse="false"
BodyPadding="10px" Height="200px" Title="面板一（ContentPanel->UserInfoControl）">
<uc1:UserInfoControl ID="UserInfoControl1" UserName="陈萍萍" UserAge="20" UserCountry="合肥"
runat="server" />
</f:ContentPanel>
</form>
</body>
</html>
使用本用户控件遵守先声明再引用的规则：
1. 使用 Register 指令来定义用户控件标签前缀为 uc1。
2. 在页面中直接插入：uc1:UserInfoControl 即可。
本例中，使用ContentPanel作为容器，因为可以直接在ContentPanel中放置HTML标签，而用户控件也属于HTML标签的一个扩展，所以可以直接使用。
页面效果：
[FineUIPro]用户控件连接器
上面介绍的用户控件和用法属于ASP.NET的原生支持，FineUIPro没有做任何扩展。但是仅仅是这样远远不够，因为FineUIPro要对控件的位置做精确的定位。
这就需要用到布局！而布局是层层嵌套的，如果将用户控件放到父页面的布局结构中呢？
FineUIPro给出了自己的解决方案，这就是：UserControlConnector
基本用法如下：
<f:Panel runat="server" ID="Panel3" IsFluid="true" CssClass="blockpanel" Height="200px" EnableCollapse="false" BodyPadding="10px"
Layout="Fit" Title="面板三（Layout=Fit, Panel->UserControlConnector->UserInfoControl）">
<Items>
<f:UserControlConnector runat="server">
<uc1:UserInfoControl ID="UserInfoControl3" UserName="陈萍萍" UserAge="20" UserCountry="合肥"
runat="server" />
</f:UserControlConnector>
</Items>
</f:Panel>
在这个示例中，有如下布局相关构思：
1. 最外层 Panel3 拥有 Layout=Fit 布局定义，也就是希望内部放置一个 FineUIPro 子容器
2. 子容器通过 UserInfoControl 来定义，外部嵌套一个 UserControlConnector 控件
3. UserInfoControl 中只放置一个 FineUIPro 控件：Panel
注：UserInfoControl 无法直接放到Items 标签中，因为它不是 FineUIPro 控件。
页面显示效果：
可以看到，Layout=Fit布局已经生效，内部面板已经占据了面板三的全部高度，可以和上一个示例对比下显示效果。
而用户控件连接器的作用仅用于将用户控件连接到 FineUIPro 的页面层次结构中并参与布局，本身并不显示和输出！
[FineUIPro]用户控件连接器与复杂布局
用户控件连接器可以参与复杂的布局，请看下面这个例子：
<f:Panel runat="server" ID="Panel2" IsFluid="true" CssClass="blockpanel" EnableCollapse="false"
Height="300px" Layout="VBox"
BodyPadding="10px" BoxConfigChildMargin="0 0 5 0" Title="面板三">
<Items>
<f:UserControlConnector ID="UserControlConnector2" runat="server">
<uc1:UserInfoControl ID="UserInfoControl2" UserName="陈萍萍" BoxFlex="1" UserAge="20" UserCountry="合肥"
runat="server" />
</f:UserControlConnector>
<f:UserControlConnector ID="UserControlConnector3" runat="server">
<uc1:UserInfoControl ID="UserInfoControl3" Margin="0" BoxFlex="1" UserName="胡斐" UserAge="22" UserCountry="驻马店"
runat="server" />
</f:UserControlConnector>
</Items>
</f:Panel>
有关布局的信息：
1. 最外层面板定义了 Layout=VBox 布局
2. 两个子容器分别定义布局属性 BoxFlex=1，标识两个子容器高度相同，平分父容器的整个空间。
页面显示效果：
将此示例稍作修改，把父容器的布局改为Layout=HBox，并修改BoxConfigChildMargin属性（定义子容器的外边距）：
<f:Panel runat="server" ID="Panel5" IsFluid="true" CssClass="blockpanel" EnableCollapse="false"
Height="300px" Layout="HBox"
BodyPadding="10px" BoxConfigChildMargin="0 5 0 0" Title="面板三">
<Items>
<f:UserControlConnector ID="UserControlConnector5" runat="server">
<uc1:UserInfoControl ID="UserInfoControl6" UserName="陈萍萍" BoxFlex="1" UserAge="20" UserCountry="合肥"
runat="server" />
</f:UserControlConnector>
<f:UserControlConnector ID="UserControlConnector6" runat="server">
<uc1:UserInfoControl ID="UserInfoControl7" Margin="0" BoxFlex="1" UserName="胡斐" UserAge="22" UserCountry="驻马店"
runat="server" />
</f:UserControlConnector>
</Items>
</f:Panel>
现在页面的显示效果：
=========================================================================================
=====我是分割线=========我是分割线==========我是分割线============我是分割线===================
=========================================================================================
[FineUIMvc]分部视图
在FineUIMvc中，我们可以将公用的部分定义为一个分部视图，然后添加到页面中。
一个简单的示例：http://mvc.fineui.com/#/Partial/Partial
注：本连接尚不可用，需等待 FineUIMvc v5.3.0 发布后上线。
首先定义用户控件：PartialView
@{
var F = Html.F();
}
@{
var UserName = ViewData["UserName"].ToString();
var UserAge = Convert.ToInt32(ViewData["UserAge"]);
var UserCountry = ViewData["UserCountry"].ToString();
}
@{
var Panel1 = F.Panel().BodyPadding(10).Title("分部视图")
.Items(
F.Label().ID("labUserInfo").Text(String.Format("{0}今年{1}岁，住在{2}。", UserName, UserAge, UserCountry))
);
if (ViewData["BoxFlex"] != null)
{
Panel1.BoxFlex(Convert.ToInt32(ViewData["BoxFlex"]));
}
if (ViewData["Margin"] != null)
{
Panel1.Margin(Convert.ToInt32(ViewData["Margin"]));
}
}
@(Panel1)
这个用户控件可以接受一系列的参数，这些参数可以直接定义在视图中，参数是通过ViewData传入的。
UserName，UserAge和UserCountry作为三个基本的参数，分别对应某个用户的姓名、年龄和籍贯。
在页面中直接使用此用户控件：
<div id="container1">
@(Html.Partial("PartialView", new ViewDataDictionary(ViewData) { { "UserName", "陈萍萍" }, { "UserAge", 20 }, { "UserCountry", "合肥" } }))
</div> @(F.Panel().ID("Panel1").IsFluid(true).CssClass("blockpanel").EnableCollapse(false).BodyPadding(10).Height(200).Title("面板一（Panel->PartialView）").ContentEl("#container1")
)
使用Html.Partial直接在父页面中引入分部视图：
1. Html.Partial的第一个参数指定分部视图的名称
2. 第二个参数指定传入分部视图的参数ViewData。
本例中，使用 Panel 作为容器，由于不能在Panel中放置HTML标签，所以我们将分部视图渲染到一个DIV节点中（id=content1），然后在Panel1中使用 Content("#container1") 来调用。
页面效果：
[FineUIMvc]分部视图连接器
上面介绍的用户控件和用法属于ASP.NET MVC的原生支持，FineUIMvc没有做任何扩展。但是仅仅是这样远远不够，因为FineUIMvc要对控件的位置做精确的定位。
这就需要用到布局！而布局是层层嵌套的，如果将用户控件放到父页面的布局结构中呢？
FineUIMvc给出了自己的解决方案，这就是：PartialConnector
基本用法如下：
@(F.Panel().ID("Panel3").IsFluid(true).CssClass("blockpanel").Height(200).EnableCollapse(false).BodyPadding(10).Layout(LayoutType.Fit).Title("面板三（Layout=Fit, Panel->PartialConnector->PartialView）")
.Items(
F.PartialConnector().Content(Html.Partial("PartialView", new ViewDataDictionary(ViewData) { { "UserName", "陈萍萍" }, { "UserAge", 20 }, { "UserCountry", "合肥" } }))
)
)
在这个示例中，有如下布局相关构思：
1. 最外层 Panel3 拥有 Layout=Fit 布局定义，也就是希望内部放置一个 FineUIMvc 子容器
2. 子容器通过 Html.Partial 来引入，外部嵌套一个 PartialConnector 控件
3. PartialView 中只放置一个 FineUIMvc 控件：Panel
注：Html.Partial 无法直接放到 Items 属性中，因为它不是 FineUIMvc 控件扩展。
页面显示效果：
可以看到，Layout=Fit布局已经生效，内部面板已经占据了面板三的全部高度，可以和上一个示例对比下显示效果。
而分部视图连接器的作用仅用于将分部视图连接到 FineUIMvc 的页面层次结构中并参与布局，本身并不显示和输出！
[FineUIMvc]分部视图连接器与复杂布局
分部视图连接器可以参与复杂的布局，请看下面这个例子：
@(F.Panel().ID("Panel2").IsFluid(true).CssClass("blockpanel").EnableCollapse(false).Height(300).Layout(LayoutType.VBox).BodyPadding(10).BoxConfigChildMargin("0 0 5 0").Title("面板三")
.Items(
F.PartialConnector().Content(Html.Partial("PartialView", new ViewDataDictionary(ViewData) { { "UserName", "陈萍萍" }, { "UserAge", 20 }, { "UserCountry", "合肥" }, { "BoxFlex", 1 } })),
F.PartialConnector().Content(Html.Partial("PartialView", new ViewDataDictionary(ViewData) { { "UserName", "胡斐" }, { "UserAge", 22 }, { "UserCountry", "驻马店" }, { "BoxFlex", 1 }, { "Margin", 0} }))
)
)
有关布局的信息：
1. 最外层面板定义了 Layout=VBox 布局
2. 两个子容器分别定义布局属性 BoxFlex=1，标识两个子容器高度相同，平分父容器的整个空间。
页面显示效果：
将此示例稍作修改，把父容器的布局改为Layout=HBox，并修改BoxConfigChildMargin属性（定义子容器的外边距）：
@(F.Panel().ID("Panel4").IsFluid(true).CssClass("blockpanel").EnableCollapse(false).Height(300).Layout(LayoutType.HBox).BodyPadding(10).BoxConfigChildMargin("0 5 0 0").Title("面板四")
.Items(
F.PartialConnector().Content(Html.Partial("PartialView", new ViewDataDictionary(ViewData) { { "UserName", "陈萍萍" }, { "UserAge", 20 }, { "UserCountry", "合肥" }, { "BoxFlex", 1 } })),
F.PartialConnector().Content(Html.Partial("PartialView", new ViewDataDictionary(ViewData) { { "UserName", "陈萍萍" }, { "UserAge", 20 }, { "UserCountry", "合肥" }, { "BoxFlex", 1 }, { "Margin", 0 } }))
)
)
现在页面的显示效果：
小结
为了在 FineUIMvc 中使用分部视图，并在页面层次结构中引入分部视图并参与布局，我们引入了 PartialConnector 控件，这个控件的作用仅用于连接分部视图和现有的FineUIMvc控件，本身不会在页面上显示。通过这篇文章的对比，我们可以发现 FineUIMvc 中新引入的 PartialConnector 控件和我们之前在 FineUIPro 用的 UserControlConnector 几乎一模一样，方便老用户学习和使用，看似不起眼的相似印证了我们的一贯的坚持和一切为了简单的理念。
注：FineUIMvc 中的 PartialConnector 属于 v5.3.0 新增控件，需等待新版发布后才可以使用。
FineUIMvc的分部视图连接器 --VS-- FineUIPro的用户控件连接器的更多相关文章
- 【MVC】视图页引用分部视图（WebForm叫做用户控件）
方法一.不经过控制器.动作方法,直接返回Html @Html.Partial("Head","我可以给分布视图传数据") Head是Views/Shared/H ...
- vs2010 视图 aspx页面设计窗口创建控件时出错 未将对象引用设置到对象的实例
第一步,首先关闭aspx页面 第二步,在单击项目右击,选择“清理” 第三步,然后在打开aspx页面,就可以看到正常的页面了. 注:一次不行的会,多做几次. 如果还是不行的话,你看看你.cs页面是否继承 ...
- NFinal 视图—用户控件
自定义控件 定义控件 以Label控件为例: 1.首先在Common文件夹下添加Label.cs文件,其中代码如下: //a.control的实体类必须继承NFinal.UserControl类 pu ...
- asp.net mvc视图中嵌套分部视图
asp.net mvc中Layout相当于webForm中母版页,分部视图相当于webForm中的用户控件. 下面例子是一个视图如何嵌套分部视图: A是分部视图,B是一般视图(A,B中的代码省略) 我 ...
- [转载]ASP.NET MVC 3的分部视图
1.什么是分部视图,我们应该什么时候应该用? 作为一个对ASP.NET MVC 模型很熟悉的开发者,他们自然想创建一个内容和代码都可以重用的组件,在web 窗体,我们可以创建一个web用户控件或web ...
- MVC4商城项目三：分部视图在导航条上的应用
写了几天发觉大部分时间用在JS上了,本来想写个musicstore,却加了框架,然后又想用后台,然后又想用上bootstrapt,然后又想弄权限设计,然后又想………… 看来是想多了~ 好吧,最近把后台 ...
- MVC中的分部视图
背景: 项目的工期马上就要到了,由于后台封装的很好,我们只需要用心熟悉框架,接下来后台的工作就是简单的代码工作了.原本以为最困难的时期已经过去,可没想到前台才是最困难的. B/S的基础十分薄弱,加上B ...
- MVC学习七：Razor布局之加载分部视图【PartialView】
Partial View 顾名思义就是Html代码片段,应用于此HTML代码多次被页面加载时使用.(类似于WebForm程序中的用户控件) 注:PartialView和正常的View页面在访问时没有任 ...
- 学习方法和阶段介绍 、 iOS界面开发引入 、 构造第一个App 、 视图控制器和视图 、 控件与事件 、 InterfaceBuilder
1 创建并运行第一个App 1.1 问题 使用Xcode创建一个App项目,该应用实现功能在界面上显示Hello World标签,在模拟器中的运行结果如图-1所示: 图-1 1.2 方案 分析图-1, ...
随机推荐
- Cocoa包管理器之Carthage详解及CocoaPods中心化+Carthage的二进制化
上篇博客详细的聊了CocoaPods的相关内容,今天我们就来介绍另一个Cocoa的包管理器Carthage.在上家公司用Swift开发工程时,用的就是Carthage.Carthage诞生于14年11 ...
- Java原子类操作原理剖析
◆CAS的概念◆ 对于并发控制来说,使用锁是一种悲观的策略.它总是假设每次请求都会产生冲突,如果多个线程请求同一个资源,则使用锁宁可牺牲性能也要保证线程安全.而无锁则是比较乐观的看待这个问题,它会假设 ...
- 2020考研-必须了解的干货"极限微分和你说的悄悄话"
极限微分和你说的悄悄话 2019-03-02 RunWsh 美食供应商有考研学子 想必接触过数学或物理的都对牛顿和莱布尼兹不陌生.如果你是考研大军中的一员,估计天天会与他们眉来眼去的吧! 牛顿莱布:别 ...
- RomUtil【Android判断手机ROM，用于判断手机机型】
参考资料 Android判断手机ROM 正文 有时候需要判断手机系统的ROM,检测ROM是MIUI.EMUI还是Flyme,可以使用getprop命令,去系统build.prop文件查找是否有对应属性 ...
- Android 性能测试优质实践汇总
这两天把testerhome上的关于Android 性能测试的精品文章看了一遍,很有收获,学习到了Android 性能测试该关注的一些细节.我所说的“精品”是指对我自己有启发的文章,可以被自己运用起来 ...
- [个人网站搭建]·Django增加评论功能(Python3)
[个人网站搭建]·Django增加评论功能 个人主页--> https://xiaosongshine.github.io/ 个人网站搭建github地址:https://github.com/ ...
- Asp.Net Core 轻松学-利用 Swagger 自动生成接口文档
前言 目前市场上主流的开发模式,几乎清一色的前后端分离方式,作为服务端开发人员,我们有义务提供给各个客户端良好的开发文档,以方便对接,减少沟通时间,提高开发效率:对于开发人员来说,编写接口文档 ...
- SAMBA服务和FTP服务讲解（week3_day1）--技术流ken
samba服务 Smb主要作为网络通信协议; Smb是基于cs架构: 完成Linux与windows之间的共享:linux与linux之间共享用NFS 第一步:安装samba [root@ken ~] ...
- C++项目中采用CLR的方式调用C#编写的dll
1.注意事项:在编写C#DLL类库时,最好不要出现相同的命名空间,否则在C++中调用可能会出现编译错误.2.将C#的源码生成的“dll”文件复制到C++项目中的Debug目录下3.将C++项目属性设置 ...
- 程序猿想聊天 - 創問 4C 團隊教練心得(二)
在第二天裡,主要談的是關於 Courage (勇氣) . Co-Create (共創) 的部分因為我們不是真實的團隊,就沒有繼續下去了 一早開始先回顧了一下前一天的內容,接下來我們就開始玩小遊戲 這個 ...