Omar Venturi's Blog

How to pass parameters to ASP.NET MVC3 Razor EditorTemplates

2011-07-17T22:37:00.003+02:00

ASP.NET MVC2 introduced a great feature: template personalization.
MVC offers some default templates executed automatically when we call some Html helper methods, such as @Html.EditorFor.

As well explained in this series of posts the system has built-in support for 9 display template names: “Boolean”, “Decimal”, “EmailAddress”, “HiddenInput”, “Html”, “Object”, “String”, “Text”, and “Url” and for 7 editor templates: “Boolean”, “Decimal”, “HiddenInput”, “MultilineText”, “Object”, “Password”, and “String”.

Is quite simple to support new kind of data like DateTime. It's enough to add a folder named "EditorTemplates" wherever you want in a View folder and add a new partial view.
You can add the folder in /Views/Shared/EditorTemplates, /Views/yourEntity/EditorTemplates, /Areas/yourArea/yourEntity/EditorTemplates and so on; you have only to name the folder "EditorTemplates".
I've created a DateTime template because with solutions I've found online, there was some limits:

It's possible control the datetime format with DataAnnotations feature, but this is useful only if dataformat is constant. I need to alter the format of the dates related to user's culture
Templates can receive data from caller view such as the Model and the ViewData. Unfortunately, inside template, ViewData is a global collection and I haven't found a way to retrieve only parameter related to current template

Here are a couple of samples:

Here is how to use DataAnnotations to specify DataFormat

 [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:MM/dd/yyyy}")]

Here is how to format DateTime inside template

 @Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "datePicker" })

Here is how to pass data to a template 
 @Html.EditorFor(m => m.MainEntity.Birthday, new { id = "datepicker", style = "width:100px;" })  


and how to use them inside template
@model DateTime? 
@Html.Texbox(ViewData["id"], Model.Value, new {style = @ViewData["style"]})  



So, to make solution more dynamic, I've implemented a template like the following

 @model DateTime?  
 @using System.Globalization  
 @{  
   Dictionary<string, object> actualViewData = new Dictionary<string, object>();  
   foreach (var item in ViewData.Keys)  
   {  
     if (item.StartsWith("_"))  
     {  
       actualViewData.Add(item.Substring(1), ViewData[item]);  
     }  
   }    
 }  
 @Html.TextBox("", (Model.HasValue ? Model.Value.ToString(CultureInfo.CurrentUICulture.DateTimeFormat.ShortDatePattern) : string.Empty), actualViewData)

and I use it with following statement

 @Html.EditorFor(m => m.MainEntity.Birthday, new { _id = "datepicker", _style = "width:100px;" })

As you can see, the only difference with standard solution is that you have "mark" the key with a prefix char; this allow the parsing inside template.
If someone have found a better solution, please, add a comment to this post, so I can update it.

Tips to scaffold a new ASP.NET MVC3 application

2011-02-27T19:08:00.001+01:00

The purpose of this post is simply to collect some useful articles to scaffold a new ASP.NET MVC3 projects (most of techniques described here, are compatible with MVC2 version).

In these days I've investigated on web to find the best practices for add some basic services to a new web project.
As "basic services" I mean services like logging, tracing, authorization, localization, pagination and so on.

Here is what I've found.

Logging and Tracing

Logging and tracing have not always a clear separation. Anyway, for the purpose of this post, Logging is the action of "log unhandled exception".
A great library to cover this work is Elmah (elmah.googlecode.com). Elmah both logs unhandled exceptions and provide a useful user interface to view them.

Tracing is instead the operation that allows the developer to store (in a generic repository such as a database or an xml file) information to control the application and to simplify the development also.
There are some libraries to accomplish this task, anyway the most popular are log4net and NLog.
Furthermore, to collect information about the health of the application, ASP.NET offers the "healt monitoring system", introduced in ASP.NET 2.0 and designed to monitor the health of a deployed ASP.NET application by logging events that occur during the application or request's lifetime. Here you can find a tutorial to integrate Health Monitoring.

So, a very good article with a step-by-step sample is here: Log Reporting Dashboard for ASP.NET MVC.
In this article, the author integrates Log4Net, NLog, Elmah, and ASP.NET Health Monitoring into an ASP.NET MVC Website, and provides a log reporting dashboard that will allow you to filter the messages by time period, log level, and log provider.
You can find the same article, in a more detailed version in author's blog

Pagination

An article that describes a general purpose solution for pagination is here: Paging with ASP.NET MVC

Authorization

