ASP.NET MVC 1.0 Release Candidate Is Released#

Time to dig into the T4 template system (learn here) in Visual Studio since they added a cool feature for generating scaffold controllers and views. Check out ScottGu's Article, of course. I am thinking that this was influenced by the SubSonic MVC Scaffold Addin from Rob Conery a little bit ago. I am so happy that we are going to have our own scaffold playground with built in tools. It is getting so much closer to how I really want to develop web apps. Woohoo!

I know it has been a long time since i blogged, since before the holidays. Four kids is a little bit busier than I imagined, but all worth it. I am still trying to stay up late to learn more new things coming out in the web world, as I love the information overload. Much more to come soon I am sure!

Just found this link. You will need this to check out the MVC futures stuff that has Html.TextBoxFor(p => p.PropteryName).

Wednesday, January 28, 2009 8:31:47 AM UTC #     |  Trackback

 

How to speed up your ASP.NET Website#

Recently we noticed that our site was a little sluggish.  Now of course when we started to look at why it was slow sometimes and not others, we opened up a huge can of worms.  Was it our code?  Was it our server?  Was it our proxy server?  Was it our database?  Was it our graphics?  Was it the JavaScript?  Or was it just that the end user had a slow connection?  Well it was all of them. 

Sometimes we forget that not everyone has FIOS.  We are very lucky to have a 20 Mbps / 20 Mbps connection at work.  So first thing we did was to look at the size of our pages when downloading the html, CSS, images and JavaScript.  We were shocked at the size of the files.  The first eye opening fact was that our home page was 1.5 MB.  Whoa.  The best tool that we found to figure the details out was YSlow.  Here is a snippet from their site about what the tool does:

YSlow analyzes web pages and tells you why they're slow based on the rules for high performance web sites. YSlow is a Firefox add-on integrated with the popular Firebug web development tool

This tool saved us so much time figuring out what our issues were.  I highly suggest reading the rules.  Also you can listen to a recent podcast from DotNetRocks: YSlow! Steve Souders finds Website Bottlenecks

So we began the process of optimizing the client.  The first thing you can do is to compress the JavaScript, CSS and html files on the server to reduce the file download size up to 75% on the client.  The way to do this in IIS6 is to enable GZip compression.  This is turned off by default which I think should actually be turned on by default.  Here is some info on how to enable it for specific file types.  Don't forget the .axd files if you use and Ajax in webforms.

Using HTTP Compression for Faster Downloads (IIS 6.0)

So next on our list was minimizing the size of the images that we were using as backgrounds in CSS.  They are the first calls from the browser when loaded from CSS.  Also moving JavaScript references to the bottom of the page helps.  The browser using a blocking request when loading JavaScript files, so if you have them at the top of the page, you will get a perceived load issue since the browser waits for that first.  The best thing to get out of optimizing for the client is the perceived load to the user which really makes the most difference.

So after removing the client side issues we realized we had a database load issue on certain pages with many records.  Well we found out we ran into the famous ORM gotcha of way too many queries when using strictly the data objects with related foreign key objects.  For instance, by relating a member record to the aspnet user table and doing a foreach on the member and then checking to see their username on the aspnet user table, it will cause another db query to get that info for each user.  Sometimes when using the orm objects that are generated instead of writing a custom query to populate your own domain object, you can get into a lot of trouble.

Our website has many applications to it, some mvc and some using webforms.  We have noticed a significant speed increase on the mvc sites.  There is less code to render and there is no Viewstate so right away there is some performance increases. 

I hope that this helps some other people figure out why their site is slow for some people some of the time.

Wednesday, December 10, 2008 9:52:17 AM UTC #     |  Trackback

 

Scaffolding in an ASP.NET MVC App#

So at work I had to create a simple admin for a few new features in our app and decided I would try out a few new technologies while I was at it to not only save some time, but to see what is out there now.  My heart was set on this being a simple MVC web app, but really wanted to try ASP.NET Dynamic Data also.  Well good news is that you can use Dynamic Data in MVC fairly cleanly and easily.  By adding a simple route to the global.asax.cs file you can easily have Dynamic Data working although it is web forms based:

 MetaModel model = new MetaModel();
            model.RegisterContext(typeof(MvcApplication1.Models.NorthwindDataContext), 
                new ContextConfiguration() { ScaffoldAllTables = true });
            routes.Add(new DynamicDataRoute("DD/{table}/{action}.aspx") {
                Constraints = new RouteValueDictionary(new { action = "List|Details|Edit|Insert" }),
                Model = model
            });

