Dan Crevier's Blog : ASP.NET

A pattern for unit testable Asp.net pages: Part 4

dancre — Wed, 01 Aug 2007 06:52:19 GMT

Okay, now for unit tests of the code from part 3. The goal is to completely cover RenamePageModel. First we need mock implementations of IPageContext and IDataAccess. For IPageContext, we are going to use special exception types for page not found and server errors. And, we'll add an accessor to track redirects. It's all pretty straightforward.

    public class MockPageContext : IPageContext
    {
        public bool IsSecureConnection
        {
            get { return _isSecureConnection; }
            set { _isSecureConnection = value; }
        }

        public bool IsPost
        {
            get { return _isPost; }
            set { _isPost = value; }
        }

        public void ThrowPageNotFound()
        {
            throw new MockPageNotFoundException();
        }

        public void ThrowServerError()
        {
            throw new MockServerErrorException();
        }

        public void Redirect(string destination)
        {
            _redirectString = destination;
        }

        public bool HasRedirected
        {
            get { return _redirectString != null; }
        }

        public string RedirectUrl
        {
            get { return _redirectString; }
        }

        private bool _isSecureConnection;
        private bool _isPost;
        private string _redirectString;
    }

    public class MockPageNotFoundException : Exception
    {
    }

    public class MockServerErrorException : Exception
    {
    }

The IDataAccess mock is also pretty straightforward. It's simply got properties that can be used to set the return value for the function, or to throw exceptions if desired.

    class MockDataAccess : IDataAccess
    {
        public MockDataAccess(string getItemNameResult, Exception getItemNameException, string setItemNameResult, Exception setItemNameException)
        {
            _getItemNameResult = getItemNameResult;
            _getItemNameException = getItemNameException;
            _setItemNameResult = setItemNameResult;
            _setItemNameException = setItemNameException;
        }

        public string GetItemName(string path)
        {
            if (_getItemNameException != null)
            {
                throw _getItemNameException;
            }

            return _getItemNameResult;
        }

        public string SetItemName(string path, string newName)
        {
            if (_setItemNameException != null)
            {
                throw _setItemNameException;
            }

            return _setItemNameResult;
        }

        private string _getItemNameResult;
        private Exception _getItemNameException;
        private string _setItemNameResult;
        private Exception _setItemNameException;
    }