Default ASP.NET MVC3 application template in Visual Studio 2010 offers an adequate solution to manage authorizations. It offers a pre-configured solution uses Windows Forms authentication and ASP.NET Configuration web site.
Yes, I was not too inclined to use these tools, but if you decide to use the solutions offered by Microsoft (without reinventing the whee) I have to say that these solutions are very comfortable.

Localization

For localization, I suggest these articles:

Learn MVC3

Finally (even if it should be at the beginning of this post) I put here some useful free resources to start to learn ASP.NET MVC3

Intro to ASP.NET MVC 3 (official Microsoft documentation)
(ScottGu) NerdDinner.com chapter! (pdf direct link) A free chapter (177pages!) where you can find a complex application explained step-by-step (see the result at nerddinner.com)

Paymo: a great time tracking online tool

2011-02-10T22:38:00.001+01:00

There are many tools online to support time tracking activity and a lot of these have good quality.

Today I've discovered Paymo (http://www.paymo.biz) a time tracker tool with a great set of features, an useful interface and a very easy learning curve.

This tool follows a classical workflow:

register users (developers, employees, engineers, and so on)
register customers
create projects of customers
create activities of projects (each project has a two-level set of activities)
assign roles to users for each project (user, administrator)
enable users to register theirs activities

So, at this point, every user has its own dashboard, and every project administrator has a unique environment to create reports, to control budget and milestones and to emit invoices.

Paymo's user interface is available in many languages (english, italian, german, spanish, french and others) and user can track time both in live mode (with a stopwatch tool) and in classic mode by manually add time entries or edit existing ones.

How much it costs?
Paymo has a free and fully-functional release which supports two users, unlimited time trackings and three invoices per months.
If you need to track time for more than three employees you need Paymo Premium: 3.99$/user/months or free for non-profit companies.
To have unlimited invoices, the cost is 9.99$/month. Look at pricing to see more details and to get last prices.

Paymo is available through a set of API also, consists of a set of callable methods to manage entities like projects, tasks, companies and so on.

Note for freelancers: every account is linked to a unique company. So, if you work in two or more companies and every company uses Paymo to track the time, you need a different account for everyone.

A little set of tools to design a Web Site

2011-02-05T08:57:00.008+01:00

When we are involved in design phase of a new web site, we often need some tools to facilitate our work even if we don't always use them: sometimes because the project is easy, sometimes because we don't know any tool or we want to start to write code immediately. I want to present here some free tools to accomplish various tasks about design web sites that, I think, can really help us in this activity. Design a web site, in this context, means to define:

the layout, which is the grid of the elements of the page
the schema color, which is the set of primary colors used in our project
the font set, which is the set of fonts (often one or two fonts) and their dimensions
the interaction flow, which is the map of the links between pages

Layout and Interaction

The first tool is both to define layout and interaction flow: Pencil Project a tool to sketching and prototyping GUI (not only for web), working both as Firefox addon or as standalone application available for GNU/Linux, Windows, MacOS X. With Pencil we can quickly create many different layouts with a wireframe style.

Pencil organizes its pages in tabs and collect them into a Project file (.ep extension). Pencil allows you to link elements of a page (such as buttons, images and so on) to other pages. In this way you can define the interaction flow. Finally, you can export your project in a unique web page to simulate the interaction. A "unique" web page is very convenient because you can use your layout both as a user (by clicking on elements) or as a developer (by scroll up and down every single page). In fact, the export is nothing but a sequence of images linked together that are positioned at the correct height by using #anchor: simple and very useful solution. Now, if you need some inspiration about wireframes, you can found some samples at http://wireframes.tumblr.com/

Schema color

There are many tools to define your schema color, such as colorhunter or colorschemedesigner, but I want to suggest you Kuler, an Adobe Flash tool. Kuler is available online with no charge.

You can try to create your schemas, save them, share them and explore community's schema. Kuler's interface is very easy and intuitive and you can immediately start to use it. You have to register in Kuler only to save your schema, but to copy HEX color in your graphic tool registration is not required.

Font set

To choose web-safe fonts you can follow two directions:

choose common fonts for primary platforms and browsers
include in you site an external font definition

Common fonts

You find common fonts at ampsoft.net. Here you can find the list with the standard set of fonts common to all versions of Windows and their Mac substitutes, referred sometimes as "browser safe fonts". You can also find several screen shots to see how the fonts are displayed in other OS's or browsers than yours.

External font

Google Web Fonts lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers.

You can see the online preview of real fonts in your browser (not images) and also try different size, variant and decoration with font previewer.

