在模板中插入我的 .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）的多个地方使用此控件。按照您的设置方式，您每次都必须创建一个新控件来更新该值。

因此，如果我们将 public 属性添加到您的控件中，那么代码隐藏将如下所示：

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>

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

Insert My .NET Control In Template

c#

asp.net

ektron