Update for the .NET Framework 4

The first update was shipped with VS 2010 SP1. You can read about the framework update here: https://support.microsoft.com/kb/2468871. One of the features of HTML 5 is there are now new input types such as date, url, email and more. While most browsers today don’t support these new input types you should still use them today because most mobile devices do support them and it changes the keyboard these devices display. For example specifying type=”email” will cause many phones to provide the “@” character on the keyboard. type=”email” or type=”url” will cause many phones to provide the “.com” button on the keyboard as a shortcut.

Before the update above it was illegal to use these input types in Web Forms. The following would generate an error:

<asp:TextBox id=”TextBoxEmail” runat=”server” type=”email” />

Because we were validating what values could be provided for the type= attribute. This validation was relaxed as part of the above update.

Reliability Update 1 for the .NET Framework 4

Earlier this week on patch Tuesday another update was released called the reliability update 1 for .NET 4: https://support.microsoft.com/kb/2533523. This update solves a variety of problems with HTML 5 input types. If you used any of the HTML 5 input types (a few mentioned above) with server controls they would not behave properly in the following cases:

UpdatePanel – The values of any HTML 5 input types would not be posted back on postback.

Validation Controls  - The ASP.NET validation controls such as asp:RequiredFieldValidator would not provide client validation on HTML 5 input types.

Callbacks – ASP.NET pages that are using callbacks would not post back the values of any HTML 5 input types.

All of these items were corrected with the second update listed above. Even more support for HTML 5 will be coming in the next version of the framework and we hope to start announcing details around that soon. Note the above two updates also fix quite a few other things in .NET 4 as well so I suggest you read the details from the links.

Over the past six months, as the jQuery and Microsoft teams have worked on the plugins, we've decided together that the richness and power of these plugins makes it important to develop them in the context of a strong relationship with a collaborative sub-team within jQuery.

To facilitate this, the jQuery team has announced some changes in the way plugins are managed. Each plugin will now be owned by a sub-team within the jQuery Project, such as the jQuery UI team or the jQuery Core Dev team.

When jQuery 1.5 shipped earlier this year, you might have wondered why jQuery Templates was not part of that release. The jQuery announcement clarifies this -- jQuery Templates is a key part of jQuery functionality, but it will nonetheless continue as a separate plugin in jQuery UI rather than shipping as part of jQuery Core.

This is a continuation of the investment that Microsoft is making in jQuery and jQuery UI. Our investment isn't limited to the plugins I just mentioned. For example, another important investment has been the new jQuery UI Grid project that we've provided support for at many levels. We're now shipping both jQuery and jQuery UI in our newer products, and we plan to have great support in ASP.NET for developers who want to use the jQuery UI Grid in their projects.

Moving forward, we'll continue to be involved in the design and development of jQuery Templates. This includes our contributions to the grid project, since the jQuery UI Grid is using the jQuery Templates plugin. Microsoft will also continue to work on Data Linking and its integration with jQuery Templates. We'll move that work to its own source repository, plus we'll take ownership of the documentation.

We think these changes are a valuable step towards helping the Microsoft and jQuery teams and the community to move these plugins towards RTM quality and to ship them as great V1 products!

Updated jQuery

We have added both jQuery 1..4.3 and jQuery 1.4.4 to the CDN,  plus there are vsdoc files for both of these releases. These new releases are available with these URLs:

jQuery version 1.4.4

• https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.js
• https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js
• https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4-vsdoc.js

jQuery version 1.4.3

• https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.3.js
• https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.3.min.js
• https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.3-vsdoc.js

New Domain Name

The Microsoft CDN is now available from a new domain name: ajax.aspnetcdn.com. We added support for this new domain name to increase the performance of the CDN. The primary benefit of the new domain is that it is not the microsoft.com domain, any requests to the microsoft.com cause the browser to send cookies for that domain across the wire. Since many people may have visited a Microsoft web property this means extra information is coming across the wire for those requests potentially slowing down the request. The new domain is a domain a user would never have visited in their browser and thus requests will have no additional payload. Testing has shown that this can increase speeds by up to 20%.

The previous domain ajax.microsoft.com is still available and will always remain available so all links to it will continue to function as usual but going forward we recommend people use the new domain.

Full details of the Microsoft CDN are available here: https://www.asp.net/ajaxlibrary/cdn.ashx

