At the CodeMash conference this morning in Sanduskie, OH, Microsoft announced the release of Web Matrix, the new Razor view engine, MVC 3.0 and Project Orchard.  Here is a quick overview of each, with some links to more information.

WebMatrix

Microsoft WebMatrix is a new web development tool that makes it easy for anyone to create a new web site. Users can start from any of the built-in or online templates or any of the free popular open source ASP.NET or PHP web applications, such as WordPress, Joomla!, DotNetNuke or Umbraco, located in the online Web Applications Gallery or use a pre-built website template. Users can customize their site using the code and database editor within WebMatrix. When a user is ready to publish their site, WebMatrix provides access to offers from our hosting partners within the hosting gallery makes it easy to choose the right hosting partner for the app being created with a selection of hosting packages. Once a hosting package is selected and configured, WebMatrix then seamlessly publishes the site and database to the web. All of these features make Web Matrix a great choice for new developers, or just those new to the Microsoft platform.

Razor

Razor is a new “View Engine” for ASP.NET.  Usable by WebForms, ASP.NET MVC 3 (also released today) and hostable within your own application, Razor was built on a series of design principles including (taken from Scott Guthrie’s post on Razor):

• Compact, Expressive, and Fluid: Razor minimizes the number of characters and keystrokes required in a file, and enables a fast, fluid coding workflow. Unlike most template syntaxes, you do not need to interrupt your coding to explicitly denote server blocks within your HTML. The parser is smart enough to infer this from your code. This enables a really compact and expressive syntax which is clean, fast and fun to type.

• Easy to Learn: Razor is easy to learn and enables you to quickly be productive with a minimum of concepts. You use all your existing language and HTML skills.

• Is not a new language: We consciously chose not to create a new imperative language with Razor. Instead we wanted to enable developers to use their existing C#/VB (or other) language skills with Razor, and deliver a template markup syntax that enables an awesome HTML construction workflow with your language of choice.

• Works with any Text Editor: Razor doesn’t require a specific tool and enables you to be productive in any plain old text editor (notepad works great).

• Has great Intellisense: While Razor has been designed to not require a specific tool or code editor, it will have awesome statement completion support within Visual Studio. We’ll be updating Visual Studio 2010 and Visual Web Developer 2010 to have full editor intellisense for it.

• Unit Testable: The new view engine implementation will support the ability to unit test views (without requiring a controller or web-server, and can be hosted in any unit test project – no special app-domain required).

ASP.NET MVC 3

By this time, ASP.NET MVC needs no introduction.  The latest rev of this product includes a bunch of new features including:

• Support for the new Razor View Engine
• Powerful hooks with Dependency Injection and Global Action Filters
• Rich JavaScript support with unobtrusive JavaScript, jQuery Validation, and JSON binding
• Streamlined validation with improved Model validation

There are some great links from the ASP.NET MVC 3 web page to help you get more familiar with the new release, and get started using it right away!

Orchard

Today also marks the 1.0 release of their product which you can get at http://www.orchardproject.net/.  Orchard is a free, open source, community-focused project aimed at delivering applications and reusable components on the ASP.NET platform. In the near term, the Orchard project is focused on delivering a .NET-based CMS  application that will allow users to rapidly create content-driven Websites, and an extensibility framework that will allow developers and customizers to provide additional functionality through module extensions and themes. Sort of like an ASP.NET version of WordPress, although it’s not nearly as feature complete as Orchard.

Source: Chris Koenig’s Blog

Microsoft released a prototype of a new jQuery Globalization Plugin that enables you to add globalization support to your JavaScript applications. This plugin includes globalization information for over 350 cultures ranging from Scottish Gaelic, Frisian, Hungarian, Japanese, to Canadian English.  This plugin will be released to the community as open-source.

Basically, the jQuery Globalization plugin enables you to easily parse and format numbers, currencies, and dates for different cultures in JavaScript. For example, you can use the Globalization plugin to display the proper currency symbol for a culture, or format dates so that the day and month appear in the right order and the day and month names are correctly translated.

You can download the prototype for the jQuery Globalization plugin from Microsoft’s Github repository:

http://github.com/nje/jquery-glob

You can also download a set of samples that demonstrate some simple use-cases with it here.

Source: ScottGu’s Blog

Following September’s launch of the new Microsoft CDN (Content Delivery Network Service), in which you can reference ajax libraries in cache, Microsoft recently added SSL support, thus confirming Microsoft’s announcement back then. This new feature is necessary in websites that have SSL enabled pages and script library references in them. What would happen until now was a message displaying “This page contains both secure and non-secure items…”.

