Orchard Harvest Amsterdam

In a world where lots of CMS platforms are popping up, Orchard is definitely one of my favorites. The biggest reason for me is that it is a .NET CMS.

For those who don’t know what Orchard is:

“Orchard is a free, open source, community-focused Content Management System built on the ASP.NET MVC platform already powering sites of many major brands and organizations. Originally created by Microsoft, it is now maintained by the Outercurve Foundation, a non-profit and IP-neutral open source software foundation.”

harvest-banner-en

I you want to know more or if you are interested in getting to know Orchard, I can highly recommend Orchard Harvest, the second ever Orchard user conference which is being held in Amsterdam (another reason to go) on the 13 and 14th of june.

 

K

HTML 5 Validation scripts in ASP.NET MVC

With the arrival of HTML5, you can make use of the cool new form validation features like:

  • email, url
  • number
  • required

Problem with these features, for me, is that each browser uses their own notifications. I prefer that I can use a notification that looks the same in all browsers.

One way to do this is with Javascript and CSS, more info can be found on several sites. Here is an example page that microsoft created: click here.

If you don’t want that the browser validates your form, you can use the novalidate keyword on the form. If you are using ASP.NET MVC you can pass this attribute like so:

@using (Html.BeginForm(null, null, FormMethod.Post,new {novalidate="true"}))

Hope this one helps you in you projects

Using HTML5 date element in ASP.NET MVC3

With the arrival of HTML5, a few new elements are introduced:

  • email
  • url
  • datalist

Another pretty useful element is the date element

<input type=”date” />

Unfortunately, this element is not supported by most browsers. Now here is a trick to have a fallback in ASP.NET MVC3. We will use the date control if it is supported and use the jQuery UI Datepicker if it is not supported.

Because we want to do this for all date controls in our project, we will create a DisplayTemplate.

Step1: Create a DisplayTemplates folder in the shared folder of your project

Step2: Add a Partial View with the name of the type, in this case DateTime

Step3: Because I’m a razor fan, we’ll use razor.

@model DateTime

<input type=”date” />
<script type=”text/javascript”>
if (!Modernizr.inputtypes[“date”]) {
$(“:input[type=date]”).datepicker();
}
</script>

Now I’m putting the script in the template, but to reuse it refer to it on your layout page.

Don’t forget references to jQuery UI, Modernizr. Place them in your layout page.

gr k

ASP.NET MVC 3: HttpNotFoundResult, RedirectResult, HttpStatusCodeResult

Next to the plain old ActionResult we know from the previous versions, we can now make use of some extra helper classes:

  • HttpNotFoundResult
  • RedirectResult
  • HttpStatusCodeResult

You don’t need to be a rocket scientist to figure out what they will do, but I will add a few examples anyway:

HttpNotFoundResult

Where in the past, you had to create a specific view when an item doesn’t exist, you can now make use of the HttpNotFoundResult action:

public ActionResult Details(int id)
{
    Dinner dinner = dinnerRepository.GetDinner(id);
    if (dinner == null)
    {
        //return View(“NotFound”);
        return new HttpNotFoundResult(“Dinner has been deleted or does not exist”);
    }
    else
    {
        return View(dinner);
    }
}

RedirectResult

Logically redirects you to a given url:

public ActionResult Index()
{
    return new RedirectResult(“https://kevinderudder.wordpress.com”);
}

HttpStatusCodeResult

Give a respond with a specific code and description:

Dinner dinner = dinnerRepository.GetDinner(id);
if (dinner == null)
{
    //return View(“NotFound”);
     return new HttpNotFoundResult(“Dinner has been deleted or does not exist”);
}
else if (dinner.Expired)
{
    return new HttpStatusCodeResult(410);
}

ASP.NET MVC 3: ViewBag Property

In the previous versions of ASP.NET MVC, if you wanted to pass data from your controller to your view you had to use the ViewData dictionary:

public ActionResult Index()
{
            ViewData[“DataComingFromTheController”] =
                            “I’m data coming from the controller”;
            return View();
}

In your view:

<%: ViewData[“DataComingFromTheController”]  %>

Because ASP.NET MVC 3 is .NET 4, Microsoft could take benefit of the dynamic keyword to create dynamic properties. So instead of using the ViewData dictionary, you can use the ViewBag property, which makes coding easier:

public ActionResult Index()
{
         ViewBag.DataComingFromTheController
                = “I’m data coming from the controller”;
         return View();
}

and in your view:

@ViewBag.DataComingFromTheController

When we take a closer look on the ViewBag property, we’ll see that it’s a dynamic property (also notice that ViewData still exists):

image

ASP.NET MVC 3: Razor View Engine

One of the reasons why I was (or am) a fan of ASP.NET MVC over ASP.NET is the fact that it feels more like a web technology. The guys of Microsoft did a great job making a platform (ASP.NET) to easily make websites, with viewstate and all the things that we know from ASP.NET:

  • RAD development
  • rich controls
  • familiar model when you are coming from a windows form background

With the arrival of MVC, lots of these concepts have been removed and replaced with new advantages like

  • full control over the rendered HTML
  • Test Driven Development
  • SEO
  • No ViewState

In the release of ASP.NET MVC 3, the did an extra step to make the development of views a lot easier and faster. It’s a minor change and once you get the hang of, it makes a big difference. In ASP.NET (MVC 1 or 2) or let’s say, HTML you always have to work with open and close tags. In the case you want to work with data in your markup it gets worse, you have to type <%= or <%#, … With this new view engine, this code has been replaced with a simple @

If we would compare, for example, the code that Scott Guthrie used in his NerdDinner (with MVC 1 or MVC 2) tutorial and compare this with the razor code this would be the difference:

When I create a View to list the dinners, I can now choose between a ASPX view or  a Razor view engine.

image

And the generated markup code:

ASPX:

<% foreach (var item in Model) { %>
   
        <tr>
            <td>
                <%: Html.ActionLink(“Edit”, “Edit”, new { id=item.DinnerID }) %> |
                <%: Html.ActionLink(“Details”, “Details”, new { id=item.DinnerID })%> |
                <%: Html.ActionLink(“Delete”, “Delete”, new { id=item.DinnerID })%>
            </td>
            <td>
                <%: item.DinnerID %>
            </td>
            <td>
                <%: item.Description %>
            </td>
            <td>
                <%: item.HostedBy %>
            </td>
            <td>
                <%: item.Location %>
            </td>
        </tr>
   
    <% } %>

Razor:

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.ActionLink(“Edit”, “Edit”, new { id=item.DinnerID }) |
            @Html.ActionLink(“Details”, “Details”, new { id=item.DinnerID }) |
            @Html.ActionLink(“Delete”, “Delete”, new { id=item.DinnerID })
        </td>
        <td>
            @item.Description
        </td>
        <td>
            @item.HostedBy
        </td>
        <td>
            @item.Location
        </td>
    </tr>
}

Just compare the yellow tags and you’ll see why I love this syntax. If we take a look at the details page of a dinner you will notice following specific tags:

Tag referencing to the model object that is used on the page

@model NerdDinnerv3.Models.Dinner

Page settings. Because we don’t have a <head> on our page, this is the place where we will set the title and also reference to a layout or masterpage:

@{
          ViewBag.Title = “Details”;
          Layout = “~/Views/Shared/_Layout.cshtml”;
}

And of course the view itself. Mind that I’m typing the ‘@’ character twice, to escape the razor syntax:

<h2>@Model.Title</h2>
<p>
    <strong>When:</strong> @Model.EventDate.ToShortDateString()
    <strong> @@ </strong> @Model.EventDate.ToShortTimeString()
</p>

So, I think you have an understanding of the “razor” view engine, take a minute to play with it, it’s really easy.