Mikael Söderström

  • Create a video player using custom elements

    I previously blogged about Shadow DOM where I demonstrated how to use the Developer tools in Google Chrome to get the underlying DOM that is not visible to the user, in this case the video element. This is a great tool to get more understanding about how the element is actually built, and the API makes it possible to create our own Shadow DOM with ”hidden” elements.

    Read more...

  • Get under the hood with Shadow DOM

    When you add an element to your page, it is being added to the Document Object Model (DOM). When added to the DOM, you can use CSS to style it or JavaScript (getElementById, querySelector etc) to get a reference to the element and modify it. There are some cases where this isn´t true though.

    Read more...

  • Declarative helpers in Razor

    ASP.NET Web Pages Beta 1 have support for Helpers, which are methods written in C# or Visual Basic, and returns IHtmlString. They can return HTML that is displayed on the page. If you choose to create helpers that way, you would need to have your HTML in an assembly, which makes it different to modify. Because of that, the new version of Razor supports declarative Helpers that you can create directly on the page. They work in both ASP.NET MVC 3 Beta and ASP.NET Web Pages Beta 2, which is included in WebMatrix.

    Read more...

  • Unobtrusive validation in ASP.NET MVC 3

    In ASP.NET MVC 2 we got support for client validation of the model. When we activate it, a JavaScript is generated and added to the rendered view. It contains all validation rules we set up for the model, and are used to generate error massages without reloading the page.

    Read more...

  • Introducing NuPack

    When you install ASP.NET MVC 3 Beta or WebMatrix Beta 2, a new product called ”NuPack” is installed with it. NuPack makes it possible to quickly add references to third party products like Ninject, jQuery and so on. All necessary files (dll, js etc) are automatically added to the project, and necessary modifications in web.config are automatically added.

    Read more...

  • What's new in ASP.NET MVC 3 Beta & WebMatrix Beta 2

    Microsoft just released ASP.NET MVC 3 Beta, which came with some news. Among other things, we now have a new project dialog box, an updated version of Razor, support for helpers from ASP.NET Web Pages, new interfaces for Dependency Injection, unobtrusive jQuery validation and more. A new beta of WebMatrix has also been released.

    New project dialog

    When we created new ASP.NET MVC project in CTP's that came before, there were different project types for the Web Forms and Razor syntax. In ASP.NET MVC Beta we have a single project type called ASP.NET MVC 3 Web Application. If we choose to create a new project, we get a new window, where we can choose View Engine, type of ASP.NET MVC 3-projects and if we want a test project:

    1-newproject

    Updated version of Razor

    Unfortunately, we still don´t have syntax highlighting and intellisense for Razor, but for syntax highlighting, you can use either WebMatrix, or this plugin for Visual Studio 2010:

    http://bit.ly/a0Jkqv

    However, there are some new features for Razor in ASP.NET MVC 3, like a new way to specify the model, as well as support for declarative helpers.

    Helpers from ASP.NET Web Pages

    When ASP.NET Web Pages came with WebMatrix, we got a couple of different helpers like one which is used to show a table, with support for sorting and paging. It can now be used in asp.net MVC 3.

    New interfaces for Dependency Injection

    ASP.NET MVC 3 CTP came with enhanced support for Dependency Injection, by IMvcServiceLocator. In the new beta, we can use the IDependencyResolver insttead, which is smaller and contains just what we need to inject code in ASP.NET MVC.

    There is also a new interface called IControllerActivator, which is used to create an instance of an already existing instance of a controller, i.e. as that the Activator class. Unlike the IControllerFactory it is not used to locate the correct controller.

    Unobtrusive jQuery Validation

    ASP.NET MVC 2 supports validation on the client. In ASP.NET MVC 3 Beta has been updated to provide a cleaner way to validate. Instead of the JavaScript with validation rules directly on the page it now takes advantage of the data-* attribute from HTML5 on the elements. This means that the rendered HTML looks much better, while we still have a validated page (if we validate against HTML5). However, developers can disable it if they want to continue to use the JavaScript as before.

    Updated ValidateInputAttribute

    When we try to post HTML from the client, we will, by default, get an error message that says that potentially dangerous code has been posted. This came in ASP.NET 1.1, and can be turned off in WebForms by setting the ValidateRequest to false.

    In ASP.NET MVC, we instead insert a ValidateInput attribute on the controller or action method and set the parameter to false. What´s new in ASP.NET MVC 3 Beta and WebMatrix Beta 2 is that we now can define specific fields you may post HTML, while all others are protected. This provides increased security when we usually do not want to allow HTML in all fields.

    NuPack

    A very exciting new feature, and which are included in both ASP.NET MVC 3 Beta and WebMatrix Beta 2 is NuPack. It is a new package manager which makes it possible to download and install modules with just a few clicks. This means that we can get the Ninject, jQuery, ELMAH, and more without having to go to each page and download them manually.

    With ASP.NET MVC 3 Beta, we can either use a dialog window in Visual Studio to add packages, or we can use a new command window. With WebMatrix we visit a specific page instead to get access to the modules.

    More information

    I will mention all the new features in separate blog posts for more in-depth information, but you can already download both ASP.NET MVC 3 and WebMatrix here:

    http://www.microsoft.com/web/gallery/install.aspx?appid=MVC3

    Read more...