Mr. Roa

How to use Membership/Role Provider and when to use custom implementations

2010-03-10T01:37:41.463

Authentication is a must have feature for every system. Every system administrator needs to give an identity to the ones using their system. Which leads us, developers, to make this repetitive process something easier to implement and reuse every now and then on any application that may need user login.

I've seen many "authentication frameworks" which encapsulate simple verification routines into assemblies, that can be implemented as easy as just creating a reference and running a sql script against the DB. What the heck! Even I made one of those and felt 1337 because of my glorious creation. But! That was until I meet the provider model, which reduced the greatness of my crappy "framework" or I may say, reinvention of the wheel.

The provider model involves many other things that go a lot further than just user authentication, resource permissions, etc. For now I'll address the ones related to user management and their default implementation.

What? More sh*!t about Membership/Role/Profile Provider?!! Why should I care?

Let's start by saying that this is not something new. The provider model has been around since ASP .NET 2.0, therefore 5 years ago you could've done this without any problem the same way I'm gonna do it now. The deal is that people rather read or download an example from a blog, than actually spend some time reading about how the thing works and what's the most suitable way of implementing it depending t heir given situation.

Instead of trying to write a manual of how to do it, I'll try to explain why use the default or simplest form of the provider model for user management rather than opting for a custom membership provider. Of course if you are able to choose how to handle your users and you don't stick an existing form of user authentication into your app. Either way I encourage you to drop your 1337 implementation, and use this since the Login controls work out of the box.

My intention is to eradicate the taboo surrounding t his, and really show how simple it is to make this work along with our application without any effort at all.

To Customize the provider or not to customize the provider

So, in order to make the provider a viable solution they had to make it flexible. And it is. By simply extending the membership, role or provider base classes you can implement your own customization of these providers. The thing is that people tend to opt for this without hesitating falling again into the loop of reinventing something that it's already done for you.

Everything resumes to this: Unless you have to use a pre-defined structure for the users database your option will be a custom implementation of the membership/role/profile providers. But if you are using ASP .NET 2.0 or higher (obviously), MSSQL, and do not have to use an existing user base you shouldn't create your custom provider. There are also ports of the ASP .NET Application Services DB for Oracle, MySQL and Postgre, so there are not excuses for this.

The usual excuse for resistance of using the default implementation of the provider is the assumption of "having to rely on the username field and having alphanumeric fields as FK's among the whole system might affect performance". This, even though it sounds technically convincing it's a lie. All the relationships on the default DB schema are made using GUID's which definitely knock off this vague excuse. Obtaining the user's unique identifier takes as little as two lines of code, so don't let that stop you.

Avoiding the implementation of a custom membership/role/profile provider WILL save you time and let you focus on other tasks more important than user administration and resource permissions.

OK, so where's the code?

Since I'm not addressing a custom implementation of any of the providers being discussed. It's only going to be necessary to configure the providers using the web.config or the ASP .NET Configuration panel. There are a couple of ways of implementing the membership and role provider on its simplest form. One way is to use the ASP .NET Configuration in order to achieve it. Let's see how.

Step 1

First, select the ASP .NET Configuration option from your Website menu in Visual Studio.

Note that this will open a website which contains the website configuration settings grouped in three categories: Security, Application Configuration & Provider Configuration.These presented options on the ASP .NET Configuration website will allow us to configurate everything, from authentication methods, users and all that other stuff to smtp mail servers (of course this is useful if our application sends emails, for instance a user password reset). Here's what you can do on each tab:

Security.- Here you'll be able to find the user/role configuration stuff, you'll be able to do CRUD operations on your users and roles, and also define the access rules per user/role for your application resources.

Application Configuration.- Here, you can define application settings which are just application are keys that are going to be accessible from the <appSettings/> dictionary. Also you'll be able to set the stmp settings, take the application offline and set the debugging and tracing options.

Provider Configuration.- Here, you can select the providers you'll on the application, these is very useful since you can define various providers on your web.config (if you'd like) and switch through them. For instance the settings for your application on the development environment are different from your production environment.

Also, this action will automatically create a new Database file and place it on your App_Data folder of your website/webapp. This database named aspnetdb will contain the Application Services DB schema definition.

Step 2

You just need to access the Security tab and start creating your users, roles and access rules.

By default we have in our hands a simple yet robust implementation of user management. We are able to select the forms of authentication for our application from the provided configuration options, Windows or Forms, these options are described on the msdn documentation. When using forms authentication, the passwords of our users are going to stored on our database, by default these are going to be hashed. Also our users need to have a secret question/answer in order to reset/retrieve their passwords.

