Read web part properties with javascript

The scenario: You have a visual web part with one or more properties you need to read from some javascript code related to the web part.

One way to do this, is to add a hidden html input control (with runat=server set) to the user control.
In the code behind for the user control assign the value of the property to the input element like this:

        protected override void OnPreRender(EventArgs e)

        {

            base.OnPreRender(e);

            if (this.WebPart != null)

            {

                wsurl.Value = WebPart.ValidationWebServiceUrl;

            }

        }

In the code above "wsurl" is the id of my hidden html input control, and "ValidationWebServiceUrl" is the property on my web part.

Voila - now you can read the value of the input element containing the property value from javascript. :-)

jQuery intellisense in Visual Studio 2010

To help you when you develope jQuery based webapplications in Visual Studio, you can get intellisense.

1. First of all you have to download the a jquery-x.y.z-vsdoc.js file where xyz matches the version of the jquery library you are using in your application.
2. Put it in the same folder as your jquery library file.
3. Make sure your jquery library is included in your page with a standard html <script> tag.

Now Visual Studio 2010 automatically activates intellise for your jquery. Neat! :)

See also:
jQuery Intellisense in VS 2008
jQuery VSDoc

Get the control's ClientID in an external javascript file

When you have a asp.net control inside a content place holder and when the runat="server" attribute is set, asp.net changes the client id to something autogenerated that is a combination of the content place holder and the control id. As a result you will have to get the client id dynamically when you want to retriece the value of a control through javascript.


If you add the javascript directly to the asp.net markup, you can obtain the client id like this:

<script type="text/javascript">

    var elm = document.getElementById("<%=ControlID.ClientID %>");

</script>

Notice the quotes around <%=ControlID.ClientID %>. The expression is evaluated and replaced with the client id eventhough you would believe it would be considered a string.

How to get the client id of a control in an external javascript file

In an external javascript file you can't use the <%=ControlID.ClientID %> to get the client id of a control. You must obtain it with a minimal snipet of javascript in the markup file, and then pass it as a parameter to a function in the external javascript file.

Aspx-file markup file

<script type="text/javascript">

    $(function () {

        sayHi("<%=MyNameTextBox.ClientID %>");

    });

</script>

External javascript file

function sayHi(nameTextBoxId) {

    var nameTextBoxElm = document.getElementById(nameTextBoxId);

    alert( nameTextBoxElm.value );

}

In ASP.NET 4.0 and later you can force asp.net not the change the id of a control - it will have the same id serverside as clientside - by use of the ClientIDMode.
See Cleaner HTML Markup with ASP.NET 4 Web Forms - Client IDs (VS 2010 and .NET 4.0 Series)

SharePoint css registration instead of html link tag

You can use the <SharePoint:CssRegistration...> instead of the traditional html <link...> tag.

Some of the advantages are:
- the order stylesheets are loaded (the after propertiy)
- target it for specific browsers (the ConditionalExpression property)
- avoid that the same stylesheet gets loaded multiple times
- use SPUrl in the link to the stylesheet to refer to the present site collection

Many of theese things can be done with the <link> tag as well. However you might find it easier to do it with the <SharePoint:CssRegistration...>.
To prevent a stylesheet from being loaded multiple times you must use the <SharePoint:CssRegistration...> tag.

CssRegistration vs CssLink

There is also a <SharePoint:CssRegistration...> in SharePoint for registrering stylesheet files, but when to use one or the other?

• CssLink can be used only in the masterpage. It will list all css files when the page is generated.
• CssRegistration can be used in masterpages, pagelayouts or content pages. It will only tell SharePoint that this stylesheet must be included as well, but will not render it. CssLink will do the actual rendering.

See this very good article for a thorough workthrough: SharePoint CSSRegistration or Link?
See CssRegistration Class (msdn)
See CssLink Class (msdn) 

How to activate a hidden feature in SharePoint (PowerShell)

Simply run the PowerShell command:

Enable-SPFeature -identity <guid> -URL http://mysite.com/



See also: How to activate or enable Hidden Features in SharePoint 2010 through PowerShell

Download/extract deployed wsp packages

When you are about to update a wsp solution it often would be nice to be able to get a backup of the existing.

This is how its done in 3 lines of  PowerShell:

$farm = Get-SPFarm
$file = $farm.Solutions.Item("mysolution.wsp").SolutionFile
$file.SaveAs("c:\Users\sp\Desktop\mysolution.wsp")

You need to be a farm administrator and have permissions to the configuration database.

See also: Extract a WSP Solution from SharePoint 2010

Custom page title on SharePoint pages

In your pagelayout locate the content place holder called "PlaceHolderPageTitle".


<asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server">
</asp:Content>

Type your page title inside it

<asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server">
Contoso | <SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" runat="server"/>
</asp:Content>

In this example the page title will be "Contoso | xyz" where xyz is what you have entered in the title field when you are in edit mode of the page.


See also:
Set or Change SharePoint Page Titles (“PlaceHolderPageTitle”)
Change Title Tag on SharePoint Sites