And, now for the actual unit tests. Basically there's a test for each code path on load or post.

    [TestClass]
    public class RenamePageModelTests
    {
        [TestMethod]
        public void TestLoadSuccess()
        {
            MockDataAccess mockDataAccess = new MockDataAccess("name", null, null, null);
            RenamePageModel model = new RenamePageModel(mockDataAccess, "foo");
            model.Load(new MockPageContext());
            Assert.AreEqual("name", model.Name, "Name not set from item name");
        }

        [TestMethod]
        [ExpectedException(typeof(MockPageNotFoundException))]
        public void TestLoadFileNotFoundException()
        {
            MockDataAccess mockDataAccess = new MockDataAccess("name", new FileNotFoundException(), null, null);
            RenamePageModel model = new RenamePageModel(mockDataAccess, "foo");
            model.Load(new MockPageContext());
        }

        [TestMethod]
        [ExpectedException(typeof(MockPageNotFoundException))]
        public void TestLoadUnauthorizedAccessException()
        {
            MockDataAccess mockDataAccess = new MockDataAccess("name", new UnauthorizedAccessException(), null, null);
            RenamePageModel model = new RenamePageModel(mockDataAccess, "foo");
            model.Load(new MockPageContext());
        }

        [TestMethod]
        [ExpectedException(typeof(MockServerErrorException))]
        public void TestLoadIOException()
        {
            MockDataAccess mockDataAccess = new MockDataAccess("name", new IOException(), null, null);
            RenamePageModel model = new RenamePageModel(mockDataAccess, "foo");
            model.Load(new MockPageContext());
        }

        [TestMethod]
        public void TestPostSuccess()
        {
            MockPageContext pageContext = new MockPageContext();
            pageContext.IsPost = true;
            MockDataAccess mockDataAccess = new MockDataAccess("name", null, "newpath", null);
            RenamePageModel model = new RenamePageModel(mockDataAccess, "foo");
            model.Load(pageContext);
            Assert.AreEqual("rename.aspx?path=newpath", pageContext.RedirectUrl, "Did not redirect to correct url");
        }

        [TestMethod]
        public void TestPostArgumentException()
        {
            MockPageContext pageContext = new MockPageContext();
            pageContext.IsPost = true;
            MockDataAccess mockDataAccess = new MockDataAccess("name", null, null, new ArgumentException());
            RenamePageModel model = new RenamePageModel(mockDataAccess, "foo");
            model.Name = "errorName";
            model.Load(pageContext);
            Assert.AreEqual("errorName", model.Name, "New name not returned in model.Name");
            Assert.IsNotNull(model.ErrorString, "Error string not set");
        }

        [TestMethod]
        [ExpectedException(typeof(MockPageNotFoundException))]
        public void TestPostFileNotFoundException()
        {
            MockPageContext pageContext = new MockPageContext();
            pageContext.IsPost = true;
            MockDataAccess mockDataAccess = new MockDataAccess("name", null, null, new FileNotFoundException());
            RenamePageModel model = new RenamePageModel(mockDataAccess, "foo");
            model.Load(pageContext);
        }

        [TestMethod]
        [ExpectedException(typeof(MockPageNotFoundException))]
        public void TestPostUnauthorizedAccessException()
        {
            MockPageContext pageContext = new MockPageContext();
            pageContext.IsPost = true;
            MockDataAccess mockDataAccess = new MockDataAccess("name", null, null, new UnauthorizedAccessException());
            RenamePageModel model = new RenamePageModel(mockDataAccess, "foo");
            model.Load(pageContext);
        }

        [TestMethod]
        [ExpectedException(typeof(MockServerErrorException))]
        public void TestPostIOException()
        {
            MockPageContext pageContext = new MockPageContext();
            pageContext.IsPost = true;
            MockDataAccess mockDataAccess = new MockDataAccess("name", null, null, new IOException());
            RenamePageModel model = new RenamePageModel(mockDataAccess, "foo");
            model.Load(pageContext);
        }

If you use Visual Studio .Net's handy code coverage coloring, you'll see that we are covering all the code in the model, except for some closing tags in exceptions that are never hit because of the IPageContext functions that throw exceptions.

Well, that's it! I've put the entire project on Windows Live SkyDrive:

Let me know if you have any questions on it. And, let me know if there are other areas you'd like me to write about, such as using the asynchronous model. I'm interested to hear feedback on how this model can be adapted for other types of web apps.

A pattern for unit testable Asp.net pages: Part 3

dancre — Thu, 26 Jul 2007 07:16:49 GMT

In this post, I'm going to give an example of the pattern in action, built on the classes described in the last post. For the example, I've chosen something similar to the rename page on Live Folders. Here's how it should work:

The Url should be of the form http://<server>/rename.aspx?path=<path to item>.
If the item does not exist or the user does not have access, a 404 error should be returned.
If there is any error talking to the back end storage, a 500 error should be returned.
The page should have a text box for the name, prepopulated with the current item name.
There should be a submit button.
On submit, it should rename the item.
- If successful, it should redirect to another page (in my example, I just redirect to the rename page with the new path)
- If the new name has illegal characters, it should show an error inline.

Let's start by looking at the .aspx. Note: The page actually looks horrible. I made no attempt to make it look pretty!

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Rename.aspx.cs" Inherits="PageModelPattern.RenamePage" %>
<%@ Import Namespace="Microsoft.Security.Application" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Rename</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Panel runat="server" Visible="<%# !string.IsNullOrEmpty(this.PageModel.ErrorString) %>">
            <span style="color: Red"><%# this.PageModel.ErrorString %></span>
        </asp:Panel>
    
        <div>Name: <input name="name" value="<%# AntiXss.HtmlAttributeEncode(this.PageModel.Name) %>" /></div>
        <div><asp:Button runat="server" Text="Submit" /></div>
    </form>
</body>
</html>

Notice that the page uses the <%# %> binding syntax. For more information about this, see my previous post. Basically, the expression inside will be evaluated when the page is data bound. This happens after the model has been loaded by PageModelBasedPage. In these expressions, we can access public properties exposed by the mode. We use two properties here. The first it the error string. We have an <asp:Panel> that's visible when the error string is non empty or null. In that case, it will render as a div. There is also an <input> field for the name which is populated from this.PageModel.Name. Since the name will untrusted input, we need to escape it to avoid cross site scripting attacks. I chose to use the Microsoft AntiXss Library.

Now, let's look at the code behind.

    public partial class RenamePage : PageModelBasedPage<RenamePageModel>
    {
        /// <summary>
        /// Create a RenamePageModel.
        /// </summary>
        /// <returns>RenamePageModel.</returns>
        protected override RenamePageModel CreateModel()
        {
            return new RenamePageModel(new DataAccess(), this.Request.QueryString["path"]);
        }

        /// <summary>
        /// Collect data about a post back.
        /// </summary>
        protected override void CollectPostData()
        {
            base.CollectPostData();

            this.PageModel.Name = this.Request.Form["name"];
        }
    }

It's very simple, but that's the point! This is the code we can't unit test. CreateModel creates the RenamePageModel. I'll go into the DataAccess part in a moment. The other thing it passes in is the path, which it grabs from the query string. The other thing it does is populate the name property in the model on a postback from the form value.

To abstract the access to the data layer, I created a simple interface for the purpose of this demo:

    public interface IDataAccess
    {
        /// <summary>
        /// Get the name of an item from its path.
        /// </summary>
        /// <param name="path">The path to the item.</param>
        /// <returns>The item name.</returns>
        /// <exception cref="FileNotFoundExcetion">If the item does not exist.</exception>
        /// <exception cref="UnauthorizedAccessException">If the user does not have read access to the item.</exception>
        /// <exception cref="IOException">General i/o exception.</exception>
        string GetItemName(string path);

        /// <summary>
        /// Sets the name of an item.
        /// </summary>
        /// <param name="path">The path to the item.</param>
        /// <param name="newName">The new name.</param>
        /// <returns>The new path.</returns>
        /// <exception cref="FileNotFoundExcetion">If the item does not exist.</exception>
        /// <exception cref="ArgumentException">If the new name is invalid.</exception>
        /// <exception cref="UnauthorizedAccessException">If the user does not have write access to the item.</exception>
        /// <exception cref="IOException">General i/o exception.</exception>
        string SetItemName(string path, string newName);
    }

The functions should be pretty self explanatory based on the comments above. The most important part is the exceptions they can throw because the model depends on these. It's abstracted through an interface so that it can be mocked out when unit testing the page model. DataAccess is a placeholder implementation I created for this sample. I won't include the source for it here, but I'll include it in the project that I'll post when I finish the series.

Now, here's the page model. It has the real business logic that we'll be able to unit test:

    public class RenamePageModel : PageModel
    {
        public RenamePageModel(IDataAccess dataAccess, string path)
        {
            _dataAccess = dataAccess;
            _path = path;
        }

        /// <summary>
        /// Gets the name to display in the UI or sets the name to rename to.
        /// </summary>
        public string Name
        {
            get { return _nameToDisplay; }
            set { _newName = value; }
        }

        /// <summary>
        /// The error string to display (or null)
        /// </summary>
        public string ErrorString
        {
            get { return _errorString; }
        }

        /// <summary>
        /// Called when the page loads.
        /// </summary>
        protected override void OnLoaded()
        {
            if (this.PageContext.IsPost)
            {
                HandlePost();

            }
            else
            {
                try
                {
                    // Get the name of the item.
                    _originalName = _dataAccess.GetItemName(_path);
                }
                catch (FileNotFoundException)
                {
                    // The item does not exist.
                    this.PageContext.ThrowPageNotFound();
                }
                catch (UnauthorizedAccessException)
                {
                    // The user does not have access.
                    this.PageContext.ThrowPageNotFound();
                }
                catch (IOException)
                {
                    // Some other error.
                    this.PageContext.ThrowServerError();
                }

                _nameToDisplay = _originalName;
            }
        }

        /// <summary>
        /// Handle a post by renaming the item.
        /// </summary>
        private void HandlePost()
        {
            try
            {
                string newPath = _dataAccess.SetItemName(_path, _newName);
                // Redirect to next page - just back to the rename page with the new path
                // for the purpose of this example.
                this.PageContext.Redirect("rename.aspx?path=" + AntiXss.UrlEncode(newPath));
            }
            catch (FileNotFoundException)
            {
                // The item does not exist.
                this.PageContext.ThrowPageNotFound();
            }
            catch (UnauthorizedAccessException)
            {
                // The user does not have access.
                this.PageContext.ThrowPageNotFound();
            }
            catch (IOException)
            {
                // There was some other error.
                this.PageContext.ThrowServerError();
            }
            catch (ArgumentException)
            {
                // The new name has illegal characters.
                _errorString = "The name has illegal characters.";
                _nameToDisplay = _newName;
            }
        }

        private IDataAccess _dataAccess;
        private string _path;
        private string _newName;
        private string _originalName;
        private string _nameToDisplay;
        private string _errorString;
    }

Hopefully the code is pretty straightforward to read. It basically follows the requirements I outlined at the beginning of the post.

The result is that we have straightforward data binding in the .aspx and .aspx.cs which we can't unit test, and a model that only depends on IPageContext and IDataAccess which we can easily mock out for unit testing. The next post will wrap things up by showing some unit tests.

A pattern for unit testable Asp.net pages: Part 2

dancre — Tue, 24 Jul 2007 07:13:56 GMT

In part 1, I gave an overview of the pattern. In this part, I will describe some of the core classes. Let's start off with the PageModel itself. It's the most simple. It is an abstract class. Subclasses must implement OnLoaded. It has an associated IPageContext (see below) that the model will use to interface with the page.

    public abstract class PageModel
    {
        /// <summary>
        /// The context associated with the model.
        /// </summary>
        protected IPageContext PageContext
        {
            get { return _pageContext; }
        }

        /// <summary>
        /// Called to load the page model.
        /// </summary>
        /// <param name="pageContext">The page context.</param>
        public void Load(IPageContext pageContext)
        {
            _pageContext = pageContext;
            OnLoaded();
        }

        /// <summary>
        /// Override to provide behavior for the model.
        /// </summary>
        protected abstract void OnLoaded();

        private IPageContext _pageContext;
    }

The IPageContext will allow the model to get some Asp.net specific information about the page and to do some Asp.net specific operations. When unit testing, a mock implementation of IPageContext can be used to test the model in isolation. IPageContext looks like this:

    public interface IPageContext
    {
        /// <summary>
        /// Gets if the connection is secure.
        /// </summary>
        bool IsSecureConnection { get; }

        /// <summary>
        /// Gets if this is a post.
        /// </summary>
        bool IsPost { get; }

        /// <summary>
        /// Throws a page not found exception.
        /// </summary>
        void ThrowPageNotFound();

        /// <summary>
        /// Throws a server error.
        /// </summary>
        void ThrowServerError();

        /// <summary>
        /// Redirects to another page. Note: Execution continues after this call.
        /// </summary>
        /// <param name="destination">Page to redirect to.</param>
        void Redirect(string destination);

        /// <summary>
        /// Has a redirect taken place?
        /// </summary>
        bool HasRedirected { get; }
    }

Note: This interface can be extended as needed. The interface here is a simple starting point.

Now, let's look at PageModelBasedPage, which is a base class for pages that will use PageModels. It's a generic class, parametized by the PageModel subclass. Subclasses of PageModelBasedPage must implement CreateModel to actually create the model. When the page is loaded, it will create the model with an AspPageContext. If it's a post, it will call a function CollectPostData() which can be overridden to collect post data. Finally, when the page load process is finished, it will do data binding on the page, unless there's been a redirect, in which case it will hide the controls on the page to avoid any unnecessary rendering.

    public abstract class PageModelBasedPage<ModelType> : Page where ModelType : PageModel
    {
        protected PageModelBasedPage()
        {
            this.LoadComplete += OnLoad;
            this.PreRenderComplete += OnPreRenderComplete;
        }

        /// <summary>
        /// Derived class must implement CreateModel and return the model.
        /// </summary>
        /// <returns>PageModel subclass.</returns>
        protected abstract ModelType CreateModel();

        /// <summary>
        /// Base classes can override for any special data binding.
        /// </summary>
        protected virtual void DoDataBinding()
        {
            if (_pageContext.HasRedirected)
            {
                // No need to render the page on a redirect.
                this.Visible = false;
            }
            else
            {
                this.DataBind();
            }
        }

        /// <summary>
        /// Derived class can do any manipulation of the Form values and set properties
        /// on the PageModel after a post.
        /// </summary>
        protected virtual void CollectPostData()
        {
        }

        /// <summary>
        /// The current page model for the page.
        /// </summary>
        protected ModelType PageModel
        {
            get { return _model; }
        }

        /// <summary>
        /// Called by Asp.net when the page loads.
        /// </summary>
        private void OnLoad(object sender, EventArgs e)
        {
            _model = CreateModel();
            _pageContext = new AspPageContext(this);

            if (_pageContext.IsPost)
            {
                // WARNING: You may be vulerable to cross site request forgery attacks
                // if you do not implement some sort of canary. For more info, see:
                // http://en.wikipedia.org/wiki/Csrf
                CollectPostData();
            }

            _model.Load(_pageContext);
        }

        /// <summary>
        /// Called by Asp.net when page loading is complete (including any asynchronous
        /// tasks)
        /// </summary>
        private void OnPreRenderComplete(object sender, EventArgs e)
        {
            DoDataBinding();
        }

        private ModelType _model;
        private AspPageContext _pageContext;
    }

As mentioned in the code, as written, this code is vulnerable to cross site request forgery attacks. The solution to this issue will depend on your application.

By using OnPreRenderComplete, our pattern is compatible with Asp.net's asynchronous pattern. I can write more about that if there is interest.

AspPageContext, the IPageContext used by PageModelBasedPage is as follows:

    public class AspPageContext : IPageContext
    {
        public AspPageContext(Page page)
        {
            _page = page;
        }

        public bool IsSecureConnection
        {
            get { return _page.Request.IsSecureConnection; }
        }

        public bool IsPost
        {
            get { return _page.IsPostBack; }
        }

        public void ThrowPageNotFound()
        {
            throw new HttpException(404, "Page not found.");
        }

        public void ThrowServerError()
        {
            throw new HttpException(500, "Server error.");
        }

        public void Redirect(string destination)
        {
            _page.Response.Redirect(destination);
            _hasRedirected = true;
        }

        public bool HasRedirected
        {
            get { return _hasRedirected; }
        }

        private Page _page;
        private bool _hasRedirected;
    }

That's it for the basics! To use the pattern, you need to:

Create a PageModel subclass with the business logic for the page.
Derive your Page from PageModelBasedPage.
Populate any data in the model at creation time or in CollectPostData.
Use databinding on the page to bind the results to the UI.

The next part will contain a full example.

A pattern for unit testable Asp.net pages: Part 1

dancre — Sat, 21 Jul 2007 07:35:02 GMT

I previously blogged about the pattern we used in our WPF application to separate business logic from the presentation, making the business logic view and data models highly unit testable. Now that I'm working on Asp.net code for Live Folders, we've worked to come up with a similar model that separates the business logic from the presentation. The model we use may not apply to everyone, but I thought I'd present it in a series of posts to hopefully help people out and to get some good feedback.

Live Folders is a pretty basic (Web 1.0!) type application that doesn't make heavy use of client-side JavaScript. It also doesn't use view state or any of the complex Asp.net controls. If your application model is significantly different, this pattern may not work for you.

This pattern breaks a page into two parts. The PageModel is the unit testable business logic for the page, which has no Asp.net dependencies. Then, there's the Page subclass, which collects data about the request (query parameters, form post values, etc), runs the model, and then binds data from the model into its controls. The Page subclass is not unit testable because of its Asp.net dependencies (the Asp.net code should tested with scenario tests that automate the browser).

The PageModel may need to do things like redirect the user or throw a page not found error. These sorts of Asp.net dependencies are abstracted out with an interface called IPageContext. A mock implementation is used for unit testing, and an Asp.net specific implementation is used in the real pages.

This series will consist of the following parts:

Part 2: The core classes (PageModel, PageModelBasedPage, IPageContext)

Part 3: An example

Part 4: Unit testing the example

The resulting code is available at http://folders.live.com/self.aspx/+drExD6aaB0/Blog/PageModelPattern.zip.

Gotcha with HttpResponse.Redirect

dancre — Wed, 28 Mar 2007 07:37:54 GMT

HttpResponse.Redirect is used to redirect to another page using a 302 response code. It can be used in two modes. One terminates the thread immediately so that execution does not continue to the next line of code. The other version continues execution, but returns a 302 response. The latter version is the only one that works from asynchronous callbacks (at least when using Page.RegisterAsyncTask). I guess it doesn't like threads being terminated out from under it. There's on gotcha with HttpResponse.Redirect(url, false) though. It will actually render the page, so the 302 response may have a bunch of unwanted data. The solution is to call Page.Visiable = false after doing the redirect. This will avoid rendering any content for the page. Good catch on this one, Josh!

The difference between <%= and <%# in ASP.NET

dancre — Wed, 14 Feb 2007 06:21:00 GMT

I was a little confused about the difference between <%= expression %> and <%# expression %> in ASP.NET. It seems like both work in a lot of cases, but in other cases, only the # (data binding) version works. So, I decided to dig into it a little bit. To try it out I built this simple page:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <p>Equals: <%= this.TestValue %></p>
        <p>Pound: <%# this.TestValue %></p>
        <p>Equals label: <asp:Label runat="server" ID="_equals" Text="<%= this.TestValue %>" /></p>
        <p>Pound label: <asp:Label runat="server" ID="_pound" Text="<%# this.TestValue %>" /></p>
    </div>
    </form>
</body>
</html>

And the code behind is:

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        _testValue = "2";
    }

    protected void Page_PreRenderComplete(object sender, EventArgs e)
    {
        // DataBind();
        _testValue = "3";
    }

    public string TestValue
    {
        get { return _testValue; }
    }

    private string _testValue = "1";
}