From our application will be able to access all of these user management CRUD actions by using the System.Security.Membership class. All of the Login Toolbox controls located on the visual studio Toolboox palette, will work without writting a single line of code.

Great! But what if I want to use my own Database

So you already have designed your application database and you want include the Application Services Schema definition in it. This is a very common scenario, and you'll need to do very little to get this working.

First, you need to run the aspnet_regsql command from the visual studio command prompt and go through the, fairly simple, wizard until you select and register your database. This will copy all the Application Services tables and store procedures that you'll need to use the Provider Model into your existing DB.

After that, you'll need to define a connection string that points to that database on your web.config. This connection string will be specified on our membership provider definition.

<remove name="LocalSqlServer"/>
<add name="LocalSqlServer" connectionString="Data Source=.\SQLEXPRESS;Initial Catalog=MyAppDB;Persist Security Info=True;
User=sa;Password=P@$$w0rd" providerName="System.Data.SqlClient"/>

Now we just need to define the provider and then change the membership provider for the application to use our new one on the Provider Configuration.

<system.web>  
   <membership userIsOnlineTimeWindow="20" hashAlgorithmType="SHA1">
      <providers>
        <add connectionStringName="LocalSqlServer" enablePasswordRetrieval="false"
          enablePasswordReset="true" requiresQuestionAndAnswer="false"
          passwordFormat="Hashed" applicationName="MyApplication" name="MyAppMembershipProvider"
          type="System.Web.Security.SqlMembershipProvider" />
      </providers>
   </membership>
</system.web>

Retrieving the User Unique Identifier

If you need to create a relationship between a user and any other entity by using it's unique identifier (GUID) instead of its username, you just need to retrieve it by using the read-only property ProviderUserKey from the MembershipUser class.

System.Web.Security.MembershipUser mu = System.Web.Security.Membership.GetUser();
string usrID = mu.ProviderUserKey.ToString();

Conclusion

On this blog post, I discussed ASP .NET Membership & Role provider implementations on it's simplest form, which in my opinion should be your first option when implementing this feature, of course if the scenario allows it. Custom implementation of the providers aren't bad and I'm not against them but you should use them when its necessary, that's all. This topic was very debated when this feature first came out, and 4 Guys from Rolla have a very good series of articles that go in depth on the subject, I encourage you to read it if you are interested on learning how this thing works.

Oxite: Blog Description & Profile Management

2010-01-15T12:39:06.38

Following my Oxite blog post series, I add some extra functionality to the administration panel of the blog engine as well as some little changes to the blog engine title, shown on the front-end. Also I'll use this oportunity to give a little insight about Oxite's core and internal structure.

Let's vent first...

If you search and read reviews you may notice that Oxite it's not considered to be good at all. Actually is not referred as a Microsoft ASP .NET MVC Framework guidance project, not even a starter kit. Adding to that I'm absolutely sure when I say it's not even close to a "Best Practices & Patterns" repository for ASP .NET MVC Framework enthusiasts.

Instead of wasting time reinventing the wheel, by reviewing the code (again!) or the project as a whole. I'll just summarize what I think of it with a single sentence. Ready? Here it goes. Oxite is an unorthodox, undocumented and untested application made with good intentions. MVC is supposed to enforce the developer to come up with a good application design, but ironically this just makes Oxite a good anti-pattern example providing a high coupled/low cohesive design and incredible complex project structure due to unnecessary abstraction layers. Perhaps it's just because it's not a finished product and it was created in the early stages of a maturing technology. Who knows?!

I'll admit I like the challenge and that's precisely why I chose this as my starting point for my blog engine. I know the guys who created this have a disclaimer, telling me other "mature" choices, BUT I didn't expect to be abbandoned in this creepy box of moving sand! (Look for Orchard in codeplex).

And now... The features

So, if you follow other bloggers you may have noticed that they all have a funky/catchy phrase below the blog title. And if you watch closely, you may notice that the funky/catchy phrase is missing here. You may be thinking, so what? it's no biggie. And you might be right. But in the end, advertisement, which should be considered a science, proves you wrong! These phrases have a name! They are called slogans, and they have claimed to be the most effective means of drawing attention (according to wikipedia). But the most interesting thing is that a slogan implies distinction between products, and that's it! that's what we must always pursue when having a web page among millions and millions... DISTINCTION!

Jumping right into business, achieving this is fairly simple. The Site entity has a property called Description, which is accessible from the Model in the view. This is convenient since we are able to update the description already from the settings tab in the Admin section.

Then locate the header.ascx on your skin folder. Change the title div as follows:

<div id="title">
    <h1><a href="<%=Url.Posts() %>"><%=Model.Site.DisplayName %></a></h1>
    <%=Model.Site.Description %>
</div>

So that's it, nice and simple! Now we have a fancy catch phrase space. Which reminds me, now I need a slogan!

The next thing is something that really annoyed me. While browsing through the issues on oxite's codeplex page, I learned that in order to change the logged user's display name (in this case the admin, since oxite does not support user management yet ;) you had to go to the database and change it manually. I can't stand the greeting message when I log in, every time I read "Welcome, Oxite Administrator!" I get cranky and bored. So let's fix that and put our name there!

First we need to locate the routes dictionary class. It's a class file called OxiteRoutes.cs located on the Oxite project. This is how our new route looks.

AddRoute(
      "UserChangeProfile",
      "Admin/ChangeProfile",
       new { controller = "User", action = "ChangeProfile", validateAntiForgeryToken = true },
       null,
       new { Namespaces = controllerNamespaces });

Cool, so let's take a look to what we did here. We defined a route name: "UserChangeProfile" and mapped an url to it: "Admin/ChangeProfile", according to our routing engine this url must be mapped to an action, which we defined on the object defaults attribute. We said that the action will be: "ChangeProfile" and that it's going to be located on the UserController.cs. The other parameters are tokens and other optional properties.

Oxite also has a Helper class for url generations from the views. It's called UrlHelperExtensions.cs and it's located on the Oxite.Mvc project inside of the Extensions folder. We should add this snippet there.

public static string UserChangeProfile(this UrlHelper urlHelper)
{
          return urlHelper.RouteUrl("UserChangeProfile");
}

So now that we are done with the routing, we need to change the EditUser method on the service that is going to be used by the controller. I just modified the signature of the EditUser method interface to look like this:

void EditUser(User user, bool passwordUpdate, out ValidationStateDictionary validationState);

I added a small modification to the method implementation, so we don't modify the user password when change the user full name. The implementation looks like this:

public void EditUser(User user, bool passwordUpdate, out ValidationStateDictionary validationState)
{
      validationState = new ValidationStateDictionary();
      validationState.Add(typeof(User), validator.Validate(user));

      if (!validationState.IsValid)
      {
          return;
      }

      if (!string.IsNullOrEmpty(user.Password) && passwordUpdate)
      {
          user.PasswordSalt = Guid.NewGuid().ToString("N");
          user.Password = saltAndHash(user.Password, user.PasswordSalt);
      }

      user.HashedEmail = user.Email.ComputeHash();
      repository.Save(user);
}

Ok, so we only need to do two more things and we are done. First we need to add the controller action definition that is going to be called by the routing engine, and second we need to create the view that is going to be rendered by this action.

First let's edit the UserController. Let's add our actions for HTTP verbs Get/Post.

[ActionName("ChangeProfile"), AcceptVerbs(HttpVerbs.Post)]
public virtual object ChangeProfileSave(User currentUser, FormCollection form)
{
            string name = form["displayName"];
            string email = form["email"];
            ValidationStateDictionary validationState;

            if (string.IsNullOrEmpty(name))
            {
                ModelState.AddModelError("displayName", "New Name is not set.");
            }

            if (string.IsNullOrEmpty(email))
            {
                ModelState.AddModelError("email", "New Email is not set.");
            }

            if (ModelState.IsValid)
            {
                currentUser.DisplayName = name;
                currentUser.Email = email;

                userService.EditUser(currentUser, false, out validationState);

                if (!validationState.IsValid)
                {
                    ModelState.AddModelErrors(validationState);
                }
            }

            if (!ModelState.IsValid)
            {
                ModelState.SetModelValue("displayName", new ValueProviderResult(name, name, CultureInfo.CurrentCulture));
                ModelState.SetModelValue("email", new ValueProviderResult(email, email, CultureInfo.CurrentCulture));

                return ChangeProfile(currentUser);
            }
            return Redirect(Url.AppPath(Url.ManageUsers()));
}

Finally, let's add our view code.

<%@ Page Language="C#" AutoEventWireup="true" 
	MasterPageFile="~/Views/Shared/Admin.master" Inherits="System.Web.Mvc.ViewPage>" %>
