[FineUIPro]用户控件 在FineUIPro中，我们可以将公用的部分定义为一个用户控件，然后添加到页面中。 一个简单的示例：http://pro.fineui.com/#/usercontrol/userinfo.aspx 首先定义用户控件：UserInfoControl 复制代码 <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UserInfoControl.ascx.cs" Inherits="FineUIPro.Examples.usercontrol.UserInfoControl" %> 复制代码 这个用户控件可以接受一系列的参数，这些参数是在后台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" %>

复制代码 使用本用户控件遵守先声明再引用的规则： 1. 使用 Register 指令来定义用户控件标签前缀为 uc1。 2. 在页面中直接插入：uc1:UserInfoControl 即可。 本例中，使用ContentPanel作为容器，因为可以直接在ContentPanel中放置HTML标签，而用户控件也属于HTML标签的一个扩展，所以可以直接使用。 页面效果： [FineUIPro]用户控件连接器 上面介绍的用户控件和用法属于ASP.NET的原生支持，FineUIPro没有做任何扩展。但是仅仅是这样远远不够，因为FineUIPro要对控件的位置做精确的定位。 这就需要用到布局！而布局是层层嵌套的，如果将用户控件放到父页面的布局结构中呢？ FineUIPro给出了自己的解决方案，这就是：UserControlConnector 基本用法如下： 复制代码 复制代码 在这个示例中，有如下布局相关构思： 1. 最外层 Panel3 拥有 Layout=Fit 布局定义，也就是希望内部放置一个 FineUIPro 子容器 2. 子容器通过 UserInfoControl 来定义，外部嵌套一个 UserControlConnector 控件 3. UserInfoControl 中只放置一个 FineUIPro 控件：Panel 注：UserInfoControl 无法直接放到Items 标签中，因为它不是 FineUIPro 控件。 页面显示效果： 可以看到，Layout=Fit布局已经生效，内部面板已经占据了面板三的全部高度，可以和上一个示例对比下显示效果。 而用户控件连接器的作用仅用于将用户控件连接到 FineUIPro 的页面层次结构中并参与布局，本身并不显示和输出！ [FineUIPro]用户控件连接器与复杂布局 用户控件连接器可以参与复杂的布局，请看下面这个例子： 复制代码 复制代码 有关布局的信息： 1. 最外层面板定义了 Layout=VBox 布局 2. 两个子容器分别定义布局属性 BoxFlex=1，标识两个子容器高度相同，平分父容器的整个空间。 页面显示效果： 将此示例稍作修改，把父容器的布局改为Layout=HBox，并修改BoxConfigChildMargin属性（定义子容器的外边距）： 复制代码 复制代码 现在页面的显示效果： ========================================================================================= =====我是分割线=========我是分割线==========我是分割线============我是分割线=================== ========================================================================================= [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作为三个基本的参数，分别对应某个用户的姓名、年龄和籍贯。 在页面中直接使用此用户控件： 复制代码 @(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，标识两个子容器高度相同，平分父容器的整个空间。https://www.cnblogs.com/sanshi/p/9834657.html