How to publish a post on a Facebook user's wall with C#

2011-01-22T09:19:00.002+01:00

Hi guys, I waste my time to find a way to publish a post on a user's wall in Facebook using only C#, without any external library (such as Facebook SDK).

I found some samples to update status, but nothing that allow to publish a "complex" post, that is a post with picture, action, description and so on.

Ok, let's see briefly my solution.

First steps are always the same, and there are tons of documentation online to deepen these arguments. Anyway, to setup application, you have to:

1. register your application in Facebook (http://www.facebook.com/developers/)

2 .obtain AppId, AppSecret and AppKey

3. Add fb namespace

 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

4. insert in your page the javascript client side (replace en_US with valid iso code as it_IT, fr_FR and so on)

 <script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>

5. insert following code to allow asynchronously load of javascript code

 <div id="fb-root"></div>  
 <script type="text/javascript">   
   FB.init({ appId: 'your_appId', status: true, cookie: true, xfbml: true });    
     
   FB.Event.subscribe('auth.login', function(response){    
      window.location.reload();   
   });   
   
   FB.Event.subscribe('auth.logout', function(response){    
      window.location.reload();   
   });  
 </script>

With this code, you are using Facebook Connect, the OAuth implementation of Facebook.

Up to here no problem: many documentation, many samples and, as you can see, only javascrpt code. Let's see now how to write on user's wall with Graph API.

Graph APIs require a mandatory parameter named "access_token". This parameter is contained in facebook OAuth cookie session and its value changes every session.

So, how can you retrieve this value?

First, the cookie name has this pattern "fbs_{0}" where {0} is the AppId (see step 2 previously).

So, the code is:

 string cookieName = string.Format("fbs_{0}", "your_appId");

 HttpCookie fbCookie = HttpContext.Current.Request.Cookies[cookieName];  
 string mytoken = FacebookCookie.Values["\"access_token"];

Note that the key is exactly "\"access_token"

Now, we are ready to post on our wall. Take a look to this code:

 public void PostOnWall(string Name, string Message, string Description, string PictureUrl, string LinkCaption, string LinkUrl, string ActionName, string ActionUrl)  
   
 {  
   
    string action = "https://graph.facebook.com/me/feed";  
    string postData = "access_token=" + mytoken;  
   
    if (!string.IsNullOrEmpty(Message)) { postData += ("&message=" + System.Web.HttpUtility.UrlEncode(Message)); }  
    if (!string.IsNullOrEmpty(LinkUrl)) { postData += ("&link=" + LinkUrl); }  
    if (!string.IsNullOrEmpty(PictureUrl)) { postData += ("&picture=" + PictureUrl); }  
    if (!string.IsNullOrEmpty(Name)) { postData += ("&name=" + System.Web.HttpUtility.UrlEncode(Name)); }  
    if (!string.IsNullOrEmpty(Description)) { postData += ("&description=" + System.Web.HttpUtility.UrlEncode(Description)); }  
    if (!string.IsNullOrEmpty(ActionName) && !string.IsNullOrEmpty(ActionUrl)) { postData += ("&actions=[{'name': " + System.Web.HttpUtility.UrlEncode("'" + ActionName + "'") + ", 'link': '" + ActionUrl + "'}]"); }  
   
    NetworkHelper.ExecuteHttpActionPost(action, postData);  
 }

"https://graph.facebook.com/me/feed" is the entrypoint to write on current logged user's wall (more details here).

We have to call this entry point with an HTTP POST to send some data to Facebook.

"access_token": contains our session_token. This is the unique mandatory field

"message": if we set only this field, we are going to update the user' status

Note: although the field is "actions" you can add only one action. An action is a JSON object with two properties: text and link.

Finally, let's see the code to make the HTTP call.

     public static string ExecuteHttpActionPost(string Action, string PostData)  
     {  
   
       ASCIIEncoding encoding = new ASCIIEncoding();  
       byte[] data = encoding.GetBytes(PostData);  
   
   
       WebRequest request = WebRequest.Create(Action);  
       request.Method = "post";  
       request.ContentType = "application/x-www-form-urlencoded";  
       request.ContentLength = data.Length;  
       Stream newStream = request.GetRequestStream();  
       // Send the data.  
       newStream.Write(data, 0, data.Length);  
       newStream.Close();  
   
       WebResponse resp = request.GetResponse();  
       StreamReader sr = new StreamReader(resp.GetResponseStream());  
       string result = sr.ReadToEnd();  
       resp.Close();  
       return result;  
     }