0

I have a Visual WebPart being used on a self-hosted SharePoint 2013 stack.

Problem is that in the WebPart design file, I have a Style tag <style>.. with some definitions for how certain sections of the webpart should render, etc.

That being said when I goto see the result, Nothing comes across.

Source:


WebPart.ascx:

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SimplePollWebPart.ascx.cs" Inherits="PollPart_Simple.SimplePollWebPart.SimplePollWebPart" %>
<style type="text/css">
    table {
        width: 100%;
        border: none;
        border-collapse: collapse;
    }

    #pnlView dt {
        padding: 4px;
    }

    #pnlView dd {
        height: 40px;
        display: inline-flex;
        -webkit-display: inline-flexbox;
    }

    .pollpart-bar {
        margin-bottom: 10px;
        color: #000;
        padding: 4px;
        text-align: center;
        background: -webkit-gradient(linear, left top, left bottom, from(#31CBE0), to(#31E0DD));
        background-color: #31CBE0;
        -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.25)));
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -webkit-animation-name: bar;
        -webkit-animation-duration: 0.5s;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-timing-function: ease-out;
    }
</style>
<asp:Panel ID="pnlError" Visible="false" runat="server">
</asp:Panel>
<asp:Panel ID="pnlView" Visible="true" runat="server">
    <asp:Panel ID="pnlViewResults" runat="server">
        <table>
            <tr>
                <td>
                    <h2 id="ResultQuestionText" style="text-align: left;" runat="server">Test Text</h2>
                </td>
            </tr>
            <tr>
                <td>
                    <dl id="ResultAnswerList" runat="server"></dl>
                </td>
            </tr>
        </table>
    </asp:Panel>
</asp:Panel>

WebPart.ascx.cs:

protected void GetResults()
{
    AddTrace("Creating Connection");
    using (var conn = new SqlConnection(DatabaseConnection))
    {
        try
        {
            AddTrace("Opening Connection");
            conn.Open();

            AddTrace("Creating SQL Command Object");
            var cmd = new SqlCommand()
            {
                Connection = conn,
                CommandType = CommandType.StoredProcedure,
                CommandText = "Poll.p_Get_Results"  // Produces multiple Record-Sets
            };
            AddTrace("Executing SQL Command as Reader");
            var rdr = cmd.ExecuteReader();
            while (rdr.Read())
            {
                //Question Result Set
                ResultQuestionText.InnerHtml = rdr["question"].ToString();
            }
            AddTrace("Getting Next Result Set");
            rdr.NextResult();

            HtmlGenericControl dt; HtmlGenericControl dd; HtmlGenericControl bar; HtmlGenericControl txt;
            ResultAnswerList.Controls.Clear();
            AddTrace("Populating List and associated Percentages");
            while (rdr.Read())
            {
                //Answer Result Set
                dt = new HtmlGenericControl("dt");
                dt.InnerText = rdr["answer"].ToString();
                ResultAnswerList.Controls.Add(dt);

                dd = new HtmlGenericControl("dd");
                dd.Style.Add("width", "100%");

                if (Convert.ToDecimal(rdr["perc"]) > 0)
                {
                    bar = new HtmlGenericControl("div");
                    bar.Attributes["class"] = "pollpart-bar";
                    bar.Style.Add("width", string.Format("{0:F1}%", rdr["perc"]));
                    if (Convert.ToDecimal(rdr["perc"]) >= 10)
                    {
                        bar.InnerText = string.Format("{0:F1}%", rdr["perc"]);
                    }
                    dd.Controls.Add(bar);
                }

                if (Convert.ToDecimal(rdr["perc"]) < 10)
                {
                    txt = new HtmlGenericControl("span");
                    txt.InnerText = string.Format("{0:F1}%", rdr["perc"]);
                    dd.Controls.Add(txt);
                }

                ResultAnswerList.Controls.Add(dd);
            }

            pnlViewPoll.Visible = false;
            pnlViewResults.Visible = true;
        }
        catch (Exception ex)
        {
            ShowTrace(ex);
        }
    }
}

