将动态属性绑定到用户控件

Question

Hi fellow stackoverflowers (if that is a word!),

I am trying to have a user control with dynamic properties but can't get it to work the way I want. The purpose of the control is to have generic AddThis widget that designers can put inside ASPX without developers having to do anything in ASPX.CS. Previously, I have only set the dynamic properties of user control inside codebehind of ASPX page, but now it seems too much hassle to get both programmers and designers involved in simple tasks like this.

This is my code:

User Control Code (ASCX):

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AddThisSocial.ascx.cs"
    Inherits="MyWebsite.Controls.AddThisSocial" %>
<!-- Begin AddThis Social Share -->
<div class="addthis_toolbox addthis_default_style" addthis:url="<%=Url%>" addthis:title="<%=Title %>"
    addthis:description="<%=Description%>">
    <%
        if (Facebook)
        {
    %>
    <a class="addthis_button_facebook" title="Send to Facebook" style="margin-top: 5px;">
    </a>
    <%
        }
    %>
    <%
        if (Twitter)
        {
    %>
    <a class="addthis_button_twitter" title="Send to Twitter" style="margin-top: 5px;">
    </a>
    <%
        }
    %>
    <%
        if (Google)
        {
    %>
    <a class="addthis_button_google" title="Send to Google" style="margin-top: 5px;">
    </a>
    <%
        }
    %>
    <%
        if (Pinterest)
        {
    %>
    <a class="addthis_button_pinterest_pinit" style="margin-top: 0px;">
    </a>
    <%
        }
    %>
    <%
        if (CompactButton)
        {
    %>
    <a class="addthis_button_compact" style="margin-top: 5px;"></a>
    <%
        }
    %>
</div>
<!-- End AddThis Social Share -->

User Control Code (ASCX.CS):

namespace MyWebsite.Controls
{
    public partial class AddThisSocial : System.Web.UI.UserControl
    {

        #region Public Properties

        public string Url { get; set; }        
        public string Title { get; set; }        
        public string Description { get; set; }        
        public string ImageUrl { get; set; }

        [DefaultValue("False")]        
        public Boolean Facebook { get; set; }
        [DefaultValue("False")]        
        public Boolean Twitter { get; set; }
        [DefaultValue("False")]        
        public Boolean Google { get; set; }
        [DefaultValue("False")]        
        public Boolean Pinterest { get; set; }
        [DefaultValue("False")]        
        public Boolean CompactButton { get; set; }

        #endregion

        #region Page Events

        protected void Page_Load(object sender, EventArgs e)
        {

            // facebook doesn't like addthis attributes - add opengraph attributes seperately
            var page = HttpContext.Current.Handler as Page;
            if (page == null) return;

            if(!String.IsNullOrEmpty(Url))
            {
                var mUrl = new HtmlMeta();
                mUrl.Attributes.Add("property", "og:url");
                mUrl.Attributes.Add("content", Url);
                page.Header.Controls.Add(mUrl);
            }

            if (!String.IsNullOrEmpty(Title))
            {
                var mTitle = new HtmlMeta();
                mTitle.Attributes.Add("property", "og:title");
                mTitle.Attributes.Add("content", Server.HtmlEncode(Title));
                page.Header.Controls.Add(mTitle);
            }

            if (!String.IsNullOrEmpty(Description))
            {
                var mDescription = new HtmlMeta();
                mDescription.Attributes.Add("property", "og:description");
                mDescription.Attributes.Add("content", Server.HtmlEncode(Description));
                page.Header.Controls.Add(mDescription);
            }

            if (!String.IsNullOrEmpty(ImageUrl))
            {
                var mImageUrl = new HtmlMeta();
                mImageUrl.Attributes.Add("property", "og:image");
                mImageUrl.Attributes.Add("content", ImageUrl);
                page.Header.Controls.Add(mImageUrl);
            }

        }

        #endregion

    }
}

Part of ASPX Page Code:

<MyWebsite:AddThisSocial runat="server" ID="ProductAddThisSocial" Description="<%# Eval("Description") %>" ImageUrl="<%= GetImageUrl() %>" Facebook="True" Twitter="True" Google="True" CompactButton="True" Pinterest="True" />

The above doesn't work, whereas if I set static strings to the controls, it works.

<MyWebsite:AddThisSocial runat="server" ID="ProductAddThisSocial" Description="My Description" ImageUrl="My Image Url" Facebook="True" Twitter="True" Google="True" CompactButton="True" Pinterest="True" />

I have done debugging of this and it makes sense that this doesn't work after reading about this on the web. The control properties aren't initialised at the time of the parent page's load method. I have also tried setting properties to bindable and changing the page_load to page_prerender method without any luck. I need to find a solution to this that will allow me to not have control properties set in code-behind somehow. Can anyone help?

Thanks, Hiral

Answer 1

Have a look at these posts. Basically you need to utilise Render method and ViewState to get your properties binding:

ASP.NET User Control : can't initialize a user control property using Eval("...")

Stumped With Custom Property on User Control