SSL Support (12/1/2010)

When we first created the new CDN ajax.aspnetcdn.com it did not support SSL (https://) style requests. As of 12/1/2010 the CDN has been updated to support SSL as well now.

• - Web Pages Beta 2 – An update to our new support for adding simple Razor syntax pages to to web applications.
• - MVC 3 Beta – An update to our preview release from a few months ago with several enhancements around razor, helpers, unobtrusive javascript, dependency injection and more.
• - NuPack – Package manager for finding, adding, upgrading libraries for your .NET projects. This makes it super easy to find libraries for writing your applications and easily installing them into your projects including their dependencies.

I want to focus on Web Pages today which I’ve not written about since we released the first release but I’ve been involved in from the beginning. If you don’t have any background on Web Pages this is a very simple way to do web development drawling parallels to programming in classic ASP or PHP. It does not require development tools like Visual Studio, or a build system to build projects. You can just take an empty folder and and drop in a .cshtml (C#)or .vbhtml (Visual Basic) file into the folder that contains a combination of markup and razor syntax and point your browser and you are off and running.

For someone like myself Web Pages reminds me of when I first started web programming years ago with classic ASP. I could take my HTML files and add a little bit of inline code to get dynamic web pages. It was a great way to learn web programming and Web Pages brings this same simplicity to ASP.NET. All of the concepts you learn while programming in Web Pages you should be able to use if you decide to move up to our more complicated frameworks like MVC.

To learn more about Web Pages check out our online manual: https://www.asp.net/webmatrix/tutorials/1-getting-started-with-webmatrix-and-asp-net-web-pages.

Today I’m going to talk about Request Validation which is a security feature that is built in ASP.NET. Request Validation is a security measure that is built into ASP.NET. The purpose of this feature is prevent script or HTML injection attack in websites. Such attacks happen when a webpage has some input fields on the page that accept input. If a person fills these input fields with script or html and the web page outputs the content back the user the web browser will run the script or html potentially causing the browser to do something bad.

To prevent this ASP.NET looks at any input that it sees and if it looks like unencoded html and error will happen and the request will not be processed. Lets take a simple application and see what this looks like:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <form method="post" action="">
            <label for="description">Description:</label>
            <textarea name="description">
            </textarea>
            <br />
            <input type="submit" value="Submit"></input>
        </form>
        <br />
        @if (IsPost) {
            <div>
                Your description is: @Request["description"]
            </div>
        }
    </body>
</html>

And the press the submit button I will get an error instead of having my page run properly:

This shows an example of ASP.NET working to be secure by default and making the developer make the decision if they want allow such input. You might be asking yourself why would you want to allow someone to type html into a field. The best example is when you build a web page that contains a rich html editor, today you see these in all kinds of applications on the internet such as blogs. I’ve added the TinyMCE editor to my application because I want to have a rich editor. I downloaded the scripts from the TinyMCE site and added them to the scripts folder in my project. Next I added the following markup above my form:

<script type="text/javascript" src="scripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
    tinyMCE.init({
        mode : "textareas",
        theme : "simple"
    });
</script>        

Now any in the description field will fail with the same server error we saw above when pressing the submit button. This is because the fancy effects of being able to bold, strike through and underline you see in the example above happen because the field contains html. I need someway of turning off the validation for just this one field. Older versions of ASP.NET have had ways of turning this off:

ASP.NET 1.1 – ASP.NET 3.5 SP1:

In Web Forms you can add the following page directive: <%@ Page validateRequest="false" %>

In MVC you would place the following attribute on the action method for your controller: [ValidateInput(false)]

But these are not a good solution because they turn off Request Validation for the entire page! If I had other fields on the page for example a <input type=”text” name=”name”/> field in which I do not want to allow html or script input it is no longer protected because I’ve turned off request validation for the whole page. Now I need to manually validate the input for each field to make sure the input is safe.

ASP.NET 4:

We made Request Validation even stronger by making it happen earlier in the request pipeline. This meant that even low level ASP.NET components called Handlers and Modules could be protected. But because we are validating input so early you can no longer turn it on or off at the page level. If you had pages that needed to support html input you had to disable the .NET 4 mode and re-enable the .NET 1.1/2.0 mode using settings in the web.config file.

The Future: Web Pages, MVC 3 and in the next framework Web Forms:

Clearly we needed a much better solution. I should be able to turn off the request validation just for the fields that need to support html type input. While building Web Pages we were able to keep both the additional security we enabled in .NET 4 and support this using the new Validation.Exclude method. Here is how I add support for this by adding it to the top of my page:

@{
    Validation.Exclude("description");
}

You might be asking yourself why does the text in the rich html editor look one way and when I display in the page does it look different? We have just run into another security feature that ASP.NET razor syntax has, whenever we output values we automatically encode them:

Your description is: @Request["description"]

@if (IsPost) {
    var desc = new HtmlString(Request["description"]);
    <div>
        Your description is: @desc
    </div>
}

In this blog post I’ve covered a lot of topics but to recap:

• - Web Pages validates input by default for security
• - Web pages allows this validation to be disabled on a field by field basis
• - Web pages encodes output by default for security
• - Web pages allows output to be put into an HtmlString which allows it to be output with encoding

I hope to post about more Web Pages features soon…

Matt Berseth: Building a VS2008 Styled Grid with the GridView Control

4 Guys From From Rolla.com: Improving the Sort Arrows GridView Control

Some of these implementations have various limitations such as they don’t work if you use AutoGenerateColumns = true. In .NET 4 we addressed these problems by adding a couple of new properties to the GridView:

<SortedAscendingHeaderStyle />
<SortedDescendingHeaderStyle />
<SortedAscendingCellStyle />
<SortedDescendingCellStyle />

These allow you to easily set specific styles on both the header cells and the item cells of the GridView. Here is an example of this put to use in a GridView:

   1: <asp:GridView ID="GridView1" runat="server" AllowSorting="True" DataSourceID="EntityDataSource1" PageSize="5">

   2:     <SortedAscendingHeaderStyle CssClass="sortasc" />

   3:     <SortedDescendingHeaderStyle CssClass="sortdesc" />

   4: </asp:GridView>

What this does in when the grid is being sorted the header of the grid the sortasc or sortdesc class will be applies to the header cell like this depending on the direction it is being sorted on:

<th style=”sortasc”>Column Header</th>

<th style=”sortdesc”>Column Header</th>

And I’ve got some simple CSS defined that will apply a sort arrow:

   1: th.sortasc a  

   2: {

   3:     display:block; padding:0 4px 0 15px; 

   4:     background:url(img/asc.gif) no-repeat;  

   5: }

   6:  

   7: th.sortdesc a 

   8: {

   9:     display:block; padding:0 4px 0 15px; 

  10:     background:url(img/desc.gif) no-repeat;

  11: }

The end result will look like this showing the grid sorting each direction on the LastName column with nice arrows showing the direction.

I’ve created a sample of this you can download and try out: https://www.cshonline.com/aspnet/gridsortarrows.zip.

Another common request for the GridView deals with how it displays when there is no data. It basically does not display at all. You will basically see a set of empty <div></div> tags in the page. There is a template inside the Grid that you can use to display some text:

   1: <EmptyDataTemplate>

   2:     Empty GridView

   3: </EmptyDataTemplate>

But a lot of the time what you really want is to display the header row of the Grid showing what COULD be displayed. Once again if you search around the Internet you might find hacks to show the header. Once again because this was a common ask we added support for this in .NET 4. You can now use the ShowHeaderWhenEmpty property to show the header. Here is what the markup would look like:

   1: <asp:GridView ID="GridView1" runat="server" DataSourceID="EntityDataSource1" ShowHeaderWhenEmpty="true">

   2: </asp:GridView>

And here is what a GridView would display with no data with this property enabled:

Hopefully all of these new options will make using the GridView easier. Enjoy!

Persisted Selection

When using our data controls that support paging like GridView and ListView there is some funky behavior today. If the user selects the first row of data and then moves to the next page the first row of the data is selected. This behavior seems weird, especially when you are in a master detail scenario where you show the details of the selected row on the same page. As you page through your data the detail view would keep changing as you move from page to page. Here is what the old behavior looks like:

You can see in the first image that the second row is selected.

As I move to the second page the second row which is a different user is selected. This is probably not what a user would expect when using the controls. Now I’m going to enable a new property on the control called EnablePersistedSelelection and set it to true.

   1: EnablePersistedSelection="true"

And now we can look and see what the behavior looks like:

You can now see that I select Scott Hunter in the first page.

And move to the second page and no row is selected.

but moving back to the first page Scott Hunter is still selected. This should make master / detail view work better we think this is the behavior that someone would expect when using the control anyways.

- Handle the ItemCreated event and inside the event you can call FindControl and find the control for each column manually and set the value on the control using whatever property it supports to set its control.

- Handle the Inserting event on the data source control (if you are using one) and check to see if fields have values and if not set the default. This is problematic because this happens after the user has pressed Insert so they do not see the default value until AFTER the insert operation.

One of the features we enabled in .NET 4 was the ability to enable Dynamic Data functionality with a single line of code in an existing web page. By enabling Dynamic Data you can easily use some of its features to make this super simple.

In my example I’ve got a table called Contact which has an Id, FirstName, LastName and Age fields. I’ve created an Entity Framework model around my database giving me rich classes for the tables in my database. Here is what my page markup looks like:

   1: <asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="125px" 

   2:     AutoGenerateRows="True" DataKeyNames="Id" DataSourceID="EntityDataSource1" 

   3:     DefaultMode="Insert">

   4:     <Fields>

   5:         <asp:CommandField ShowInsertButton="True" />

   6:     </Fields>

   7: </asp:DetailsView>

   8: <asp:EntityDataSource ID="EntityDataSource1" runat="server" ConnectionString="name=DatabaseEntities" DefaultContainerName="DatabaseEntities" EnableFlattening="False" EnableInsert="True" EntitySetName="Contacts">

   9: </asp:EntityDataSource>

And here is what my code behind markup looks like:

   1: DetailsView1.EnableDynamicData(typeof(DatabaseModel.Contact));

   2: var contact = new DatabaseModel.Contact();

   3: contact.FirstName = "Scott";

   4: contact.LastName = "Guthrie";

   5: DetailsView1.SetMetaTable(DetailsView1.GetMetaTable(), contact);

My code is doing a couple of items here:

1: Enabling Dynamic Data functionality for the data control passing it the type of data the control is hosting. This is the object from my Entity Framework model.

2 – 4: Creating a dummy record of Contact and filling in the fields with whatever data I want to use for my defaults.

5: Calling the SetMetaTable method on the data control passing the MetaTable which I get from the GetMetaTable method on the control and then passing my object that contains the default values.

Now if I run my page I will get the DetailsView to show up with my defaults automatically set. Note in my example I’m using auto generated columns. If you choose to manually specify your columns you will need to specify them using either DynamicField (DetailsView/GridView) or DynamicControl (FormView/ListView) for this functionality to work because these types inject Dynamic Data fields templates which allow this insert functionality to work.

Also you can also specify the defaults using a dictionary if you don’t want to create a full object. Here is an example of what that would look like:

   1: DetailsView1.EnableDynamicData(typeof(DatabaseModel.Contact));

   2: var contact = new Dictionary<string, object>() {

   3:     {"FirstName", "Scott"},

   4:     {"LastName", "Guthrie"}

   5: };

   6: DetailsView1.SetMetaTable(DetailsView1.GetMetaTable(), contact);

I’ve created a fully running sample of this you can download as well. The sample requires .NET 4, VS 2010 and SQL Express 2008 to be installed to run. Here is the link the sample: https://www.cshonline.com/aspnet/insertdefaults.zip

Here are a couple of my favorite “data” related features:

1) The Entity Framework now supports the ability to the ability to pluralize entity sets and singularize entities. This means when I refer the table the table will be called “Products” but the actual class that I work on in my application is a “Product”. This feels much more natural then Entity Framework 1 where I would write:

Products product = new Products();

while in 4.0 this becomes:

Product product = new Product();

which feels more natural and looks better in my code.

Here is the UI in the Entity Model Wizard for enabling this (note it turned on by default)

2) The Entity Framework now supports the ability to include “foreign keys” in the data model. In version 1 of the Entity Framework if I had a Product table that contained a CategoryID which referenced a record in the Category table the generated Entity Framework model would convert the CategoryID into a navigation property which would drill directly in the category table. While this simplified some scenario’s it made web scenarios more difficult. Normally I would represent the this in using a DropDownList control which would contain the primary key and the name of the records from the category table. When saving saving the record I would just want to assign the selected CategoryID from the DropDownList to the Product class. But with navigation properties I would have to revert to some very ugly and non-discoverable code for setting the CategoryID since it not exist. Entity Framework 4 now includes the ability to have foreign key columns added directly to the entity allowing me to either set the foreign key or the navigation property making web scenarios easier to program:

           EF 1.0                    EF 4.0 