<%@ Import Namespace="Oxite.Mvc.Extensions" %>
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <h2 class="title"><%=Model.Localize("ChangeProfile", "Change Profile") %></h2>
    <%=Html.ValidationSummary() %>
    <form action="" method="post">
    <div>
        <%=Html.TextBox("displayName",  m => m.User != null ? m.User.DisplayName : "", 
                            Model.Localize("DisplayName", "Display Name"), new { size = 42, @class = "text" })%>
    </div>
    <div>
         <%=Html.TextBox("email",  m => m.User != null ? m.User.Email : "",
                             Model.Localize("Email", "Email"), new { size = 42, @class = "text" })%>
     </div>
     <div>
         <input type="submit" name="submit" class="submit button"
		    value="<%=Model.Localize("ChangeProfile", "Change Profile") %>" />
         <%=Html.OxiteAntiForgeryToken(m => m.AntiForgeryToken) %>
     </div>
     </form>
 </asp:Content>
 <asp:Content ContentPlaceHolderID="Scripts" runat="server">
     <% Html.RenderScriptTag("site.js"); %>
 </asp:Content>

That's it ladies and gentleman! Now we are able to modify our user's email and display name.

UPDATE!

After making these changes, I noticed that something else had to be done to get a complete solution to the DisplayName fix. After applying the updates above we successfully update the DisplayName to whatever we want, but Admin (which is an username) is still being shown on the comments made by the me, instead of MY NAME. So in order to achieve this we only have to make a mall update to the Comments.ascx file as follows.

Replace the line of the name paragraph inside of the comment div with this one:

Mr. <strong><%=Html.LinkOrDefault((Model.PartialModel.Child.Creator.Name.ToLower() == "admin") ?
    Model.PartialModel.Child.Creator.DisplayName : Model.PartialModel.Child.Creator.Name.CleanText(), 
	Model.PartialModel.Child.Creator.Url.CleanHref())%></strong>

TIP/Trick: Enable/Disable ASP .NET Ajax TabContainer Tabs

2009-12-02T10:57:40.58

Space and content distribution is a very important part when designing a web site. That's why breaking content into multiple sections using a tabbed widget in order to save space is commonly used technique in web design these days.

Today I'm going to address a common issue that arises when using a tab widget, which is enabling/disabling specific tabs. But first let's talk a little bit about the Ajax Control Toolkit. The Ajax Control Toolkit provides a palette of AJAX enabled controls, with the purpose of creating an "interactive web experience". If you work with ASP .NET, you MUST have heard about ASP .NET AJAX, previously known as ATLAS. You must also have seen and feel familiar with update panels and Microsoft's ASP .NET AJAX paradigm. Certainly the ASP .NET AJAX framework makes AJAX implementation trivial to anyone.

The tendency of throwing update panels everywhere in order to achieve partial post backs in your page it's a widely used approach among ASP .NET AJAX enabled sites. It's also a common practice to see how every server/client side control on a web page, get replaced with any equivalent found on the AJAX Toolkit provided by Microsoft. If you are using one of these "cutting edge" techniques my friend, let me tell you that you are killing your application performance. And that also, I'm NOT the first one to point this out. The ASP .NET AJAX framework and the AJAX Toolkit have been widely criticized over thousands of technical web blogs. Mainly because by providing a mechanism for "easy" AJAX implementation performance of your web application gets compromised.

Basically, performance get s affected because a lot of web resources get imported when using both the framework and the toolkit. Also the fact that in every "partial post back" you actually send the whole page making HTTP GET/POST actions more bloated when loading your page. You could use Mozilla Firefox's Firebug plugin to analyze your HTTP requests and the amount of data that gets sent back and forth to the server, or just google about the topic in order to extend your knowledge about this particular subject.

I encourage you guys to use other lightweight javascript frameworks that help you achieve DOM manipulation and asynchronous calls to the server in order to retrieve and send data like jQuery or Prototype.

Show me the code!

So I decided to do two examples instead of one. Besides doing it using the AJAX Control Toolkit. I also did it using jQuery, just to have two options. So here's the code.

AJAX Control Toolkit Tab Container

Here's the HTML:

<div style="width: 500px">
  <cc1:TabContainer ID="TabContainer1" runat="server">
      <cc1:TabPanel HeaderText="Tab 1" runat="server" ID="tpTab1">
          <ContentTemplate>
                Tab 1 Content!
          </ContentTemplate>
      </cc1:TabPanel>
      <cc1:TabPanel HeaderText="Tab 2" runat="server" ID="tpTab2">
          <ContentTemplate>
                Tab 2 Content!
          </ContentTemplate>
      </cc1:TabPanel>
  </cc1:TabContainer>
  <p>
      <input type="button" onclick="javascript:DisableEnableTab(false,0);" value="Disable Tab 1" />
  </p>         
</div>

And here's the javascript:

function DisableEnableTab(boolVal, tabIndex) {
      var tab = $find('<%=TabContainer1.ClientID%>');
      tab.get_tabs()[tabIndex].set_enabled(boolVal);
}

jQuery

Here's the HTML:

<div id="tabs" style="width: 500px">
      <ul>
          <li><a href="#tab-1"><span>One</span></a></li>
          <li><a href="#tab-2"><span>Two</span></a></li>
      </ul>
      <div id="tab-1">
          Tab 1 Content!
      </div>
      <div id="tab-2">
          Tab 2 Content!
     </div>
</div>
<p>
   <input type="button" onclick="javascript:DisableTab();" value="Disable Tab 1" />
</p>

And here's the javascript:

$(document).ready(function() {
      $("#tabs").tabs();
 });
            
 function DisableTab() {
       //Selecting another tab
      $("#tabs").tabs('select', 1);
                
      //Disabling first tab
      $("#tabs").tabs('option', 'disabled', [0]);
 }

So there it is, happy coding!

Can URI and URL be used interchangeably ?!

2009-10-28T17:50:05.403

Have you encountered yourselves hesitating when trying to use the terms URI or URL? I have. Apparently the difference between a URI and a URL is a very debated topic on the web. And it's also a source of confusion for many people, including myself.

Almost every comparison that I find seem to be a tongue-twister, which vaguely describes that they are related but they're not the same (aha! you see? I did it too, I said something but actually said nothing. PLOP!). The truth is that there's a different RFC describing the scheme of each, URI's and URL's. If you go through the W3C documentation you'll find that they have a documentation page trying to clarify the confusion around URI's.

In the end? What's are URI's and what are URL's?

The RFC2396 describes a Uniform Resource Identifier (URI) as a set of characters used to identify a resource name, location or both on the internet. This means that an URI can be classified as a locator (URL), a name (URN), or both. The RFC2717 describes a "Uniform Resource Locator" (URL) as a compact string representation of the location for a resource that is available via the Internet. Parting from these definitions we can conclude that every time we refer to a URL we are talking about an URI, but not the other way.

So? Can we use them interchangeably?

The short answer is, NO. Even though its a tendency among experts, this World Wide Web Consortium memo states that there shouldn't be any confusion, since they all have different schemes (URI's, URL's and URN's) describing the differences among them. BUT!!! If we are talking about "how to identify the resource and provide the means of locating the resource by describing it's primary access mechanism" then we are talking about an URL, which is also an URI; therefore we can use them interchangeably in that specific case.

Conclusion

When talking about Internet resources we tend to use these terms to refer to them, specially when talking about HTTP actions in order to get a document. So, there's always the safe way of doing things: if you don't know if you are talking an URL or an URI, just refer to it as an URI and you wont be wrong.

Oxite: Customizing the comments area

2009-12-11T12:28:58.97

Continuing my Oxite series of blog posts I'll address the comments area. For my taste oxite is missing a couple of things on the comments listing and comments posting department. It doesn't have a way to ensure that the comment being posted is not being generated by a bot. I've already been a victim of this and to be honest I'm not a fan of SPAM, so let's stop that!

Oxite also doesn't have a special style for comments posted by the site admin. In this blog post we are going to address this issues by implementing a css class that helps the reader identify a site administrator comment from a blog comment's list and a captcha validation for the comments input.

For these tasks I'll be using css and reCAPTCHA, which is owned by google and it's widely used among popular sites as Facebook, The New York Times, StackOverflow, TicketMaster, etc. It's worth pointing out that reCaptcha was initially conceived in Carnegie Mellon University, where the term "CAPTCHA" was initially coined. The term contrives from the acronym "Completely Automated Public Turing test to tell Computers and Humans Apart."

So putting the theory to a side, let's start getting things done!

Styling the Admin comments

When the admin posts a comment Oxite automatically adds an "Admin" class to the li element from the comments list. This means that styling the comment won't be very hard since the only thing to do is add a custom style for this class. I chose a beige tone as the background of the Admin comments and added the following to the site stylesheet (site.css)

ul.comments.medium li.Admin
{
    background: #FFFFC0;
}

And tha t's it, from now on my comments will have a beige like background. That was easy wasn't it? Good let's keep moving!

Implementing reCAPTCHA

Moving on to the CAPTCHA part, we have to do a couple things before starting. First register at reCAPTCHA, download the .NET dll and reference it from Oxite.Mvc project. After that the first thing to do is create an Action Filter Attribute. There's already a directory containing existing Filters for Oxite on the Oxite.Mvc project so let's place ours there.