Here's what the result is when the DataBind() line is commented out:

Equals: 3
Pound:
Equals label:
Pound label:

And, when it's not commented out:

Equals: 3
Pound: 2
Equals label:
Pound label: 2

At first glance it looks like the Equals label case did nothing. But, if you view source, you see:

<p>Equals label: <span id="_equals"><%= this.TestValue %></span></p>

The literal expression made it down to the browser and it's just invalid HTML. What you can see as a result is:

The <%= expressions are evaluated at render time
The <%# expressions are evaluated at DataBind() time and are not evaluated at all if DataBind() is not called.
<%# expressions can be used as properties in server-side controls. <%= expressions cannot.

Now, let's look at the generated code to see how it works. It builds the control tree using the following code:

        private void @__BuildControlTree(default_aspx @__ctrl) {
            this.InitializeCulture();
            
            System.Web.UI.IParserAccessor @__parser = ((System.Web.UI.IParserAccessor)(@__ctrl));
            @__parser.AddParsedSubObject(new 
                        System.Web.UI.LiteralControl("\r\n\r\n<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3" +
                        ".org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\r\n\r\n<html xmlns=\"http://www.w3.org/1" +
                        "999/xhtml\" >\r\n"));
            
            global::System.Web.UI.HtmlControls.HtmlHead @__ctrl1;
            @__ctrl1 = this.@__BuildControl__control2();
            @__parser.AddParsedSubObject(@__ctrl1);            
            @__parser.AddParsedSubObject(new System.Web.UI.LiteralControl("\r\n<body>\r\n    "));
            
            global::System.Web.UI.HtmlControls.HtmlForm @__ctrl2;
            @__ctrl2 = this.@__BuildControlform1();
            @__parser.AddParsedSubObject(@__ctrl2);
            
            @__parser.AddParsedSubObject(new System.Web.UI.LiteralControl("\r\n</body>\r\n</html>\r\n"));
        }

