in

Dot Net Mafia

Group site for developer blogs dealing with (usually) .NET, SharePoint 2013, SharePoint 2010, Office 365, SharePoint Online, and other Microsoft products, as well as some discussion of general programming related concepts.

This Blog

Syndication

Archives

Corey Roth [MVP]

A SharePoint MVP bringing you the latest time saving tips for SharePoint 2013, Office 365 / SharePoint Online and Visual Studio 2013.

A look at Visual Web Parts in Visual Studio 11

I recently published my first post about SharePoint development with Visual Studio 11 and I mentioned that there were some changes in how the Visual Web Part worked.  If you are familiar with the Visual Web Part in Visual Studio 2010, you know it really is just a glorified user control and it doesn’t work in the sandbox.  Luckily, the community stepped up and provided some alternatives that do work.  Visual Studio 11 now provides a Visual Web Part that works in the sandbox out of the box.  Since I am always curious about how things work, I decided to take a deeper look to see just how this web part is implemented now. 

Let’s first take a look at the files that we get when we add a Visual Web Part to the project.

VS11DPVisualWebPartSolutionExplorer

There are actually a few less files that we had in Visual Studio 2010.  We’ll see why here shortly.  What we get are the following

  • Elements.xml – Used to deploy the .webpart file via module element
  • A .ascx file – The actual user control with the design surface
  • A .ascx.cs file – The code behind for the user control
  • A .ascx.g.cs file – This file is generated by the designer.  We’ll talk about it more
  • A .webpart file – The file that goes into the Web Part gallery that has the assembly path to the web part

If we look at the .ascx.cs file, we’ll see our first difference. 

using System;

using System.ComponentModel;

using System.Web.UI.WebControls.WebParts;

 

namespace SharePointProject1.HelloWorldWebPart

{

    [ToolboxItemAttribute(false)]

    public partial class HelloWorldWebPart : WebPart

    {

        protected override void OnInit(EventArgs e)

        {

            base.OnInit(e);

            InitializeControl();

        }

 

        protected void Page_Load(object sender, EventArgs e)

        {

        }

    }

}

You’ll notice that this file inherits from WebPart now instead of UserControl.  At this point, you might be wonder how does all of this work.  Well, the magic is in the designer and what ends up in the .ascx.g.cs file.  Let’s take a look at it when it’s first created.

//------------------------------------------------------------------------------

// <auto-generated>

//     This code was generated by a tool.

//     Runtime Version:2.0.50727.5448

//

//     Changes to this file may cause incorrect behavior and will be lost if

//     the code is regenerated.

// </auto-generated>

//------------------------------------------------------------------------------

 

namespace SharePointProject1.HelloWorldWebPart {

    using System.Web;

    using System.Text.RegularExpressions;

    using Microsoft.SharePoint.WebPartPages;

    using Microsoft.SharePoint.WebControls;

    using System.Web.Security;

    using Microsoft.SharePoint.Utilities;

    using System.Web.UI;

    using System;

    using System.Web.UI.WebControls;

    using System.Collections.Specialized;

    using Microsoft.SharePoint;

    using System.Collections;

    using System.Web.Profile;

    using System.Text;

    using System.Web.Caching;

    using System.Configuration;

    using System.Web.UI.WebControls.WebParts;

    using System.Web.SessionState;

    using System.Web.UI.HtmlControls;

 

 

    public partial class HelloWorldWebPart {

 

        public static implicit operator global::System.Web.UI.TemplateControl(HelloWorldWebPart target)

        {

            return target == null ? null : target.TemplateControl;

        }

 

        [global::System.ComponentModel.EditorBrowsableAttribute(global::System.ComponentModel.EditorBrowsableState.Never)]

        private void @__BuildControlTree(global::SharePointProject1.HelloWorldWebPart.HelloWorldWebPart @__ctrl) {

        }

 

        private void InitializeControl() {

            this.@__BuildControlTree(this);

            this.Load += new global::System.EventHandler(this.Page_Load);

        }

 

        [global::System.ComponentModel.EditorBrowsableAttribute(global::System.ComponentModel.EditorBrowsableState.Never)]

        protected virtual object Eval(string expression) {

            return global::System.Web.UI.DataBinder.Eval(this.Page.GetDataItem(), expression);

        }

 

        [global::System.ComponentModel.EditorBrowsableAttribute(global::System.ComponentModel.EditorBrowsableState.Never)]

        protected virtual string Eval(string expression, string format) {

            return global::System.Web.UI.DataBinder.Eval(this.Page.GetDataItem(), expression, format);

        }

    }

}

It may not make a lot of sense at this point, but when you start adding controls, it makes more sense.  I added a label, textbox, and button control to the design surface.

VS11DPVisualWebPartDesigner

This looks like a typical user control that you are confortable working with.  Now let’s take a look at what the .ascx.g.cs file has now.  I’ll just include the parts that changed.