3) QueryExtender support is now available for EntityDataSource. In .NET 4 Beta 1 and in the Dynamic Data Preview releases on CodePlex we introduced a very exciting extender control for the LinqDataSource called the QueryExtender. We created this control in response to feedback we received after releasing Dynamic Data 1.0 that our customers wanted an easy way of filtering or searching the data that their data source controls returned aka “How do I implement a search”. This pattern with data source controls can get fairly complicated and we wanted to provide something simple. The QueryExtender allows the following types of searches:

Search: Searched for a string across any number of columns

Range: Filters data based on if the value of a column is between a given range

Property: Filters based on a column matching a value

Custom: Event is fired in which the developer can customize the LINQ expression.

Here is an example of using the QueryExtender with the EntityDataSource. It takes the value from TextBox1 and uses compares it to the ProductName field and only returns rows which have the text from TextBox1 in the ProductName field:

<asp:EntityDataSource ID="EntityDataSource1" runat="server"
        ConnectionString="name=NORTHWNDEntities"
        DefaultContainerName="NORTHWNDEntities" EnableDelete="True"
        EnableFlattening="False" EnableInsert="True" EnableUpdate="True"
        EntitySetName="Products">
</asp:EntityDataSource>
<asp:QueryExtender ID="QueryExtender1" runat="server" TargetControlID="EntityDataSource1">
    <asp:SearchExpression SearchType="Contains" DataFields="ProductName">
        <asp:ControlParameter ControlID="TextBox1" />
    </asp:SearchExpression>