The problem is that the <style>.. section in the ASCX file, is not being rendered and therefore the styles are not being applied.

I have purged the *.WebPart file from the Sites WebPart library, disabled the Feature, and remove the Solution from the farm, multiple times to try and purge any relic design that may have been left over. But in all situations, I have received the same result, the declared styles do not get rendered in the Html DOM.

Update - 2014-10-09 @ 10:50AM CST

Found that for some reason the ...ascx.g.cs file became disjointed from the root *.ascx file, and contained an earlier implementation of the style block. As such, the original implementation carried through. None of the follow-through modifications were updated, it seems.

Anyone have any idea of how to reassociate the Auto-Generated *.ascx.g.cs with the parent *.ascx file?

Note for you quick answerers

  1. I am not interested in doing a localization assignment of these styles. I am looking for a solution that is local to the webpart but not tied to code, hence the section in ASCX.
  2. I think bubbling the stylesheets to the Site (Collection), would be overboard for this webpart. As i only need these styles applied when the WebPart is included on the page.
  3. Don't worry about hypothetical situations that may or may not arise
  • You say the script tag in the ASCX is not being rendered. but there is no script tag – Michael Colbs Oct 9 '14 at 15:37
  • Sorry meant style....bouncing between two different projects. – GoldBishop Oct 9 '14 at 15:49
  • How have you confirmed the css styles are not being rendered? – Michael Colbs Oct 9 '14 at 16:12
  • some times g.cs files are disconnected so u need to delete g.cs and create again using "run custom tools" in visual studio. – Ankur Feb 20 '16 at 7:37
1

I would suggest mapping an SP Style folder and creating a new css file within it. It'll be easier managing on the fly, easier to see if it is loaded with browser's dev tools and is considered best practice. Then add this to the top of your ASCX

<link href="/_layouts/15/1033/STYLES/Custom_VWP/Custom_VWP.css" rel="stylesheet" />

http://msdn.microsoft.com/en-CA/library/ee231521.aspx

However, I suspect that is not your real issue because there is no reason why these styles wouldn't get rendered. I feel you may have attached the class wrong in code-behind. Try this instead

bar.Attributes.Add("class", "pollpart-bar");
  • You may be able to use .Attributes["class"] = "pollpart-bar" if the class attribute already exists, but it does not on a new div – Michael Colbs Oct 9 '14 at 16:17
  • guess you didn't read the Note for you quick answerers did you? Read the whole question first before replying. This is specific to this WebPart and has no use being in a global library. – GoldBishop Oct 9 '14 at 16:38
  • Found that the designer auto-generated file *.ascx.g.cs became disjointed from the *.ascx file, causing relic designs to be carried forward without the new/modified designs being pulled in. – GoldBishop Oct 9 '14 at 16:40
  • nope I read it all man. My answer doesn't conflict with any of your specific points. It's not a global library if its coupled with your solution. The second part was most def a valid suggestion. Learn some best practices and try not to be a smart ass with people who try to help – Michael Colbs Oct 9 '14 at 17:04
  • well if you also looked at my source you would have seen that is already being used, bar.Attributes["class"] = "pollpart-bar";. Therefore, your only regurgitating stuff I have already searched and combed through from Google and is not very helpful. And your answer does conflict cause putting it in _layouts is a global deployment of a CSS file and i dont want to deploy a CSS file, i am looking at a local <style> solution. – GoldBishop Oct 9 '14 at 17:26
0

Well the problem was related to the Site Url setting of the project.

As a result, the the Custom Tool SharePointWebPartCodeGenerator was never parsing the *.ascx file. Thereby, never creating a *.ascx.g.cs that contains all the designer components equivalent Literal declaration and reference.

Once i updated the URL, forced a Run Custom Tool from the *.ascx context menu, everything populated as expected.

Now its time to clean up the investigative work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.