FineUIMvc的分部視圖鏈接器 --VS-- FineUIPro的用戶控件鏈接器

時間  2019-12-13
標籤 fineuimvc 分部 視圖 鏈接 fineuipro 用戶 控件 简体版
原文   原文鏈接

[FineUIPro]用戶控件

在FineUIPro中，咱們能夠將公用的部分定義爲一個用戶控件，而後添加到頁面中。html

一個簡單的示例：http://pro.fineui.com/#/usercontrol/userinfo.aspxmvc

首先定義用戶控件：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做爲三個基本的參數，分別對應某個用戶的姓名、年齡和籍貫。ui

在頁面中直接使用此用戶控件：spa

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

使用本用戶控件遵照先聲明再引用的規則：3d

1. 使用 Register 指令來定義用戶控件標籤前綴爲 uc1。code

2. 在頁面中直接插入：uc1:UserInfoControl 便可。orm

本例中，使用ContentPanel做爲容器，由於能夠直接在ContentPanel中放置HTML標籤，而用戶控件也屬於HTML標籤的一個擴展，因此能夠直接使用。server

頁面效果：

 

[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 新增控件，需等待新版發佈後纔可使用。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程