在模板中插入我的.NET控件

Question

我是ASP.NET的新手。 作為本帖子的后續問題，我在Ektron中具有以下.Net控件，我想在網頁模板中顯示該控件。

控制：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Gallery.ascx.cs" Inherits="Source_Controls_Alumni_Gallery" %>
<asp:ListView ID="uxPhotoGallery" runat="server" ItemPlaceholderID="itemPlaceholder">
    <LayoutTemplate>
        <ul>
            <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
        </ul>
    </LayoutTemplate>
    <ItemTemplate>
        <li>
            <%-- 
                I'm mixing up two different ways of referencing the incoming data. One is by casting
                the DataItem to the incoming type, which gives you intellisense access to the properties.

                The other is more of a dictionary approach in which you have to type out the property name 
                as a string.

                I really like the casting approach, but it's mega-wordy.
                 --%>
            <a href="<%#((Ektron.Custom.ViewModels.PressPhotoViewModel)Container.DataItem).ImageUrl %>">
                <img src="<%#((Ektron.Custom.ViewModels.PressPhotoViewModel)Container.DataItem).ImageUrl %>" alt="<%#Eval("Description") %>" />
                <div><%#Eval("Description") %></div>
            </a>
        </li>
    </ItemTemplate>
</asp:ListView>

和后面的代碼：

using Ektron.Custom.SmartForms;
using System;
using System.Linq;

public partial class Source_Controls_Alumni_Gallery : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        var pressPhotoManager = new PressPhotoManager();

        // Whichever folder Id... 
        var photos = pressPhotoManager.GetList(75);

        if (photos != null && photos.Any())
        {
            uxPhotoGallery.DataSource = photos;
            uxPhotoGallery.DataBind();
        }
    }
}

我想將控件插入此模板：

<%@ Page Title="" Language="C#" MasterPageFile="~/Source/Masterpages/MainMaster.master" AutoEventWireup="true" CodeFile="AlumniJobOpenings.aspx.cs" Inherits="Source_Templates_AlumniJobOpenings" %>

<%@ Register Src="~/Source/Controls/SubHeader.ascx" TagPrefix="uc1" TagName="SubHeader" %>
<%@ Register Src="~/Source/Controls/Shared/PrimarySection.ascx" TagPrefix="uc1" TagName="PrimarySection" %>
<%@ Register Src="~/Source/Controls/JoinUs/StaffAndParalegals/SPOpenings.ascx" TagPrefix="uc1" TagName="SPOpenings" %>
<%@ Register Src="~/Source/Controls/JoinUs/StaffAndParalegals/SPFilters.ascx" TagPrefix="uc1" TagName="SPFilters" %>
<%@ Register Src="~/Source/Controls/Shared/RelatedContentModules.ascx" TagPrefix="uc1" TagName="RelatedContentModules" %>
<%@ Register Src="~/Source/Controls/JoinUs/StaffAndParalegals/SPContactDetails.ascx" TagPrefix="uc1" TagName="SPContactDetails" %>
<%@ Register Src="~/Source/Controls/Shared/TextImageAssetBlockModules.ascx" TagPrefix="uc1" TagName="TextImageAssetBlockModules" %>
<%@ Register Src="~/Source/Controls/Shared/TextLinkBlockControl.ascx" TagPrefix="uc1" TagName="TextLinkBlockControl" %>
<%@ Register TagPrefix="sp" TagName="Spinner" Src="~/Source/Controls/Alumni/Gallery.ascx" %>




<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <uc1:SubHeader runat="server" ID="SubHeader" />
    <div class="container non-responsive">
        <div class="row">
            <div class="col-sm-8 alpha">
                <uc1:PrimarySection runat="server" ID="PrimarySection" />
                <div class="primary">
                    <div class="container non-responsive">
                        <div class="row">
                            <div class="col-sm-8 alpha">
                                <div class="primary">
                                    IMAGE GALLERY LIST SHOULD BE INSERTED HERE.
                                </div>
                            </div>
                            <div class="col-sm-4 beta">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 beta">
                <uc1:SPContactDetails runat="server" ID="SPContactDetails" />
                <uc1:SPFilters runat="server" ID="SPFilters" Heading="Staff and Paralegal Openings" Text="Select an office below to learn more about current opportunities" />
                <uc1:RelatedContentModules runat="server" ID="RelatedContentModules" />
                <uc1:TextLinkBlockControl runat="server" ID="TextLinkBlockControl" />
                <uc1:TextImageAssetBlockModules runat="server" ID="TextImageAssetBlockModules" />
            </div>
        </div>
    </div>
