Put together this video showing how easy it is to install Wishlist now that we have shipped on www.nuget.org :)  Note that the best thing to do will be to watch in 1080p.

A brand new year is upon us and it’s time to get cracking with WebMatrix again…and go back to school :).  Last year we ran a successful product walkthrough for WebMatrix Beta 2 with our students from around the world, gathering awesome feedback for the final version of WebMatrix which is coming soon!  I’d like to take this chance to thank all the students who participated in this effort…you have really helped make the final product much better than it would have been otherwise.

In 2011, we’re looking, as always, at bigger and better things.  One of the ideas that has been floating around is the concept of a WebMatrix college course that you could take for actual credit.  Of course, this is going to require coordination with college educators, but we think we’re up to the challenge :)

If your school is still using an antiquated language to teach their web development 101 course, and you’d like to switch to WebMatrix, we’d like to hear your voice – better yet if you have contacts from your school and would like to be one of the first to give the program a try!  Comment on this post or email wptsdrext at microsoft.com.  We look forward to partnering with you guys ^^.

James Senior and I are at it again, this time in my office :).  Check out the newest video on WebMatrix Beta 2 where we discuss Themes, Package Manager, Helpers, and the new HTML 5 templates here.

For those of you who follow Channel9, I recently did an interview with James Senior (@jsenior) about the new ASP.NET Web Pages Helpers. Check it out here and let me know if you have any questions :)

Hello everybody!  It’s been a looong while since my last post and a lot has happened since then.  I switched from working on ASP.NET Ajax to ASP.NET WebPages (using the “Razor” syntax), and until recently, WebMatrix and ASP.NET WebPages haven’t been public, so I couldn’t blog about the awesome feature set that we’ve been building out.  There are numerous posts on the release, the most prominent of which is on ScottGu’s Blog.  Another good overview for WebMatrix can be found on the Coding QA Blog.

So what have I been up to?  Once of the things that Coding QA talks about in Episode 33 is our team structure.  Starting in January, I joined the Product Presence pillar and started contributing to product design and testing from a customer perspective.  One of the things that we did as part of this highly effective process was build an application, the Wishlist.  The idea is that it allows users to create lists of items they would like others to purchase for them.  We got to the point where we had enough feature coverage that we decided it would make sense to ship it as a ASP.NET WebPages template.  In this post we’ll discuss getting started with the template from a user perspective and run through a high-level feature overview, touching on places where we’ve used ASP.NET WebPages helpers and functionality.

image

Getting Started

You can get started by downloading the Wishlist template.  Assuming you’ve already installed WebMatrix, you can extract the zip and then open up the site “From Folder” in WebMatrix.  Then, you’ll be tasked with changing some initial settings in _Start.cshtml to set up ReCaptcha and email, so that registration will work with a ReCaptcha, and email will be sent for user confirmation, and in the case of a user forgetting their password.  You can register for ReCaptcha public and private keys at www.recaptcha.net.  As for email, the configuration allows you to set the SMTP server, port, and whether or not you need to use SSL.  By default, the template is set up to work with Hotmail if you simply enter UserName, From, and Password.  UserName/From is going to be your Hotmail e-mail address, and password is going to be your password.  I recommend setting these parameters so you get a good feel for the end-to-end functionality of the site as originally intended :)

Tip: If you don’t want to set up email or ReCaptcha, you can still use the template normally…mail will not be sent and you will be able to use the links directly in the page

Registration

Now that you’ve set up Mail and ReCaptcha, you can Register your user account.  By default, Wishlist takes advantage of the user confirmation feature in SimpleMembership (Matthew Osborn has a detailed post about SimpleMembership here), and will send mail to the user asking them to confirm the account before they can login.

image

After you have registered and confirmed your account, you can login (there’s also a Forgot Password feature that takes advantage of the recovery question and sends an email which I will cover in a future post) where you will be greeted with this UI: 

image

I’m not going to go into all feature areas in extreme detail, but one thing you will notice is that you can edit properties in your Profile.  This is what you would expect, it allows you to change your email and your password.  Let’s go ahead and create a list by clicking on “Create List”.  I’m going to call it Christmas, with a blank description.  You’ll notice that jQuery validate is enabled, and I will get a client side validation error before I go back to the server:

image

Now I can create the list.  So now there are two lists:

image

The UI allows you to make a list default, and also there is an [x] to delete a list.  If I click on this, I get presented with a jQuery dialog, which works as you would expect.  The “Default” feature allows me to navigate to http://localhost/wishlist/displaylist/username and have that list displayed.  For details on how this works, see DisplayList.cshtml.

image

Note that I can also click on the “Edit” button or icon and modify the name or description of my list.  If I click on the name of the list, I will be presented with this UI:

image

You’ll notice that this allows you to add items to the list, as you would expect.  There’s also a LinkShare (a helper available in ASP.NET WebPages), which allows me to easily share out the link to my list via Digg, Delicious, Buzz, Facebook, Reddit, StumbleUpon, or Twitter.  Here’s what the page looks like after I’ve added my awesome car to it:

image