[global::System.ComponentModel.EditorBrowsableAttribute(global::System.ComponentModel.EditorBrowsableState.Never)]

private global::System.Web.UI.WebControls.Label @__BuildControlLabel1() {

    global::System.Web.UI.WebControls.Label @__ctrl;

    @__ctrl = new global::System.Web.UI.WebControls.Label();

    this.Label1 = @__ctrl;

    @__ctrl.ApplyStyleSheetSkin(this.Page);

    @__ctrl.ID = "Label1";

    @__ctrl.Text = "Label";

    return @__ctrl;

}

 

[global::System.ComponentModel.EditorBrowsableAttribute(global::System.ComponentModel.EditorBrowsableState.Never)]

private global::System.Web.UI.WebControls.TextBox @__BuildControlTextBox1() {

    global::System.Web.UI.WebControls.TextBox @__ctrl;

    @__ctrl = new global::System.Web.UI.WebControls.TextBox();

    this.TextBox1 = @__ctrl;

    @__ctrl.ApplyStyleSheetSkin(this.Page);

    @__ctrl.ID = "TextBox1";

    return @__ctrl;

}

 

[global::System.ComponentModel.EditorBrowsableAttribute(global::System.ComponentModel.EditorBrowsableState.Never)]

private global::System.Web.UI.WebControls.Button @__BuildControlButton1() {

    global::System.Web.UI.WebControls.Button @__ctrl;

    @__ctrl = new global::System.Web.UI.WebControls.Button();

    this.Button1 = @__ctrl;

    @__ctrl.ApplyStyleSheetSkin(this.Page);

    @__ctrl.ID = "Button1";

    @__ctrl.Text = "Button";

    return @__ctrl;

}

 

[global::System.ComponentModel.EditorBrowsableAttribute(global::System.ComponentModel.EditorBrowsableState.Never)]

private void @__BuildControlTree(global::SharePointProject1.HelloWorldWebPart.HelloWorldWebPart @__ctrl) {

    System.Web.UI.IParserAccessor @__parser = ((System.Web.UI.IParserAccessor)(@__ctrl));

    @__parser.AddParsedSubObject(new System.Web.UI.LiteralControl("\r\n<div>\r\n    "));

    global::System.Web.UI.WebControls.Label @__ctrl1;

    @__ctrl1 = this.@__BuildControlLabel1();

    @__parser.AddParsedSubObject(@__ctrl1);

    @__parser.AddParsedSubObject(new System.Web.UI.LiteralControl("\r\n    "));

    global::System.Web.UI.WebControls.TextBox @__ctrl2;

    @__ctrl2 = this.@__BuildControlTextBox1();

    @__parser.AddParsedSubObject(@__ctrl2);

    global::System.Web.UI.WebControls.Button @__ctrl3;

    @__ctrl3 = this.@__BuildControlButton1();

    @__parser.AddParsedSubObject(@__ctrl3);

    @__parser.AddParsedSubObject(new System.Web.UI.LiteralControl("\r\n</div>\r\n"));

}

The designer creates methods for each ASP.NET control you drag onto the page and then the @__BuiltControlTree method calls those methods to effectively add those controls to the page.  The HTML div elements that I added to the page simply get included as a LiteralControl.  Needless to say you don’t want to mess with this file.  I have to give props to the Visual Studio and SharePoint teams.  I am sure this was a lot of work to implement.  :)  Give it a try if you want.  It seems to work well and the best part is what I have tried so far works with SharePoint Online.

If you haven’t checked out Visual Studio 11 yet, head over to the developer site where you can get the download link and find out everything that’s new.

Comments

 

SharePoint Daily » Blog Archive » SharePoint Implementation Checklist; The Year Of Social Business; Collaboration: What’s Next? said:

Pingback from  SharePoint Daily  &raquo; Blog Archive   &raquo; SharePoint Implementation Checklist; The Year Of Social Business; Collaboration: What&#8217;s Next?

January 17, 2012 8:03 AM
 

SharePoint Daily said:

I think I could get used to a four-day work week . - Dooley Top News Stories SharePoint Implementation

January 17, 2012 8:09 AM
 

The Grid Blog said:

Audience : Office 365 for professionals and small businesses Office 365 for enterprises

March 20, 2012 1:04 PM
 

Office 365 の技術系ブログ said:

対象: Office 365 for Professional and Small Business , Office 365 for Enterprise 「Grid User Post

April 7, 2012 7:16 PM
 

Alex said:

Hello, how to solve the issure. Some times changed ascx file don't update HTML output on the sharePoint page.

December 25, 2012 3:58 AM

Leave a Comment

(required)  
(optional)
(required)  
Add

About CoreyRoth

Corey Roth is an Applications Architect at Infusion specializing in ECM and Search.
2012 dotnetmafia.
Powered by Community Server (Non-Commercial Edition), by Telligent Systems