@__BuildControl__control2() isn't that intersting, it's just the <head> stuff. The guts are in @__BuildControlform1():

        private global::System.Web.UI.HtmlControls.HtmlForm @__BuildControlform1() {
            global::System.Web.UI.HtmlControls.HtmlForm @__ctrl;
            @__ctrl = new global::System.Web.UI.HtmlControls.HtmlForm();
            this.form1 = @__ctrl;
            @__ctrl.ID = "form1";
            
            global::System.Web.UI.DataBoundLiteralControl @__ctrl1;
            @__ctrl1 = this.@__BuildControl__control4();
            System.Web.UI.IParserAccessor @__parser = ((System.Web.UI.IParserAccessor)(@__ctrl));
            @__parser.AddParsedSubObject(@__ctrl1);
            
            global::System.Web.UI.WebControls.Label @__ctrl2;
            @__ctrl2 = this.@__BuildControl_equals();
            @__parser.AddParsedSubObject(@__ctrl2);
            
            global::System.Web.UI.WebControls.Label @__ctrl3;
            @__ctrl3 = this.@__BuildControl_pound();
            @__parser.AddParsedSubObject(@__ctrl3);
            
            @__ctrl.SetRenderMethodDelegate(new System.Web.UI.RenderMethod(this.@__Renderform1));
            return @__ctrl;
        }