</asp:QueryExtender>

4) EnableDynamicData extension method. We introduced Dynamic Data in .NET 3.5 SP1 but it put some serious demands on the developer: Required the developer to be using Linq to SQL or Entity Framework, Required the developer to start a new project to get the Dynamic Data support files, Provided a different programming model. With Beta 2 we have added this new feature which can be enabled on our data controls like this:

ListView1.EnableDynamicData(typeofProduct))

This one line of code will automatically bring many of the features that Dynamic Data provides:

- Automatic validation

- Support for Data Annotations on objects to control validation and display properties

- Support for field templates for customizing UI behavior based on data type

This should allow any developer to utilize the power of Dynamic Data without radically changing their application or requiring Linq to SQL or Entity Framework.

There are many other changes and updates to our data support and I will try and blog about it over the next few weeks.

The preview releases of Dynamic Data contain much of the new feature sets that will be available when we release .NET 4. The cool thing is you can start using a lot of the new features against .NET 3.5 SP1 now using these releases.

When we look back and see how people view Dynamic Data we regret that people immediately think of it as scaffolding of data. This is something that it does do, and I think it does a pretty good job at it. But Dynamic Data is a lot more then that, providing a new templating mechanism called Field Templates which allow the default markup for many of our built in data controls to be more easily customized. These field templates also support validation by default (something our rich data controls did not) which can be customized by adding metadata to data objects.

In the past to enable Dynamic Data functionality in a web application the application needed to follow a couple of rules:

- It had to have a data model such as Entity Framework or Linq to SQL

- The data model had to be registered at startup in Global.asax

- The DynamicData directory had to exist in the web application

One of the new features this new preview release supports is adding field templates and validation to any ASP.NET web page without having to meet these requirements. It is as simple as:

GridView1.EnableDynamicData(typeof(Product));

What does this do for you? Today a control like GridView supports all kinds of high level features such as paging, sorting, viewing, editing but it provides no validation of data at all. So if your database has an integer field the end user would be able to type any data they wanted and when saving the record an ASP.NET yellow screen of death screen would appear (on the development box) saying that the data could not be converted to an integer. By enabling Dynamic Data automatic validation will occur because validation is built into the field templates that would render the column and a nice error message will appear in the page saying “Field XYZ must be an integer”.

To see this in action download the preview release and try out the SimpleDynamicDataSample.