Now this opened my eyes a little that you can easily create a hybrid web app of MVC and Web Forms.  Web Forms does have its advantages sometimes, especially when you start looking at existing tools and controls that you just need to work quickly and don't feel like reinventing the wheel.

You can download a sample project of this working in an mvc app over at codeplex. http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=14473

That same night I was playing with Dynamic Data, Rob Conery had just posted his prototype of a Subsonic MVC Add-in for Visual Studio.  I was pretty impressed with the code and views that it generated, and I think is a great start to seeing what is possible.  Both samples took less that an hour to download and implement.  I ended up spending more time integrated security across the multiple web apps on different sub-domains than getting the scaffolds to work.

Wednesday, October 29, 2008 8:10:43 AM UTC #     |  Trackback

 

Testing code by precompiling view pages in asp.net mvc#

I am loving to use ASP.NET MVC at work and have several projects that we have live right now.  We are also migrating our web forms app very slowly by adding more mvc like views in our web forms so they can be ported easier down the road.  The one issue I am having so far is testing the code that is in the pages for the mvc apps and the code in the web form views.  Runtime errors are so annoying and when on a decent size team, it is almost impossible to test every page at runtime, especially when you don't always know what another developer added or changed. 

So I wrote a test that precompiles the entire app and all the code in the aspx page.  It is more of a sanity check than anything and has been very helpful.  It has caught several simple errors that would have ended up in production and am very thankful for having this sanity test.  Here is the sample test code that you can add to your test project:

        const string ASPNET_COMPILER_PATH = "C:/Windows/Microsoft.NET/Framework/v2.0.50727/aspnet_compiler -p {0} -v {1}";
        const string TERMINAL_APP_NAME = "cmd.exe";

        [TestMethod]
        public void Precompile_all_pages()
        {
            string sitePath = @"D:\websites\mywebsite.com\preview";
            string siteNode = "preview.mywebsite.com";

            string ret = compileProject(sitePath, siteNode);

            string msg = "Utility to precompile an ASP.NET application\r\nCopyright (C) Microsoft Corporation. All rights reserved.\r\n\r\n";
            Assert.AreEqual(msg, ret);


        }

        public string compileProject(string compileDir, string iisApplicationPath)
        {
            string compileString = string.Format(ASPNET_COMPILER_PATH, compileDir, iisApplicationPath);

            Process proc = new Process();
            proc.StartInfo.UseShellExecute = false;
            proc.StartInfo.RedirectStandardOutput = true;
            proc.StartInfo.FileName = TERMINAL_APP_NAME; //File name to execute
            proc.StartInfo.Arguments = "/c " + compileString;
            proc.StartInfo.RedirectStandardError = true;
            proc.StartInfo.RedirectStandardInput = true;
            proc.Start(); // Execute process
            proc.WaitForExit();

            string output = proc.StandardOutput.ReadToEnd();

            return output;
        }
Make sure to reference System.Diagnostics.  You can also add the aspnet_compiler to your post build in your cproj file, although this will slow down your building of your app locally, but is a good practice I think for working with mvc.
Saturday, August 30, 2008 8:12:47 AM UTC #     |  Trackback

 

Ajax Control Toolkit with ASP.NET MVC#

I have been playing with ASP.NET MVC for about 4 months now and have a couple sites, one decent sized, in production right now.  I am very comfortable with it and the extra control over the html is very nice.  Since there is no postback and viewstate in MVC, the Ajax Control Toolkit does not work as designed and needs a few changes to make it work within the MVC framework.  It has forced me to look at jQuery more, and I am really enjoying the simplicity of jQuery's design and the power of using it.  I was just wishing I could use some of the controls in the toolkit and of course i wanted to see if i could get it to work for the sake of making it work.  Well I did get it to work for 2 of the controls so far, some that i use in a normal project.  They are the Calendar and TextBoxWatermark. 

To make this easier, and from a lesson I learned with jQuery, it is best to select your DOM elements by a css class when you can.  This allows for your JavaScript to be more unobtrusive, and ultimately cleaner and easier to maintain.  So i took a couple of methods from the Ajax Futures from last July 2007 and put it in a helper class along with a simple function of mine to allow selection of DOM elements by css very trivial.

To give you an idea of what i am talking about using css selectors for the toolkit, look at this sample:

var elements = $select('TextboxWatermark');
    for (i=0;i<elements.length;i++)
    {
        var elem = elements[i];
        $create(AjaxControlToolkit.TextBoxWatermarkBehavior, {"WatermarkText":elem.title}, null, null, $get(elem.id));
    }

 

I created a helper function $select(className) which basically wraps Microsoft Ajax Futures getElementsByClassName like such:

function $select(className)
{
    var elements = Sys.UI.DomElement.getElementsByClassName(className);
    return elements;
}

So basically if you put the class name TextboxWatermark on any textbox input with the title you like to show as the watermark like this:

<input type="text" class"TextboxWatermark" name="username" id="username" title="Must be at least 6 chars" />

or

<%= Html.TextBox("username", new { @class = "TextboxWatermark", @title = "Must be at least 6 chars" }) %>

What is nice about the second option is that you get the added benefit of getting the View Engine to fill out the value of the textbox if there is an item in ViewData of the ViewData.Model that has a var named 'username'.

So I find this much easier than having to add the control and on each page and for each DOM element i want to attach this behavior to. 

When you want to do the same thing with other controls, you need to know how to call it in JavaScript.  This is the part that is kind of hidden when you are using controls like in WebForms.  If you go to the AjaxControlToolkit Sample Site, and view page source on one of the controls example pages, you will see what JavaScript is generated.  Go to the TextboxWatermark example and then view source from the browser.  You will see 5 of these at the bottom for each control

Sys.Application.initialize(); Sys.Application.add_init(function() { $create(AjaxControlToolkit.TextBoxWatermarkBehavior, {"ClientStateFieldID":"ctl00_SampleContent_TextBoxWatermarkExtender1_ClientState","WatermarkCssClass":"watermarked","WatermarkText":"Type First Name Here","id":"ctl00_SampleContent_TextBoxWatermarkExtender1"}, null, null, $get("ctl00_SampleContent_TextBox1")); });

So this is how you can see how to invoke that control with the arguments, and then of course looking at the source files help you see what else they are doing.  I am already feeling cleaner with the JavaScript since i have just one function that now does it for every Dom element with the class name, "TextboxWatermark".  Here is the function that gets called on pageLoad.  This will attach the behavior for each Dom element.

function AddAllTextboxWatermarks()
{
    var elements = $select('TextboxWatermark');
    for (i=0;i<elements.length;i++)
    {
        AddTextBoxWatermark(elements[i]);
    }
}

function AddTextBoxWatermark(elem)
{
    $create(AjaxControlToolkit.TextBoxWatermarkBehavior, {"WatermarkText":elem.title}, null, null, $get(elem.id));
}

Now the Calendar was just as easy to put in the form.  Here is how I implemented the Calendar:

<%= Html.TextBox("calendar", new { @class = "Calendar" })%>

Now, the calendar was a little tougher to get to work cause of getting the JavaScript just right cause of the amount of files needed.  The Calendar is one of the more complex controls since it uses a popup behavior, animation, timer and threading among others. 

So, that solves simple controls, but what about other controls that need overloads and are not as simple parameter wise.  Well I put all these controls in html helpers also that inject the JavaScript at run time.  I actually started this way, but after using jQuery a little, i really wanted to see if i could implement this using css selectors with the asp.net Ajax framework.  Also it felt like black box controls were creeping back in, but sometimes we need to generate html in c#, so i think it is just about finding the fine line when not to do it and when it is simple and reusable.

Here this an example of the TextboxWatermark as a Html helper:

<%= Html.TextboxWatermark("Enter Username", "username", true) %>

So basically this returns you the input text box,  with the TextboxWatermark behavior attached.  Also it will make sure that the appropriate .js files are in the page along with the html needed to make it work with this particular control.  Now this creates a lot more code in the page just like the controls now do in the existing toolkit, but has its own advantages.  We can create overloads and add additional parameters without having to write JavaScript.  Some people actually don't like to write JavaScript, it is either intimidation or fear of messing up something I guess.  Personally I have used it since the late 90's and is the only language that I have used for 10 years.  Well that and SQL. 

The Calendar control has advantages to being used as a Html helper since we can have several overloads to define format among other parameters that a calendar control can take.  Here is how you set the format:

<%= Html.Calendar("bDay", "MM/dd/yyyy") %>

Also lets say you want a button to invoke the menu, not just clicking in the textbox.

 <%= Html.Calendar("calBtn", "txtDate", "MM/dd/yyyy")%>
 <input type="text" id="txtDate" name="txtDate" />
 <input type="button" id="calBtn" name="calBtn" value="Pick Date" />