SSL support is now enabled with the scripts hosted on the Microsoft AJAX CDN. Simply use an “https” moniker with any script references on your site that point to the CDN, and they will now be served over SSL. For example, below is how you can reference jQuery over SSL:

 For more information, check out the Microsoft Ajax Content Delivery Network website. At the bottom there’s a useful list of ASP.NET Ajax Libraries hosted on the CDN.

On the previous article, I introduced jQuery and showed how to enable it in your web app, along with a little insight on the basics. Now I’ll start showing some of the most useful methods you will find in the library, along with a sample for each. jQuery API is normally split into the following categories:

• jQuery Core – Core of the library: jQuery function, object assessors, extensibility and interop methods.
• Selectors – Filtering and selection operators and attributes to use in jQuery function – #().
• Attributes – Generic attribute manipulation methods, including class, text, html and value attributes.
• Traversing – DOM traversing and selection filtering mechanisms.
• Manipulation – Element manipulation methods, like text, html and boundary content.
• CSS – CSS manipulation within elements.
• Events – Eventing portion of the API. Handles typical object UI events. Very useful.
• Effects – Some nice effects are made available out of the box like fades.
• Ajax – Ajax requests and events.
• Utilities – General auxiliary methods for browser and feature information and array manipulation.
• Internals – Other core methods that you probably won’t need.

In my opinion, each one of these categories is important and has something you might want to use in your web site development routine. Element selection, value manipulation, DOM traversing, visibility handling, eventing, styles and appearance, async calls, etc. You’ll want this jQuery behavior in your code from the moment you end up reading this set of articles. So, the best thing for me to do in order to make you productive with this is to explain and show an example of the most useful features and common usage examples of the jQuery API.

For starters, let’s see how we can manipulate style attributes in DOM objects using jQuery. You often need to change element style attribute values dynamically whether it’s for animation purposes, highlighting, or UI perception logic. The normal javascriptian way of doing it is like this:

document.getElementById("MyDOMobject").style.display = "none";

This line of code would make the element in question invisible. The same could be done in jQuery the following way:

$("#MyDOMobject").css("display", "none");

So after “grabbing” my element named “MyDOMobject” with the jQuery marker $, I’ve used the css(name, value) method. What this does is change a given style attribute name to the specified value. On the other hand, in order to read a given style attribute value, the css(name) signature should be used.

Similarly, the attr() method allows you to read/change a given element attribute. For instance, the following line of code…

$("div:first").attr("id");

… would search for the first div in the document, and return the value of the “id” attribute. Pay no attention to the selection part, we will discuss that later (I’m just throwing some bones here and there to spice things up!).

To change the value of an attribute, we do this:

$("input[type=checkbox]").attr("disabled", "true");

This last bit of code selects all document checkboxes and disables them by setting the “disabled” attribute to true. Similarly, we have methods to change element text, html and values. You have the text(), html() and val(), just like the css() method. For instance, you can set the html code within a div element with html() like this:

$("div:last").html("jQuery example from .net Brainwork!");

Output: “jQuery example from .net Brainwork!”.

The text() method has the same purpose, except that it escapes all html:

$("div:last").text("Another jQuery example from .net Brainwork!");

Output: “Another jQuery example from .net Brainwork!”

The val() method gets or sets the value attribute in the appropriate elements like in this example, where all text fields values are changed:

$("input[type=text]").val("jQuery val() demo from .net Brainwork!");

The same method with no parameters returns the value of all affected elements.

This subset of jQuery methods will allow you to perform come of the most common tasks when manipulating DOM elements with javascript. But one of the most powerful and interesting features in this API is the selection and filtering mechanism.

Like I’ve been demoing previously, you can write jQuery selection queries over the DOM using various criteria like the type of element, its relative position in the element tree, attribute values, etc. For instance, in the previous example I created a jQuery object by specifying “input”, which queries all input fields in the document as a result. I could also do:

// Select all document divs
$("div")

// Select all spans
$("span")

// Select all paragraphs
$("p")

 I then added an extra condition, a squared bracket filter to select only the text input fields. The square brackets allow you to input specific conditions based on the element’s attributes:

// Select using a value criteria
$("input[value='brainwork example']")

// select all text fields with values greater than 10
$("input[type=text][value^=10]")

Now I’ll talk about some filters jQuery has to offer. These filters allow you to apply relative positioning, type and DOM depth constraints to your element selection criteria. I’ll start by talking about hierarchy filters. These are targeted to element positioning, and they’re nothing but a simple operator between elements that adds some significance between them. For instance, the following example selects all input fields that are next to a label, though the “+” operator:

$("label + input[type=text]").val("Another Brainwork example!");

 “label” and “input” are the objects and “+” is the filtering operator. According to the previous example, the following input would be selected…

    Blog Name: 

On the other hand, this wouldn’t…

    Blog Url:  

Besides the “+” operator, which selects the next adjacent elements, there’s the “~” operator, that matches all sibling elements after the first specified element. For instance, consider the following scenario:

The following example selects all input fields after input field named #testfield, that have values greater than 5:

$("#testfield ~ input[type=text][value=5]").css("color", "#334455");

 You also have the “>” operator to select child elements, and you can also include no operator if you wish to select all descendants:

// select all child div elements inside the #menu element and change their border to red
$("#menu > div").css("border-color", "red");

// Select all input fields inside the form and change their text color
$("form input").css("color", "black");

Neat That does it for hierarchy, now onto positioning! jQuery uses the “:” operator to define some sort of filtering criteria over affected elements. Some of the most basic ones are:

$("p:last").css("color", "green"); // last paragraph on the document gets green text
$("tr:even").css("background-color", "red"); // even rows gets red background color
$("td:gt(2)").css("background-color", "blue"); // TD with index higher than 2 gets blue back color
$(":header").css("color", "black"); // matches all header  elements and changes their text color to black

Then there are specific filters that select input fields of some type, like these examples:

// Selects all input, textarea, select and button elements, and hides them
$(":input").hide()

// changes all text input field's color to red.
$(":text").css("color", "red")

// clears all password fields
$(":password").val("")

// clears all file input fields that are children of #divupload element
$("#divupload > input:file").val("")

Don’t forget to check out the full API reference for other filters. In the next article I’ll talk about CSS a bit more and also the eventing features of the API.

Technorati Tags: jQuery, Javascript

Microsoft recently released an updated version of their Facebook SDK for .NET developers. This is the result of a joint partnership between Clarity Consulting and the Concept Development Team at Microsoft.

 According to Microsoft “the goal is to enable .NET developers to quickly and easily leverage the various features of the Facebook Platform.” The software giant has provided samples and tools for helping develop Facebook applications in the various .NET platforms including: ASP.NET, Silverlight, WPF and WinForms. Microsoft has also release the source code for the API, components, controls, and samples.”

 The main goals driving the release of version 3.0 are:

• Provide better doc and samples
• Provide support for Silverlight
• Provide support for ASP.NET MVC
• Provide improved support for WPF
• Provide improved support for FBML (FBML Server Controls)
• Provide a login control that can be used to replace the BasePage and/or MasterPage for Canvas Development
• Improve out of the box support for Extended Permission Prompts
• Refactor core source to improve maintainability and design
• Fix known bugs

The team worked closely with the Concept Development Team at Microsoft to help design the Silverlight and WPF support. Also, after discussions with Microsoft it was decided that the namespaces and methods should be updated again to be more consistent with traditional .NET apis. This will cause some breaking changes to everyone as they move to 3.0. But, the main goal is that we wanted to get it right this time so that this could become an officially supported client library. Microsoft is working with Facebook to get the toolkit identified as the officially supported library. The plan is to provide real-time support and updates to keep the toolkit in synch with the Facebook API.

The developer toolkit and SDK is available on CodePlex. You can download it here.

A new version of ASP.NET Dynamic Data 4.0 has been recently released. It is now in preview 2 and here’s what you can expect from this release:

SampleProject – illustrates the next generation of Dynamic Data features including support for Entity Framework and Linq to SQL inheritance, many to many support for Entity Framework, Entity templates and the new templated filters that are based on the QueryExtender.

Futures – contains the existing Dynamic Data Futures sample that has been available at http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=14475 This sample does not add any new functionality in comparison to the old Futures project except for running on new Dynamic Data assemblies.

BusinessLogicDataSource – a showcase for a new BusinessLogicDataSource that combines customizability of ObjectDataSource with the flexibility of LINQ and the IQueryable interface. Also, a new QueryExtender feature allowing high-level query composition in markup is demonstrated.

DataServicesServer and DataServicesClient – illustrates the use of ADO.NET Data Services with Dynamic Data. NOTE: the DataServicesServer project must be running before DataServicesClient.

You can try it here.

On the ASP.NET roadmap session we were shown technologies that today make the .NET experience more rich, but aren’t part of the current version ASP.NET. I’m talking about the ASP.NET Dynamic Data, JQuery, MVC, Web Forms, control Toolkit etc. These technologies, that are currently available, will be fully integrated and improved in ASP.NET 4.0. I’ll make sure to post some articles on each of them soon, if time allows

So, what are these technologies?

ASP.NET Dynamic Data can be described in quick words as a technlogy that enables you to really quickly build data driven web-sites that work against a LINQ to SQL (and in the future LINQ to Entities) object model – and optionally allows you to-do this without having to build any pages manually.

JQuery is a javascript library that simplifies how to traverse HTML documents, handle events, perform animations, and add AJAX.

MVC stands for Model-View-Controller and it’s a pattern that separates the modeling of the domain. I personally haven’t used it yet, it’s an optional way of doing things in the upper layer, but I’m thinking in giving it a try in a simple project.