namespace Oxite.Mvc.ActionFilters
{
    public class CaptchaAttribute : ActionFilterAttribute
    {
        private const string ChallengeFieldKey = "recaptcha_challenge_field";
        private const string ResponseFieldKey = "recaptcha_response_field";

        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            //Getting the user parameter from the current context
            var user = (Model.User)filterContext.ActionParameters["currentUser"];
            if (user != null && user.Name == "Admin")
            {
                filterContext.ActionParameters["captchaValid"] = true;
                return;
            }
            var captchaChallengeValue = filterContext.HttpContext.Request.Form[ChallengeFieldKey];
            var captchaResponseValue = filterContext.HttpContext.Request.Form[ResponseFieldKey];

            var captchaValidtor = new Recaptcha.RecaptchaValidator
                                      {
                                          PrivateKey = "YOUR PRIVATE KEY GOES HERE",
                                          RemoteIP = filterContext.HttpContext.Request.UserHostAddress,
                                          Challenge = captchaChallengeValue,
                                          Response = captchaResponseValue
                                      };

            var recaptchaResponse = captchaValidtor.Validate();
            filterContext.ActionParameters["captchaValid"] = recaptchaResponse.IsValid;
            base.OnActionExecuting(filterContext);

        }
    }
}

In order to render the reCAPTCHA widget we are going to add a new helper to the Html helper Extensions class. The helper is going to ease the implementation by encapsulating everything to a method call. Our new extension method should look like this:

#region ReCaptcha
public static string RenderCaptcha(this HtmlHelper helper)
{
      var captchaControl = new Recaptcha.RecaptchaControl
              {
                    ID = "recaptcha",
                    Theme = "clean",
                    PublicKey = "YOUR PUBLIC KEY GOES HERE",
                    PrivateKey = "YOUR PRIVATE KEY GOES HERE"
               };

       var htmlWriter = new HtmlTextWriter(new StringWriter());
       captchaControl.RenderControl(htmlWriter);
        return htmlWriter.InnerWriter.ToString();
}
#endregion

Now we are ready for the implementation. From here we just need to add our Action Filter Attribute on the Controller method that creates the post comment. The Controller is located on the same project as the Action Filers, Oxite.Mvc. The comments are created on the PostController. There we need to add our Action Filter Attribute to the AddComment method. Also we need to change the method signature by adding a new overload by adding a new variable to contain our reCAPTCHA validation result.

[CaptchaValidator]
[ActionName("Item"), AcceptVerbs(HttpVerbs.Post)]
public virtual object AddComment(Area areaInput, PostBase postBaseInput, Comment commentInput, UserBase userBaseInput, 
                                   UserBase currentUser, bool? remember, bool? subscribe, bool? captchaValid)

Now the success of the CAPTCHA validation is going to be contained on the added boolean value. Notice that the type is marked as nullable, this is because the method is initialized with null values on the OxiteApplication class.

itemActionCriteria.AddMethod(p => p.AddComment(null, null, null, null, null, null, null, null));

Great, so now we have almost everything in place. I used a quick & dirty approach in order to raise the form validation when a the introduced string does not match the one displayed by the reCAPTCHA widget. In case the captchaValid variable is false I just set the comment on the commentInput object to String.Empty. This will set the validationState object IsValid flag to false, which is Oxite's form validation mechanism.

Now the only thing left to do is go to the CommentFromAnonymous.ascx user control. This is what renders the actual comment form on the post. Here we are going to add our Html helper extension method in order to render the reCAPTCHA widget and finally add some validation to the post comment form. I decided to place my widget under the actual comment text area. The call to the extension method looks like this:

<div class="recaptcha">
    <%= Html.RenderCaptcha() %>
</div>

Summary

In this blog post I added an extra, yet important, feature to Oxite: CAPTCHA validation. Once again, I was able to extend the current core with ease and added reCAPTCHA's widget. I'm so glad I did this, since I wont have to deal with spam comments anymore :). Stay tuned for some other Oxite extensions and more praising of the MVC paradigm!

How to: Write your own Visual Studio Code Snippets

2010-02-28T08:39:12.87

Just to go with the formality flow, let's first define a snippet. According to wikipedia, a Code Snippet is a programming term for a small region of re-usable source code or text. Ordinarily, these are formally-defined operative units to incorporate into larger programming modules. Snippets are often used to clarify the meaning of an otherwise "cluttered" function, or to minimize the use of repeated code that is common to other functions.

Visual studio allows us to add our own code snippets for reuse of common block codes in current or further projects. Custom code snippets can be adhered to the ones bundled with the IDE. These can be created and edited with the text editor of your preference. Snippets are handled as XML files, which follow a XML Schema from Microsoft. This schema contains the definition of mandatory elements and attributes for the snippet to work.

Since the 2005 release, code snippets were introduced as part of Visual Studio. Visual Studio 2005/2008 itself has pre-bundled snippets for surrounding or inserting code blocks. Visual Studio also allows code snippets to be added to the toolbar by simply pasting the code block into it. You could create different tabs to classify them.