Here is a download of a working project with all the necessary files you need to make these controls work either with CSS Selectors or with Html helpers.  I basically created a new mvc web app from scratch using their new templates in Preview 4 that has the membership stuff in it, so that it works with the base starter project that Microsoft provides. 

Download: http://www.jimzimmerman.com/downloads/MvcPreview4AjaxToolkit.zip

Tell me what you think.  I hope you find it useful.  I am leaning towards doing everything with CSS Selectors, but am finding it pretty helpful to use Html helpers also.  I am working on Collapsible Panel and Popup Control next.  I know the Microsoft Ajax team is working on some things with the Toolkit also and look forward to seeing how they integrate it.

Saturday, August 16, 2008 6:27:40 AM UTC #     |  Trackback

 

TempData not working with SQL Server Session State and ASP.NET MVC Preview 3#

We are extensively using ASP.NET MVC Preview 3 for one of our web projects and we are loving it.  The other day when we deployed our app to our web farm, we realized that we got an error when typing in a wrong password and that our app was not returning the handled error of improper login and the app was blowing up with the error, "Unable to serialize the session state."  When we tracked it down we realized that this only happened when using TempData instead of ViewData. 

So, when redirecting to an action in MVC, you will lose anything you have in ViewData so if you want to carry an error to another action and show it in the next view that is rendered, then you will need to create your own session variables or use the built in TempData which works great except when you are using SQL server for session state instead of in-proc.  Well we have no choice than to use SQL server for session state since we have several web servers on our web farm. 

So, since ASP.NET MVC source code is available on Codeplex, I decided to investigate what class makes up TempData.  I found that TempData uses an internal class called Pair and it is not marked as serializable.  Dare I try to fix it and run with our own version of System.Web.Mvc?  Why not, it is just C#?  the fix was very easy and after adding the serializable attribute to the Pair class.  Pair.cs found in the folder Util inside of the MVC project.

namespace System.Web.Util {
    using System;

    // Generic Pair class.  Overrides Equals() and GetHashCode(), so it can be used as a dictionary key.
    [Serializable] 
    internal sealed class Pair<TFirst, TSecond> {

 

All the tests now passed and most importantly, our site works perfectly.  It was very empowering to add a simple change to the framework and not have to wait for a fix from Microsoft.  I feel so much more comfortable using frameworks that have the source code with them.  That is why we use ASP.NET MVC and Subsonic 2.1.

Friday, June 27, 2008 7:21:40 AM UTC #     |  Trackback

 

Moving from ASP.NET Webforms to ASP.NET MVC#

I am currently moving a project from a typical webforms project to the new asp.net mvc framework project.  I am already seeing some huge benefits that I wanted to share with others.  Of course there is no viewstate in asp.net mvc and this has its advantages.  The most significant change is the size of my home page.  the amount of text in the page is down over 40%.  so my home page was 32K and now it is only 18K.  I am noticing even quicker page response times also running locally and on the server.  The page just seems to render faster, especially when hitting the back button.  Also it just feels cleaner without all those controls and I can have 100% control of the html that spits out.  It reminds me of back in the classic asp and PHP days, but without all the pain.  I did not realize how much I missed just writing straight html without controls.  

At first I thought that it would slow me down and that I would have to write more code,  but I think the opposite is true.   I don't have to deal with code behind any more and I can test so much easier now the action that every form calls.  I was able to convert an existing website that had Ajax control toolkit, membership services and several contact forms in about a week.  Not even that if you counted the hours.  Not too bad.  These tutorials really helped me out: http://www.asp.net/LEARN/3.5-extensions-videos/#mvc

We are about ready to go into production with these bits as we see that it is very stable and since we have the source code to the entire framework in our source tree, it feels safe since we can always fix a bug in the framework if we need to.  You can get the source code here: ASP.NET MVC Preview 2 Source Code

Thursday, May 22, 2008 9:47:11 AM UTC #     |  Trackback

 

 

All content © 2014, Jim Zimmerman
Book
New Book
Links to me
On this page
Sponsors
Calendar
<April 2014>
SunMonTueWedThuFriSat
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910
Archives
Tags
Blogroll OPML
Technorati
Favorite Links
Disclaimer

Powered by: newtelligence dasBlog 1.9.6264.0

The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

Send mail to the author(s) E-mail