This is building all of the controls in the form. First let's look at the control built with @__BuildControl__control4():

        private global::System.Web.UI.DataBoundLiteralControl @__BuildControl__control4() {
            global::System.Web.UI.DataBoundLiteralControl @__ctrl;
            
            @__ctrl = new global::System.Web.UI.DataBoundLiteralControl(2, 1);
            @__ctrl.SetStaticString(0, "</p>\r\n        <p>Pound: ");
            @__ctrl.SetStaticString(1, "</p>\r\n        <p>Equals label: ");
            @__ctrl.DataBinding += new System.EventHandler(this.@__DataBind__control4);
            
            return @__ctrl;
        }

And related to this is:

        public void @__DataBind__control4(object sender, System.EventArgs e) {
            System.Web.UI.Page Container;
            System.Web.UI.DataBoundLiteralControl target;
            
            target = ((System.Web.UI.DataBoundLiteralControl)(sender));
            Container = ((System.Web.UI.Page)(target.BindingContainer));
            target.SetDataBoundString(0, System.Convert.ToString(this.TestValue, System.Globalization.CultureInfo.CurrentCulture));
        }

This is the part of the page up to the first <%#. You can see that it uses a DataBoundLiteralControl which is divided between static strings and data bound strings. When DataBind is called on the page, the event handler is called and SetDataBoundString is called on the control. This is why the value is captured at bind time. If you want to see how DataBoundLiteralControl works, you can use .NET Reflector. You can see that it's Render function looks like:

    protected internal override void Render(HtmlTextWriter output)
    {
        int num1 = this._dataBoundLiteral.Length;
        for (int num2 = 0; num2 < this._staticLiterals.Length; num2++)
        {
            if (this._staticLiterals[num2] != null)
            {
                output.Write(this._staticLiterals[num2]);
            }
            if ((num2 < num1) && (this._dataBoundLiteral[num2] != null))
            {
                output.Write(this._dataBoundLiteral[num2]);
            }
        }
    }