ASP.NET Web Forms are the User Interface (UI) elements that give your Web applications their look and feel. Web Forms are similar to Windows Forms in that they provide properties, methods, and events for the controls that are placed onto them. However, these UI elements render themselves in the appropriate markup language required by the request, e.g. HTML.

ASP.NET Control Toolkit – The Control Toolkit is a set of controls available on codeplex that are bund to be improved, extended, and integrated within the next release of the ASP.NET platform. You have, for instance, a Calendar control, an Accordeon control for displaying collapsable sections in a page with effects, masked textbox, etc.

The ASP.NET Ajax 4.0 preview 1 is now available at Codeplex for all of you hardcore (and softcore) Ajax coders. This is what you’l find in this first package:

• Client-side template rendering
• Declarative instantiation of behaviors and controls
• DataView control
• Markup extensions
• Bindings

I’ve seen many users in blogs and forums around the web facing several dificulties when it comes to to webservices and encoded SOAP/XML data types. In a client application that references a web service, there might be occasions when you need to use a derived object that is defined on your web service assemblies, but isn’t directly available to your application. This is because the Web Services Discovery Tool (Disco.exe) that generates code for XML Web services and XML Web service clients only serializes objects that are directly or indirectly used in its web method signatures. 

Just as a reminder: the Web Services Discovery tool finds the URLs of XML Web services on a Web server and generates documents related to each XML Web service locally. Such documents are .wsdl, .xsd, .disco, and .discomap files.  

So in order to include derived classes in service description documents (and only this kind. Loose classes aren’t caught by the XMLSerializer), there are actually two paths we can follow. One is by using the XMLInclude attribute, and the other is it’s close parent, SOAPAttribute. By specifying these attributes on a web service webmethod or class, and by giving them a type parameter, we are allowing the XmlSerializer to recognize that same type when it serializes or deserializes our web service class. The difference between these two attributes is that SOAPInclude assumes serialization as encoded SOAP XML and by this we conclude there are some rules to follow regarding SOAP 1.1. Also, SoapInclude will only work if its used on RPC/Encoded services. Remember this. There are a lot of people with this issue and mostly due to incomplete information on this matter. The default for ASP.NET is to use document/literal encoding witch is recommended. 

The following code illustrates this approach: 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace Demo
{
	/// ExampleWebService is a demo code for article purposes
	[WebService(Namespace = "http://tempuri.org/")]
	[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
	[System.ComponentModel.ToolboxItem(false)]
	public class ExampleWebService : System.Web.Services.WebService
	{
		[WebMethod]
		public Person WhoAmI()
		{
			Person p = new Person();
			p.Age = 27;
			p.Name = "Vasco Oliveira";
			return p;
		}
	}

	public class Person
	{
		private string _Name;
		public string Name
		{
			get { return _Name; }
			set { _Name = value; }
		}

		private short _age;
		public short Age
		{
			get { return _age; }
			set { _age = value; }
		}
	}

	public class Employee : Person
	{

		private Person _person;
		public Person Person
		{
			get { return _person; }
			set { _person = value; }
		}

		private short _type;
		public short Type
		{
			get { return _type; }
			set { _type = value; }
		}
	}
}

When this web service class serialized into its wsdl file using Disco.exe, it only renders: 

And the wsdl.exe generated code file Resource.cs will only have: 

public partial class Person
{
	private string nameField;
	private short ageField;

	public string Name {
		get {
			return this.nameField;
		}
		set {
			this.nameField = value;
		}
	}

	public short Age {
		get {
			return this.ageField;
		}
		set {
			this.ageField = value;
		}
	}
}

So by adding XMLInclude to the web service class header like this: 

[XmlInclude(typeof(Employee))]
public class ExampleWebService : System.Web.Services.WebService

And re-generating the wsdl file and Reference.cs file (Disco.exe and wsdl.exe), we’ll then get the Employee class perfectly defined in our proxy class: 

[System.CodeDom.Compiler.GeneratedCodeAttribute("System.Xml", "2.0.50727.3031")]
[System.SerializableAttribute()]
[System.Diagnostics.DebuggerStepThroughAttribute()]
[System.ComponentModel.DesignerCategoryAttribute("code")]
[System.Xml.Serialization.XmlTypeAttribute(Namespace="http://tempuri.org/")]
public partial class Employee : Person { 

	private Person person1Field;
	private short typeField; 

	[System.Xml.Serialization.XmlElementAttribute("Person")]
	public Person Person1 {
		get {
			return this.person1Field;
		}
		set {
			this.person1Field = value;
		}
	}

	public short Type {
		get {
			return this.typeField;
		}
		set {
			this.typeField = value;
		}
	}
}

It’s this simple.