How to create your own custom code snippet in Visual Studio 2005/2008

1. To start, let's create an XML file with a *.snippet extension. This file will contain our snippet attributes, as well as the desired code block.

2. Ironically, let's use the "snippet" snippet which comes pre-bundled with Visual Studio. This will inject into our file the snippet XML structure.

3. Edit the snippet template by filling in the necessary values.The type for the snippets may vary depending on what we want to achieve, we may only want to insert a block code, or surround one with the desired snippet as well. The declarations correspond to de variables that may be edited from the code edit or (Visual Studio) and they must be referred between $ on the code element. We must specify for what language is the snippet as well.

4. After editing the file, the next step is to open the Code Snippets Manager from the tools menu. On the Code Snippets Manager by selecting add, we are going to be able to add a complete folder containing our code snippets. If we want to import one specific snippet into a selected folder we just have to click on Import.

Using our custom code snippet

So let's use our code snippet. We can select it from the insert code snippet in the Visual Studio context menu (right click on the class file), or we can use our defined shortcut and press tab twice to import the block of code.

The Result!

So here it is ladies and gentlemen, our custom code snippet!

Summary

The purpose of this article is to highlight a very useful feature from Microsoft's IDE. A cool feature we should exploit in order to gain the most of it, and that not many people gets to take advantage of. Grabbing a code block that is constantly reused and insert it from with the help of the IDE whenever we need it, boosts our productivity significantly. Also, this feature encourages the developer to embrace re-usability when designing a piece of code.

Oxite: Meets TinyMCE

2009-10-05T02:56:10.993

This is the first of a series of blog posts I'll be doing about Oxite, a simple blog engine written using ASP .NET MVC. Which happens to be the one I'm using to administrate and maintain my blog. On my first post I stated that I intended to modify the blogging engine and complete it my way. I already created a list of features, that I'd like to see in it in order to get things going.

So, according to ME, the first "missing" feature in Oxite, is a wysiwyg. I know it can be integrated with live writer, but c'mon a blog engine shouldn't rely on third party applications, even though integration with those it's a nice feature. A blog engine should provide an easy to use text formatting tool. At least for the body of the blog post, taking care of annoying formatting tasks which involve a lot of html markup. With that said, after this blog post I won't be writing html markup directly into a textarea in order to format my blog posts.

Let's get this thing started then. After a browsing through an extensive list of available TTW ("Through the Web") WYSIWYG Web Editors, I chose to use TinyMCE. It's widely used, it has a lot of plugins, an active community and it seems really easy to implement.

Well, I'm done with the first step. I already chose my formatting tool for my blog posts. Anyways I created a little list of things I MUST be able to do when creating a blog post with it:

Use default formatting tools such as bold text, italic, underline, text alignment and justification, etc.
Have a html view in case I need to teak some of the markup after all.
An option to wrap text between pre or code tags in order to identify code snippets.
Spellchecker, of course! This is one of the most useful features when creating articles/posts. (isn't it?)

Ok, after getting that out of the way. Let's get started shall we?

TinyMCE & Code Snippet Wrapping

In order to get started we need to download TinyMCE, also since one of our requirements is to wrap code snippets between pre/code tags we will need something to make code snippets look prettier. For that matter I'll be using prettify. After downloading both, the script files must be placed inside the Scripts folder of the Oxite theme being used.

Prettify also comes with a stylesheet that defines the color schema of our code snippets, so we should also place that file inside of the Styles folder of the Oxite theme.

For my taste the code snippet text should be big and clear, so I changed the cascading style sheet to render the code snippet fonts a little bit bigger.

Ok, so now we are closer to having a WYSIWYG with support to paste code snippets in Oxite, but first there are a couple more steps we need to do. In order to be a little bit more organized I created a mrroa.com.js file which is going to contain my client side extensions. Here we are going to place the initialization script for tinymce as follows.

tinyMCE.init({
    mode: "exact",
    elements: "post_body",
    theme: "advanced",
    theme_advanced_buttons1: "codetag,code,separator,bold,italic,underline,strikethrough,separator,justifyleft,
    justifycenter,justifyright,justifyfull,separator,bullist,numlist,separator,undo,redo,separator,link,unlink",
    theme_advanced_buttons2: "",
    theme_advanced_buttons3: "",
    theme_advanced_toolbar_location: "top",
    theme_advanced_toolbar_align: "left",
    theme_advanced_statusbar_location: "bottom",       
    setup: function(ed) {
        //Custom button Code (Code Snippet Wrapper)
        ed.addButton('codetag', {
            title: 'Wrap code tags around selected text',
            image: 'http://mrroa.com/Content/images/code.gif',
            onclick: function() {
                ed.selection.setContent('<pre class="prettify">' 
                     + ed.selection.getContent({ format: 'text' }) + '</pre>');             
             }         
         });     
      } });

Notice that there's a setup property which contains a javascript function. This is the definition of our code wrapping button, that is not included in TinyMCE's palette of buttons. The setup section in the above snippet, tells TinyMCE to wrap around pre tags our text selection. Also notice how I added the default text formatting tools into the theme_advanced_buttons1 collection. The code button represents the html source viewer, so this WYSIWYG almost has all the features described initially.

SpellChecking

For this feature we need to work a little bit more. First of all we need to download and reference the TinyMCE .NET Package. Among many features embedded, this package contains a handler which implements the old google spellchecking API, which still works (I figure that eventually they will update the hanlder to implement the new one).

After referencing the package we need to add the following code to the httpHandlers section of our web.config.

<add verb="GET,HEAD,POST" path="TinyMCE.ashx" type="Moxiecode.TinyMCE.Web.HttpHandler,Moxiecode.TinyMCE" />

Also we need to add a rule to the Oxite Routing class, in order to tell the ASP .NET MVC routing engine that it shouldn't map to a controller the requests made to the hanlder.

routes.Add(new Route("TinyMCE.ashx", new StopRoutingHandler()))

Now we just need to update the script file containing the TinyMCE initialization to implement the spellchecker plugin.

tinyMCE.init({
    mode: "exact",
    elements: "post_body",
    theme: "advanced",
    plugins: "spellchecker",
    theme_advanced_buttons1: "codetag,code,separator,bold,italic,underline,strikethrough,separator,justifyleft,
    justifycenter,justifyright,justifyfull,separator,bullist,numlist,separator,undo,redo,separator,link,unlink,separator,
    spellchecker",
    theme_advanced_buttons2: "",
    theme_advanced_buttons3: "",
    theme_advanced_toolbar_location: "top",
    theme_advanced_toolbar_align: "left",
    theme_advanced_statusbar_location: "bottom",      
    spellchecker_languages: "+English=en,Spanish=es",
    spellchecker_rpc_url: "/TinyMCE.ashx?module=SpellChecker",
    setup: function(ed) {
        //Custom button Code (Code Snippet Wrapper)
        ed.addButton('codetag', {
            title: 'Wrap code tags around selected text',
            image: 'http://mrroa.com/Content/images/code.gif',
            onclick: function() {
                ed.selection.setContent('<pre class="prettify">' 
                     + ed.selection.getContent({ format: 'text' }) + '</pre>');             
             }         
         });     
      } });

One Final Step

Now we need to reference the scripts and stylesheets on the master pages of the site. In order to achieve this we need to place this snippets in two webusercontrols.

First in HeadCustomAdminContents.ascx

Html.RenderScriptTag("tiny_mce/tiny_mce_src.js");
Html.RenderScriptTag("mrroa.com.js");

And then in HeadCustomContents.ascx

Html.RenderCssFile("prettify.css");
Html.RenderScriptTag("prettify/prettify.js");

The Result

Here's a screenshot of my nice and shiny WYSIWYG with all the features I wanted. I guess you can tell I used it to create this post as well ;)

Summary

In this post, I tried to emphasize on the importance of having text formatting tools like WYSIWYG's in systems used for publishing. Also I tried to show how to implement TinyMCE, which is widely used, and how to extend it for some specific purposes. Furthermore, this series of articles purpose is to demonstrate how the MVC model allows to achieve with ease extensibility, modifiability and testability.

World.Hello()

2009-09-18T12:14:10.567

Woa! I'm nervous!!!! This is my first blog post. The intention of this blog is to provide technical insight on day to day web development tasks, based on my work related experience and also some of my personal projects/challenges. Personally I'm not biased when it comes to programming tools/languages (ok, maybe this is a lie :), but I got to admit I have a strong bond with C#, Visual Studio and the .NET framework itself. Therefore learning and sharing stuff about how to achieve things with those are going to be the main focus of my blog posts.

Initially I thought about creating a blog engine from scratch and use that experience as a kickoff start, since, according to Phil Haack it should be the Hello World of web developers. However, I found this blog engine half way done and considered that it would be a more interesting challenge to complete it my way. With that said you have a glimpse of some of the content I'm going to be displaying here.

I'd like to thank my friend Josh Jordan for encouraging me to go through with this, and it's who also suggested the domain name.

So here I start!

Hello World!!!