So, it basically outputs the static and data bound fields alternately. That's how it renders the first <%# value on the page if DataBind() is called. Next, let's look at the "_equals" control:

        private global::System.Web.UI.WebControls.Label @__BuildControl_equals() {
            global::System.Web.UI.WebControls.Label @__ctrl;
            
            @__ctrl = new global::System.Web.UI.WebControls.Label();
            @__ctrl.ApplyStyleSheetSkin(this);
            @__ctrl.ID = "_equals";
            @__ctrl.Text = "<%= this.TestValue %>";
            
            return @__ctrl;
        }

You can see that the <%= is not in any way special. It's just literal text. The "_pound" control, which uses <%# on the other hand, looks like:

        private global::System.Web.UI.WebControls.Label @__BuildControl_pound() {
            global::System.Web.UI.WebControls.Label @__ctrl;
            
            @__ctrl = new global::System.Web.UI.WebControls.Label();
            @__ctrl.ApplyStyleSheetSkin(this);
            @__ctrl.ID = "_pound";
            @__ctrl.DataBinding += new System.EventHandler(this.@__DataBinding_pound);
            
            return @__ctrl;
        }
        
        public void @__DataBinding_pound(object sender, System.EventArgs e) {
            System.Web.UI.WebControls.Label dataBindingExpressionBuilderTarget;
            System.Web.UI.Page Container;
            dataBindingExpressionBuilderTarget = ((System.Web.UI.WebControls.Label)(sender));
            Container = ((System.Web.UI.Page)(dataBindingExpressionBuilderTarget.BindingContainer));
            
            dataBindingExpressionBuilderTarget.Text = System.Convert.ToString( this.TestValue , System.Globalization.CultureInfo.CurrentCulture);
        }