You’ll notice that there is a “Claimed” field.  You can change the value of this field via the “Edit” button, or if you log out and navigate to the same page again, you can claim the item, as this screenshot shows:

image

This page, as well as the “Manage Site” page we’ll look at later, make use of the WebGrid helper to display information from the database, which enables sorting and paging functionality out of the box.  The last page we’ll take a look at is the “Manage Site” page (UserManagement.cshtml).  I’ve added another user, which has an email with an associated Gravatar.  You can see that this page lets me perform administration tasks for my users.  It also shows me if they have been confirmed or not, and has Ajax functionality enabled for the WebGrid so you can perform operations without causing a full postback to the server.  You can also click on selection to update a user's first and last name, email, and toggle whether or not they are an administrator.

image

This has been a very brief high-level overview of the Wishlist site.  I plan to do more posts in the future where I look at particular pages in detail.  Please post your feedback on the WebMatrix forums or comment here for any issues or suggestions you have.  Thanks!

Thanks to everybody who showed up at the talk that Simon Calvert and I gave on an overview of ASP.NET 4 Webforms!  Your participation and feedback were much appreciated, and as promised, I’ve attached the demo that Simon and I built live, as well as the slide deck, to this post.  For those of you who missed it, the talk gives an overview of the SEO/Routing improvements, XHTML 1.1 compliance, ClientID control, ViewState reduction, CSS improvements, Microsoft Ajax Preview 6 updates, Dynamic Data in 4.0, QueryExtender, and the Chart Control.  There was a lot to cover in an hour :).  For those who went to the Ajax talk I did with James Senior, here’s a link to the Preview 6 download directly with the samples.  Enjoy the demos and deck, note that the demos require VS 2010 Beta 2, which you can get hereNOTE: The demos attached to this post need you to drop your own copy of the NorthwindDatabase and the AspNet DB (the AspNET DB is in the default ASP.NET 4 templates).  I ran into an upload file size limitation on community server.  If you would like the full demo with the databases I have a RapidShare link here.  Note that the admin user/password is Jim/aspNET

Recently there was an issue posted to the ASP.NET customer forums where  somebody was having problems using Profile Services with ASP.NET Ajax Preview 5.  The reason is that the scripts for Application Services have been moved to a separate script file (to improve script download size).  We did not include the script in the Preview 5 release however, so if you want to use Preview 5 with Application Services features, you need to work around by taking the Sys.Services code and merging it into the Preview 5 MicrosoftAjax.js file.  For your convenience and at Dave Reed’s suggestion, I’ve gone ahead and done this, so if you are targeting this scenario, use the new versions of MicrosoftAjax.js and MicrosoftAjax.debug.js that are included in the zip file attached to this post.

Many of you have probably heard that we’ve released ASP.NET Ajax Preview 5 on Codeplex, and it’s available here.  Aside from all the cool updates to the codebase, Preview 5 also includes some updated samples, as well as support for UpdatePanel when using ASP.NET 3.5 SP1. 

Previously, this didn’t work because of updates to the scripts for compatibility with 4.0.  Now, with this fixed, you can easily add Ajax Preview 5 functionality to existing sites and enjoy continued operation.  There is a very simple example included with the Preview 5 samples that demonstrates this functionality (8_UpdatePanel.aspx under the 1_Basic_DataView folder).  I’ll quickly cover here how to get your existing UpdatePanel working with the new Preview bits.

Basically, all you need to have is an additional ScriptReference to the included MicrosoftAjaxWebForms.js file for Preview 5 to work with the UpdatePanel.  So your ScriptManager should look something like this:

<asp:ScriptManager ID="sm1" runat="server">
    <Scripts>
    <asp:ScriptReference Name="MicrosoftAjax.js" Path="~/MicrosoftAjax/MicrosoftAjax.js"/>
    <asp:ScriptReference Name="MicrosoftAjaxWebForms.js" Path="~/MicrosoftAjax/MicrosoftAjaxWebForms.js" />
    </Scripts>
</asp:ScriptManager>    

This will allow you use any UpdatePanels that you have on the page in exactly the same way you did in 3.5 SP1, while providing the flexibility for you to include other Ajax Preview scripts and start using those features side-by-side.

I would argue one step further, however, and state that in many cases, where you were using an UpdatePanel before, you can now move to using ADO.NET web services coupled with the Preview 5 scripts. 

To illustrate this, let’s take a look at an old school sample using UpdatePanel and GridView.  This sample illustrates using the UpdatePanel and GridViews to create a simple read-only employee name entry system.  A screenshot is shown below:

image

We’re going to put this sample to shame using Preview 5.

There’s 146 lines of markup in this page, and every time you hit “Insert”, you’re looking at a partial-page postback, which has to hit the server to do processing, pull down the data for the new page, and then update the appropriate portions.

If instead we use a DataView hooked up to an ADO.NET data context, we can build a similar application which will be much more efficient (dealing with JSON instead of full sets of page data on the wire), much shorter, and much simpler.  Let’s begin.

Since we already have the samples, let’s create a new .aspx page, Employees.aspx, under the 1_Basic_DataView folder.  Let’s set up the following ScriptManager:

<asp:ScriptManager ID="sm1" runat="server">
    <Scripts>
    <asp:ScriptReference Name="MicrosoftAjax.js" Path="~/MicrosoftAjax/MicrosoftAjax.js"/>
    <asp:ScriptReference Name="MicrosoftAjaxWebForms.js" Path="~/MicrosoftAjax/MicrosoftAjaxWebForms.js" />
    <asp:ScriptReference Path="~/MicrosoftAjax/MicrosoftAjaxTemplates.js" ScriptMode="Inherit"  />
    <asp:ScriptReference Path="~/MicrosoftAjax/MicrosoftAjaxDataContext.js" ScriptMode="Inherit"  />
    <asp:ScriptReference Path="~/MicrosoftAjax/MicrosoftAjaxAdoNet.js" ScriptMode="Inherit"  />
    </Scripts>
</asp:ScriptManager>    

 

Users of previous previews might recognize that there is a new file here, MicrosoftAjaxDataContext.js, which now contains the DataContext and AdoNetDataContext classes.  Of course, these classes become more useful in read/write scenarios, but I’m going to use them in this read-only example for illustration purposes.

Let’s also take this opportunity to set up our <body> tag for DataView use by adding the appropriate namespaces.

<body xmlns:sys="javascript:Sys" xmlns:dv="javascript:Sys.UI.DataView">

Also remember to add the .sys-template style to your <head> section:

<style type="text/css">
    .sys-template {display:none}
</style>

So now we’re ready to add our AdoNetDataContext. Let’s set up our pointer to the service:

<script type="text/javascript">
        var myDC = new Sys.Data.AdoNetDataContext();
        myDC.set_serviceUri("../Services/ImagesDataService.svc");
</script>

So here I’ve created a new AdoNetDataContext and pointed its serviceUri to my ADO.NET Data Service.  Now I’m going to set up a DataView to query this service for People so that I can get a list.  So I enter the following markup:

<div id="inputTable">
    First Name: <input id="firstNameInput" type="text" /><br />
    Last Name: <input id="lastNameInput" type="text" /><br />
    <a href="#" onclick="insertPerson()">Insert</a>
    <a href="#" onclick="cancelPerson()">Cancel</a>
</div>
<br />Employees:<br />
<div id="employeeView" class="sys-template" sys:attach="dv" 
                    dv:dataprovider="{{myDC}}" dv:autofetch="true" dv:fetchoperation="People">
    {{FirstName}} {{LastName}}<br />
</div>

So here I’m setting my DataView’s dataprovider to the AdoNetDataContext that I created, turning on autofetch, and specifying the fetchoperation to query for “People” from the database.  I’ve also set up a simple UI which includes links to the insertPerson() and cancelPerson() JS functions, which I’m going to write now:

function insertPerson() {
    var firstName = $get("firstNameInput").value;
    var lastName = $get("lastNameInput").value;
    if (firstName != "" && lastName != "") {
        var myObject = {
            FirstName: firstName,
            LastName: lastName
        }
        myDC.insertEntity(myObject, "People");
        var data = $find("employeeView").get_data();
        Sys.Observer.insert(data, data.length, myObject);
        $get("firstNameInput").value = "";
        $get("lastNameInput").value = "";
    } else {
        alert("You must enter a first and last name!");
    }
}
function cancelPerson() {
    $get("firstNameInput").value = "";
    $get("lastNameInput").value = "";
}

So basically in insertPerson(), I’m creating a person object based on the first and last name that were entered by the user (assuming they weren’t blank), and inserting an entity into my AdoNetDataContext.  For the purposes of this example, this isn’t strictly necessary, but I do it here for illustration purposes (in case you want to add read/write later).  Then, I simply need to update the rendered data on the client, and I do so using the insert method of the Sys.Observer class, which allows me to insert the person object in a way that is recognized by the DataView.  Then I clear the input fields for the next person to be entered.  In cancelPerson(), I’m doing something similar, where I simply clear the input fields.

Of course, it’s easy to add read/write scenarios to this sample.  I encourage you to check out the ImageOrganizer sample and associated code there for further examples.

image

So there you have it.  Although it doesn’t do exactly what the UpdatePanel sample does, it’s essentially the same idea.  Final line count: 67.  Win :)

The kind folks over at Coding QA Podcast (www.codingqa.com) did an interview with me yesterday, where I talk about some of the challenges with testing and building Microsoft AJAX and talk a little bit about myself.  There’s also a brief discussion of the Lightweight Test Automation Framework, and the new IE8 Debugger.  I forget what the questions are every so often, but in my unbiased opinion it’s a pretty good listen ;).  Click here to jump to the Coding QA Podcast site.

Politian has posted a lot of samples on using the new ADO.NET Data Services features in ASP.NET AJAX Preview 4 (in fact, at the time of this posting, the entire blog is dedicated to Preview 4!).  He walks through some basic scenarios, but then goes into detail about interesting sample topics as he builds his MIX Presenter Application.  Highlights thus far:

Keep up the great work Politian!  Remember that you can get ASP.NET AJAX 4.0 Preview 4 on Codeplex.

More Posts « Previous page - Next page »