</asp:Content>

Answer 1

這是您的頂部行：

<%@ Register TagPrefix="sp" TagName="Spinner" Src="~/Source/Controls/Alumni/Gallery.ascx" %>

和用於在同一頁面中注冊另一個控件的類似行：

<%@ Register Src="~/Source/Controls/SubHeader.ascx" TagPrefix="uc1" TagName="SubHeader" %>

現在，看看上面引用的現有項的控件位置。

<uc1:SubHeader runat="server" ID="SubHeader" />

您會發現，放置標記由<%@ Register ... %>行中的已配置屬性組成。 具體來說，是TagPrefix和TagName值。 您將按照以下格式使用這些值來設置自己的控件位置：

<TagPrefix:TagName runat="server" ID="SomeUniqueID" [optional parameters] />

因此，就您的控件而言，您已經設置了TagPrefix="sp"和TagName="Spinner" 。 因此，您的控件放置應如下所示：

<sp:Spinner runat="server" ID="uxAlumniSpinner" />

（ID是一個示例）

在您的控制代碼中，您沒有配置任何參數，因此上面的方法可以正常工作。 但是您可以至少提供一個參數，並且可能應該這樣做才能使控件更可重用。

例如，您在方法調用中的硬編碼值為75 。 我認為這指向的是Ektron文件夾，分類法或集合。 無論如何，它是一些容器ID。 您可能希望在多個地方使用此控件，這些地方的數據來源不同-容器的ID不同。 設置方式上，您每次必須更新控件以更新該值。

因此，如果我們在您的控件中添加一個公共屬性，那么后面的代碼將如下所示：

using Ektron.Custom.SmartForms;
using System;
using System.Linq;

public partial class Source_Controls_Alumni_Gallery : System.Web.UI.UserControl
{

    // Added Property
    private long _containerId = 0;
    public long ContainerID {
        get { return _containerId; }
        set { _containerId = value; }
    }
    /////////

    protected void Page_Load(object sender, EventArgs e)
    {
        // Added inverted conditional to escape method 
        // if the _containerId is invalid.
        if(_containerId <= 0) return;
        ///////////

        var pressPhotoManager = new PressPhotoManager();

        // Whichever folder Id... 
        var photos = pressPhotoManager.GetList(_containerId);

        if (photos != null && photos.Any())
        {
            uxPhotoGallery.DataSource = photos;
            uxPhotoGallery.DataBind();
        }
    }
}

然后，您可以隨時隨地在指定控件時指定容器ID。 像這樣：

<sp:Spinner runat="server" ID="uxAlumniSpinner" ContainerID="75" />

進行最終的模板內標記：

<%@ Register Src="~/Source/Controls/JoinUs/StaffAndParalegals/SPContactDetails.ascx" TagPrefix="uc1" TagName="SPContactDetails" %>
<%@ Register Src="~/Source/Controls/Shared/TextImageAssetBlockModules.ascx" TagPrefix="uc1" TagName="TextImageAssetBlockModules" %>
<%@ Register Src="~/Source/Controls/Shared/TextLinkBlockControl.ascx" TagPrefix="uc1" TagName="TextLinkBlockControl" %>
<%@ Register TagPrefix="sp" TagName="Spinner" Src="~/Source/Controls/Alumni/Gallery.ascx" %>


<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <uc1:SubHeader runat="server" ID="SubHeader" />
    <div class="container non-responsive">
        <div class="row">
            <div class="col-sm-8 alpha">
                <uc1:PrimarySection runat="server" ID="PrimarySection" />
                <div class="primary">
                    <div class="container non-responsive">
                        <div class="row">
                            <div class="col-sm-8 alpha">
                                <div class="primary">
                                    <sp:Spinner runat="server" ID="uxAlumniSpinner" ContainerID="75" />
                                </div>
                            </div>
                            <div class="col-sm-4 beta">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 beta">
                <uc1:SPContactDetails runat="server" ID="SPContactDetails" />
                <uc1:SPFilters runat="server" ID="SPFilters" Heading="Staff and Paralegal Openings" Text="Select an office below to learn more about current opportunities" />
                <uc1:RelatedContentModules runat="server" ID="RelatedContentModules" />
                <uc1:TextLinkBlockControl runat="server" ID="TextLinkBlockControl" />
                <uc1:TextImageAssetBlockModules runat="server" ID="TextImageAssetBlockModules" />
            </div>
        </div>
    </div>
</asp:Content>