As compared to the <%= version, <%# is treated specially in parameters. It adds a data binding handler and sets the property at data bind time. That's why <%# does work in parameters and why it picks up the value at data bind time.

So, how does the first <%= work? We can see this by looking at the following function:

        private void @__Renderform1(System.Web.UI.HtmlTextWriter @__w, System.Web.UI.Control parameterContainer) {
            @__w.Write("        <p>Equals: ");
            @__w.Write( this.TestValue );

            parameterContainer.Controls[0].RenderControl(@__w);
            parameterContainer.Controls[1].RenderControl(@__w);
            @__w.Write("</p>\r\n        <p>Pound label: ");
            parameterContainer.Controls[2].RenderControl(@__w);
            @__w.Write("</p>\r\n    </div>\r\n    ");
        }

Here we can see the @__w.Write(this.TestValue) line which is the result of the <%= line in the source. It's outputting the value of this.TestValue at render time, which explains the behavior we saw.

So, it all makes sense to me now. I hope it makes sense to you too :-)

What does runat="server" do for HTML controls

dancre — Sun, 17 Dec 2006 20:27:15 GMT

One thing I didn't fully understand when I first started using ASP.NET is exactly what runat="server" does. It sounds like some magical thing where code is running on the server for your control and not on the client. In some cases something like that does happen, but the basics are much simpler than that.

Let's take a look at the source code generated for a simple control using the trick I blogged about yesterday. We'll start with this simple page:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
</head>
<body>
    <button>foo</button>
</body>
</html>

Here's a look at some of the source generated (I've simplified a bunch of the debugging info for clarity):

        private void @__BuildControlTree(default_aspx @__ctrl) {
            
            this.InitializeCulture();
            
            System.Web.UI.IParserAccessor @__parser = ((System.Web.UI.IParserAccessor)(@__ctrl));
            
            @__parser.AddParsedSubObject(new System.Web.UI.LiteralControl(
                        "\r\n\r\n<html>\r\n<head>\r\n    <title>Untitled</title>\r\n</head>\r\n<body>\r\n    <button>foo" +
                        "</button>\r\n</body>\r\n</html>\r\n"));
            
        }

Notice that the control tree simply has a LiteralControl with all of the HTML, including the button. Without runat="server", nothing special is done with it. But, if we add runat="server", we get:

        private global::System.Web.UI.HtmlControls.HtmlButton @__BuildControl__control2() {
            global::System.Web.UI.HtmlControls.HtmlButton @__ctrl;
            
            @__ctrl = new global::System.Web.UI.HtmlControls.HtmlButton();
            
            System.Web.UI.IParserAccessor @__parser = ((System.Web.UI.IParserAccessor)(@__ctrl));
            
            @__parser.AddParsedSubObject(new System.Web.UI.LiteralControl("foo"));
            
            return @__ctrl;
        }
        
        private void @__BuildControlTree(default_aspx @__ctrl) {
            
            this.InitializeCulture();
            
            System.Web.UI.IParserAccessor @__parser = ((System.Web.UI.IParserAccessor)(@__ctrl));
            
            @__parser.AddParsedSubObject(new System.Web.UI.LiteralControl(
                  "\r\n\r\n<html>\r\n<head>\r\n    <title>Untitled</title>\r\n</head>\r\n<body>\r\n    "));
            
            global::System.Web.UI.HtmlControls.HtmlButton @__ctrl1;
            
            @__ctrl1 = this.@__BuildControl__control2();
            
            @__parser.AddParsedSubObject(@__ctrl1);
            
            @__parser.AddParsedSubObject(new System.Web.UI.LiteralControl("\r\n</body>\r\n</html>\r\n"));
        }

Now BuildControlTree adds a literal control for the stuff before the button, adds an HtmlButton for the button itself (with the text inside the control as a literal), and then another LiteralControl for the rest HTML on the page. What happens is that when the control tree is rendered, the HtmlButton will render itself with a <button> tag. In this case, you'll end up with the exact same HTML in the browser as our first example, but let's see what else we can do.

One thing you might notice when you set runat="server" is that the set of properties available in the Properties Window changes. When you don't have runat="server", what you are looking at is the standard <button> properties. Once you turn on runat="server" what you are looking at is the properties on HtmlButton (which are generally a superset of the HTML properties). For example, if you try adding visible="false" to the button without runat="server", the visible="false'" is just rendered as part of the LiteralControl for the HTML and the browser ignores it because that's not an HTML property on buttons. But, if you do so with runat="server", you'll see in the server side .cs source code that the HtmlButton's visible property is set to false. When the page is rendered by the server, the HtmlButton doesn't render any code for the button and you don't end up with any HTML for the button on the browser.

The other thing we can do is get programmatic access to the button in our code behind. To do so, we need to add an id to the button. If we switch the button to:

    <button runat="server" id="_button">foo</button>

Then, the generated source code will include:

    protected global::System.Web.UI.HtmlControls.HtmlButton _button;

Now, we could add the following to our Page_Load:

    protected void Page_Load(object sender, EventArgs e)
    {
        _button.InnerText = "bar";
    }

After the control tree is built, it will get into Page_Load and we'll change the InnerText of the button. When the server renders the control tree, it will output "bar" for the text of the button instead of "foo" and the resulting HTML will have <button id="_button">bar</button>.

Something interesting to note is that this works for any kind of HTML tag. In some cases ASP.NET has richer classes backing the HTML tags (like HtmlButton). But, if you just put something like <foo runat="server">, it will go through the same process, but give you an HtmlGenericControl.

One thing you can't do with the <button> is add a click handler that runs code on the server. To do that, you'll need the asp:button Web Server control. Those are somewhat different beasts than HTML controls. I'll discuss those in a future post.

Playing with ASP.NET

dancre — Sun, 17 Dec 2006 07:16:00 GMT

I'm doing some ASP.NET work on my current project (more about that in the coming months). I've spent most of my life doing client side code, so it's taken me a little time to really wrap my head around what's happening with ASP.NET. It often seems like there's a lot of magic going on. But, once you look into it, it's not really that complicated.

The job of an ASP.NET page is really to just respond to an HTTP request, usually with HTML. As with client software you build up a control tree that gets rendered. But, in the case of ASP.NET, it's rendered to HTML and then the control hierarchy is thrown away and there's no code related to the page running on the server backing the page. Postbacks are required to further operate with the server, and ASP.NET makes it fairly transparent that this happens.

One trick that helped me understand things better was suggested in the Architecture chapter of Fritz Onion's Essential ASP.NET 2.0 book. The trick is to insert something like:

<div>
The source is in: <%= System.IO.Path.GetDirectoryName(GetType().Assembly.Location) %>.
</div>

into the page. In the default compilation model for an ASP.NET page, the first time the page is loaded, it converts the .aspx file into code and compiles it along with your .aspx.cs files. When in debug mode, it will leave the intermediate .cs files it uses in the temp folder with the generated assembly. The files aren't incredibly human friendly, but they are very enlightening. Note: if edit things in Visual Studio and refresh the page in IE, the directory won't change, so you can comment the line above out after figuring out where it is.

I'm going to follow up with a couple of posts on what code actually gets generated in a few different cases as an exercise to learn the internals of ASP.NET better.