Skip to content

CategoryWeb Development

Getting Intellisense from JavaScript File

Let’s say you have main.js and you want intellisense from objects defined in BankAccount.js. You would have to do the following in main.js:

/// <reference path="BankAccount.js" />
function run() {
  var ba = new BankAccount();
}

and BankAccount.js is just:

function BankAccount() {
  var total = 0;
  this.GetTotal = function () {
    return total;
  }
  this.Deposit = function (n) {
    this.total = n;
  }
}

This is provided that both .js files are in the same directory – but they don’t have to be – use relative path?

Learn more about it here: http://msdn.microsoft.com/en-us/library/bb385682.aspx

Immediate Window in VB.NET

If you’re in debugging a VB.NET execution in the Immediate Window, to view the value you use the question mark:

? strpassword

Otherwise you’ll get :

Property access must assign to the property or use its value.

Invalidate (re-cache) Content on AWS CloudFront

This is a handy script I use to invalidate (re-cache) content on AWS’s CloudFront.

using System;
using System.Collections.Generic;
using System.Configuration;
using Amazon;
using Amazon.CloudFront.Model;
using Amazon.S3.Model;

namespace AwsConsoleApp1
{
  internal class Program
  {
    /// <summary>
    /// Invalidates only one file. e.g. /images/profile.gif
    /// </summary>
    /// 
    public static void InvalidateFiles(string file)
    {
      InvalidateFiles(new List() { file });
    }

    /// <summary>
    /// Invalidates only one file. Enter bucket name and key (file in the bucket).
    /// </summary>
    /// 
    /// 
    public static void InvalidateFiles(string bucket, string key)
    {
      InvalidateFiles(new List() { bucket + "/" + key });
    }

    /// <summary>
    /// Invalidates a list of files. e.g. /images/profile.gif, /home/index.html
    /// </summary>
    /// 
    public static void InvalidateFiles(List files)
    {
      // AWS client. You always create one.
      var cfClient = AWSClientFactory.CreateAmazonCloudFrontClient();

      // Create paths to files we want to invalidate
      Paths invalidationPaths = new Paths();
      // invalidationPaths.Items = new List() { "/images/dan1g.zip" };
      invalidationPaths.Items = files;
      invalidationPaths.Quantity = invalidationPaths.Items.Count;

      // Now... let's build the request...
      CreateInvalidationRequest invalidationRequest = new CreateInvalidationRequest();
      invalidationRequest.DistributionId = ConfigurationManager.AppSettings["DistributionID"];

      // ... and other required paramaters
      invalidationRequest.InvalidationBatch = new InvalidationBatch();
      invalidationRequest.InvalidationBatch.Paths = invalidationPaths;
      invalidationRequest.InvalidationBatch.CallerReference = Guid.NewGuid().ToString();

      // Execute the request and get back a response object.
      CreateInvalidationResponse response = cfClient.CreateInvalidation(invalidationRequest);

      // Starting
      System.Console.WriteLine("Initiated On: " + response.CreateInvalidationResult.Invalidation.CreateTime);
      System.Console.WriteLine("InvalidationID: " + response.CreateInvalidationResult.Invalidation.Id);
      System.Console.WriteLine("Status: " + response.CreateInvalidationResult.Invalidation.Status);
    }

    /// <summary>
    /// Check if a file exists on S3.
    /// </summary>
    /// 
    /// 
    /// 
    public static bool IsFileInBucket(string bucket = "", string key = "")
    {
      bool exist = true;
      var s3Client = AWSClientFactory.CreateAmazonS3Client();
      try
      {
        GetObjectResponse oResponse = s3Client.GetObject(new GetObjectRequest() { BucketName = bucket, Key = key });       
      }
      catch (Exception e)
      {
        Console.WriteLine("\n" + e.Message);
        exist = false;
      }

      return exist;
    }

    /// <summary>
    /// Main Caller.
    /// </summary>
    /// 
    public static void Main(string[] args)
    {
      if (args.Length == 2)
      {
        string bucketName = args[0];
        string key = args[1];

        if (args != null &amp;&amp; IsFileInBucket(bucketName, key))
        {
          InvalidateFiles(bucketName, key);
        }
        else
        {
          Console.WriteLine("\n\nDone.");
        }
      }
      else
      {
        Console.WriteLine("\nUse:\n   S3-Invalidate BUCKETNAME KEY\n\ne.g.\n   S3-Invalidate images photo.gif\n");
      }

      // Console.ReadKey();
    }
  }
}

Using CKEditor in ASP.NET MVC

If you’re using ASP.NET MVC, setting up CKEditor is pretty straightforward from NuGet, especially if you’re using jQuery as well.

1. First, install it from NuGet:

2. By default, it will put the files under the Scripts directory. I prefer to have it under /js/libs, so I move it there after it’s done downloading.

3. After that, select a view (.cshtml) file and after jquery is loaded, include the following .js files:

4. Now, assuming you have a textarea of id=”message”:

apply the following method:

$("#message").ckeditor();

5. At this point, you’re done with CKEditor with the default settings.

6. If you want to configure the editor, update the config.js. The following makes the textarea 500px and shows a limited number of tool buttons:

CKEDITOR.editorConfig = function (config) {
  config.width = 500;
  config.toolbar =
  [
    [
      'SourceBold',
      'Italic',
      'Underline',
      'Strike',
      '-',
      'Subscript',
      'SuperscriptNumberedList',
      'BulletedList',
      '-',
      'Outdent',
      'Indent/Styles',
      'Format',
      'Font',
      'FontSize'
    ]
  ];
};

This is what it’ll look like:

You might want to check out the other configuration settings for the toolbar. Check out the settings and jQuery CKEditor adapter.

Validating Rich TextArea in ASP.NET MVC 3

There’s a few things to consider when validating data from a rich textarea. After setting it up (here’s a blog post about that), we have to allow the property to accept HTML, otherwise, you’ll get this:

Which would normally be good a thing for normal textboxes to avoid XSS. However, here we have to accept it. So assuming we have a property in our model called message, we add the AllowHtml attribute:

  [AllowHtml]
  public string Message { get; set; }
 

This is all great and dandy, however, once you do that, it won’t allow other validations, like Range(). So what we have to do is create our own attribute. To do this, we just create a class that inherits ValidationAttribute:

 
class AllowHtmlRangeLength : ValidationAttribute
{
  public override bool IsValid(object value)
  {
    string property = (string)value ?? "";
    if (property.Length >= 3 && property.Length <= 2000)
    {
      return true;
    }
 
    return false;
  }

In this case, we're only accepting (to attempt to validate) a string from 3 to 2000 characters. Then we use it like this in our model:

[AllowHtml]
[AllowHtmlRangeLength(ErrorMessage="Please have at least 3 to 2000 characters."]
public string Message { get; set; }

The problem with this set up is that we don't want HTML tags to count as characters. So we need to parse out HTML. Because parsing data with just one regular expression can be error-prone, it's best to use a library like HTML Agility pack – get it from NuGet:

Once you have it installed in your project, we can reuse the sample code parse out HTML from its CodePlex site.

For simplicity’s sake, I made the class and its methods static. Additionally, I added the following method to add additional scrubbing logic:

    public static string ConvertHTMLToCleanText(string html)
    {
      HtmlDocument doc = new HtmlDocument();
      doc.LoadHtml(html);
 
      StringWriter sw = new StringWriter();
      ConvertTo(doc.DocumentNode, sw);
      sw.Flush();
 
      // let's clean the string + Remove double spaces.
      string clean = Regex.Replace(sw.ToString().Trim(), @"\s{2,}", "");
 
      return clean;
    }
 

Once we have that set up, let’s now tweak our AllowHtmlRangeLength attribute we started out with to use this new ConvertHTMLToCleanText method (from above):

 
  class AllowHtmlRangeLength : ValidationAttribute
  {
    public int minHtmlLength { get; set; }
    public int maxHtmlLength { get; set; }   
 
    public override bool IsValid(object value)
    {
      string property = (string)value ?? "";
 
      if (HtmlToText.ConvertHTMLToCleanText(property.ToString()).Length >= minHtmlLength && HtmlToText.ConvertHTMLToCleanText(property.ToString()).Length <= maxHtmlLength)
      {
        return true;
      }
 
      return false;
    }
 
    public override string FormatErrorMessage(string s)
    {
      return String.Format(CultureInfo.CurrentCulture, ErrorMessageString, minHtmlLength, maxHtmlLength);
    }
  }

We're overriding the FormatErrorMessage method so we can customize the error message to show the min and max values of the range. Also, we need to set min and max as public properties so we can use it as arguments as part of the AllowHtmlRangeLength attribute. So this is how it's called now:

[AllowHtml]
[AllowHtmlRangeLength(ErrorMessage="Please have at least {0} to {1} characters.", minHtmlLength=3, maxHtmlLength=255)]
public string Message { get; set; }

So let’s see. This throws an error, even though there’s HTML that bolds, underlines, and adds a heading of 1.

The following has no error:

The following has 3000 chars and it fails.

Check out the source files.

Event Delegation/Propagation (Bubbling) via jQuery

I was going through the book JavaScript Programmer’s Reference by Alexei White and noticed two diagrams that explain the event delegation and event propagation:

So rather than binding an event handler to each tr or td, you bind only to the table element, and capture the event (via bubbling), detect the element that fired it, and then fire the event handler. This is more efficient than binding to each and every tr or td – instead you rely on the action bubbling up to one element.

Let’s demonstrate this using jQuery:

$(document).ready( function() {

 // http://api.jquery.com/event.target/
 // http://docs.jquery.com/Events_%28Guide%29

 $("#datatable").click( function(event) {    
   // Detect the element that fired off the event
   if ( event.target.nodeName == "TD" )
   {
     alert( "you clicked on a td element" );
   }
 });
});
<table id="datatable" border="1">
 <tr>    
   <th>Header 1a</th>
   <th>Header 1b</th>
   <th>Header 1c</th>
   <th>Header 1d</th>
   <th>Header 1e</th>
 </tr>

 <tr id="row1">
   <td id="aaa">Data 1a</td>
   <td>Data 1b</td>
   <td>Data 1c</td>
   <td>Data 1d</td>
   <td>Data 1e</td>
 </td>

 <tr id="row2">
   <td>Data 1a</td>
   <td>Data 1b</td>
   <td>Data 1c</td>
   <td>Data 1d</td>
   <td>Data 1e</td>
 </td>
 
 <tr id="row3">
   <td>Data 1a</td>
   <td>Data 1b</td>
   <td>Data 1c</td>
   <td>Data 1d</td>
   <td>Data 1e</td>
 </td>
 
 <tr id="row4">
   <td>Data 1a</td>
   <td>Data 1b</td>
   <td>Data 1c</td>
   <td>Data 1d</td>
   <td>Data 1e</td>
 </td>

</table>


MongoDB Console Tip: Better Display of Object on Console

Quick tip. This is just a neat way to better display the JSON from the console. For example, if I did this in one of my dbs:

db.client.find()

I would get:

{ "_id" : ObjectId("4da45b3cf980ed161462c2ef"), "ContactEmergencyDetails" : { "awesome" :
[ 1111, 2222, 3333 ], "cool" : "awesome", "dan" : [ 4.5, 5.322 ] }, "firstname" : null, "lastname" : null }

But if I changed it to this (converting it to Array):

db.client.find().toArray()

It formats it better:

[
  {
    "_id" : ObjectId("4da45b3cf980ed161462c2ef"),
    "ContactEmergencyDetails" : {
      "awesome" : [
                    1111,
                    2222,
                    3333
                ],
        "cool" : "awesome",
        "dan" : [
                  4.5,
                  5.322
                ]
  },
  "firstname" : null,
  "lastname" : null
  }
]

Dapper – A C# Micro ORM Library Makes Data Access a Snap – Part 1

I’ve recently gotten a chance to try out Dapper – a micro ORM library by Sam Saffron, which originally spawned from StackOverflow’s codeset. If you’re looking for an extremely light-weight library to access your SQL Server, I highly recommend it. It focuses more on convention than configuration. It also does not have the overhead that EntityFramework or NHibernate have, and it emphasizes speed and ease-of-use.

Dapper is a collection of Extension Methods that enhance the Connection object (or rather extends the IDbConnection interface). It also embraces the use of inline SQL in your code, which is useful when retrieving sets that are less trivial. With its buddy, Dapper-Extensions by Thad Smith, it makes DB interaction even easier.

Both of these libraries can be downloaded from NuGet, and you’ll need them to run the following code.

There’s really just one thing that I found irritating about the Dapper project: the documentation. While there is documentation found at its Google Code home page, I find it very lacking.

Anywhoot, to get started first we need to create our table. Once we have that and add some data, we’ll use the Dapper to extract the data and map to objects.

----------------------------------------
-- Customer Schema
----------------------------------------
CREATE TABLE [dbo].[Customer](
[CustomerID] [uniqueidentifier] NOT NULL,
[FirstName] [nvarchar](50) NULL,
[LastName] [nvarchar](50) NULL,
[Age] [int] NULL,
[IsAllowed] [bit] NULL,
[DateRegistered] [datetime] NULL,
[AdditionalDetails] [nvarchar](max) NULL,
CONSTRAINT [PK_Customer_1] PRIMARY KEY CLUSTERED
(
[CustomerID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

ALTER TABLE [dbo].[Customer] ADD  CONSTRAINT [DF_Customer_CustomerID]  DEFAULT (newid()) FOR [CustomerID]
GO

----------------------------------------
-- Data
----------------------------------------
INSERT INTO [dbo].[Customer]([CustomerID], [FirstName], [LastName], [Age], [IsAllowed], [DateRegistered], [AdditionalDetails])
  SELECT N'5458dff8-cea2-4bdb-9431-1dea56f109f8', N'Bruce', N'Wayne', 31, 1, '20080604 08:13:44.000', N'I am Batman' UNION ALL
  SELECT N'1767bc57-af03-4b17-891f-2aa9af244180', N'Peter', N'Parker', 25, 1, '20120103 12:22:28.000', N'I am Spider-Man' UNION ALL
  SELECT N'dc2bf42d-045b-4189-bd6b-8bf1bf120291', N'Eddie', N'Brock', 34, 0, '20040123 02:45:41.000', N'We are Venom'

OK, so this is what we have so far:

Because Dapper focuses more on convention over configuration, it’s important to note that when you create your class:

  • The name of your class must match the name of the table, otherwise an exception is thrown.
  • All column names must match all class property names, otherwise an exception is thrown.
  • If a column is not used (in NOT written out in the SELECT statement) and the class property exists, it will set to NULL or assign a default value – more on this later.

Now that we’re aware of these points, let’s see the code to get started:

using System;
using Dapper;
using System.Data.SqlClient;

class Customer
{
  public Guid CustomerID { get; set; }
  public string FirstName { get; set; }
  public string LastName { get; set; }
  public int Age { get; set; }
  public bool IsAllowed { get; set; }
  public DateTime DateRegistered { get; set; }
  public string AdditionalDetails { get; set; }
}

class Program
{
  private static void Main()
  {

    using (SqlConnection conn = new SqlConnection("Data Source=NARUTO;Initial Catalog=TESTDATABASE;Integrated Security=True"))
    {
      conn.Open();

      // Put dapper code here.

      conn.Close();
    }

    Console.ReadLine();
  }
}

OK, so there’s nothing out of the ordinary here. We’re creating the class we want to map our data to, creating a Connection object, opening, closing, and then disposing (via using). Now let’s suck up some data within our Main() method:

private static void Main()
{
  using (SqlConnection conn = new SqlConnection("Data Source=NARUTO;Initial Catalog=TESTDATABASE;Integrated Security=True"))
  {
    conn.Open();

    IEnumerable customers = conn.Query("SELECT * FROM Customer");

    foreach (Customer c in customers)
    {
      Console.WriteLine("CustomerID: " + c.CustomerID);
      Console.WriteLine("FirstName: " + c.FirstName);
      Console.WriteLine("LastName: " + c.LastName);
      Console.WriteLine("Age: " + c.Age);
      Console.WriteLine("IsAllowed: " + c.IsAllowed);
      Console.WriteLine("DateRegistered: " + c.DateRegistered);
      Console.WriteLine("AdditionalDetails: " + c.AdditionalDetails);
      Console.WriteLine("-----------------------------------------------");
    }

    conn.Close();
  }

  Console.ReadLine();
}

As we see, the Query extension method pulls in the data based on the select statements. The Query method returns a strongly-typed list of Customer. You should see the following:

Now what if we want to get the number of records in the table? Well, because Query returns an IEnumerable, we cannot use the Count property. To do so, we convert to a List:

List customers = (List)conn.Query("SELECT * FROM Customer");
Console.WriteLine(customers.Count);

That should give us the count. To see how the data types were mapped, we can take a look at the Dapper source code, SqlMapper.cs inside the static method SqlMapper(). For reference, you can take a peek at these two sources to understand SQL Server/CLR/.NET framework data types:

http://stackoverflow.com/questions/425389/c-sharp-equivalent-of-sql-server-2005-datatypes

http://msdn.microsoft.com/en-us/library/ms131092.aspx

For our example though, we saw that the data types were mapped:

Mismatches and Nulls

In the query that we ran, we were making the assumption that all columns in the db match all the properties in the class. What if we have a mismatch? What if we have this?

IEnumerable customers = conn.Query("SELECT LastName FROM Customer");

Notice that we’re only retrieving the LastName, while we have other properties in our Customer class. Well, this is what you would see:

So from the above, we notice that Dapper will handle Nulls by:

  • Setting strings as Nulls
  • Setting a Guid to 00000000-0000-0000-0000-000000000000
  • Setting an int to 0
  • Setting bool to false
  • Setting a DateTime to 1/1/0001 12:00:00 AM

Which will all happen when Dapper cannot find a class property to map to from the column value. Also, if you column name that DOES NOT match a property, it will throw a SqlException of “Invalid Column Name”.

Parameterization

What if we want to pass a parameter into our SQL? Let’s pass a parameter:

IEnumerable customers = conn.Query("SELECT * FROM Customer WHERE AGE > @Age", new { Age = 30 } );

Notice that I’m passing in an anonymous object. I could also have done:

Customer someCustomer = new Customer {
Age = 33,
FirstName = "Clark Kent"
};

IEnumerable customers = conn.Query("SELECT * FROM Customer WHERE AGE > @Age", someCustomer );

Which yields:

The property in someCustomer (FirstName = “Clark Kent”) is silently ignored because it’s not used in the SELECT statement.

When the above is run, SQL Server Profiler shows that the following is run:

exec sp_executesql N'SELECT * FROM Customer WHERE AGE > @Age',N'@Age int',@Age=33

So we know it’s parameterized.

To call a stored procedure and map it to objects, we do, assuming we have the following sproc:

CREATE PROCEDURE GetCustomers
(
@IsAllowed BIT
)
AS
BEGIN

SELECT * FROM Customer
WHERE IsAllowed = @IsAllowed

END

We do:

// The second @ token does not have to be named "@IsAllowed" and can be named anything as
// long as the C# property in the anonymous object is named the same thing.
IEnumerable customers = conn.Query("GetCustomers @IsAllowed = @IsAllowed", new { IsAllowed = 33 } );

Also accepted:

IEnumerable customers = conn.Query("GetCustomers @IsAllowed = @Allow", new { Allow = 33 } );

Or you can be more explicit by specifying the command type (StoredProcedure):

IEnumerable customers = conn.Query("GetCustomers", new { IsAllowed = 33 }, commandType: CommandType.StoredProcedure );

Or writing it a more secure way:

DynamicParameters parameters = new DynamicParameters();
parameters.Add("@IsAllowed", 'f', dbType:DbType.Int32);

IEnumerable customers = conn.Query("GetCustomers", parameters, commandType: CommandType.StoredProcedure );

To insert data, we do as follows:

Customer customer = new Customer{
  FirstName = "Mazinger",
  LastName = "Z",
  Age = 40,
  IsAllowed = true,
  DateRegistered = DateTime.Now,
  AdditionalDetails = "Metallic defender"
};

conn.Execute(@"INSERT INTO Customer
                                  ( FirstName ,
                                  LastName ,
                                  Age ,
                                  IsAllowed ,
                                  DateRegistered ,
                                  AdditionalDetails

                   )
                   VALUES  ( @FirstName ,
                                 @LastName ,
                                 @Age ,
                                 @IsAllowed ,
                                 @DateRegistered ,
                                 @AdditionalDetails
                               )"
                 , customer);

This ends part 1 of the tutorial. I will post the 2nd part soon.

Model Binding to a Dropdown

Sample #1: Binding to a List<string>

There’s a few ways to model bind a collection to a dropdown using the DropDown HTML helpers in ASP.NET MVC. Let’s first look at a simple scenario, where we have a dropdown and we want to bind to a List of states.

For this example, we’re going to construct a class called Globalization that has the list of states. (I use an this object to hold look-up data sets.)

  public class Globalization
  {
    public List States
    {
      get
      {
        return new List() 
        {
          "NY", "NJ", "IL", "TX", "FL"
        };
      }
    }

Now let’s create our model:

public class Person
{
  [Required(ErrorMessage="Please choose a state!")]
  public string State { get; set; }
}

And follow up with our Controller:

  public class HomeController : Controller
  {
    Globalization global = new Globalization();

    public ActionResult Index()
    {
      return View();
    }
    Globalization global = new Globalization();

    public ActionResult Index()
    {
      return View();
    }

    [HttpPost]
    public ActionResult Index(Person ba, FormCollection form)
    {      
      // Let's check if the state form field exists in the Global State list...
      if (global.States.Exists(s => s == form["State"] ? true : false))
      {
        // Clear the errors from the state property of the modelstate
        ModelState["State"].Errors.Clear();
      }      

      // Let's put it in the ViewBag so we can retain the user's form state when 
      // the page is refreshed and the forms are repopulated with what the user
      // previously put in.       
      ViewBag.selectedState = form["State"];

      if (ModelState.IsValid)
      {
        // Run further server-side business logic from private methods.
        // DoFurtherStuff();
        return (RedirectToAction("Success"));
      }

      return View(ba);
    }

    public ActionResult Success()
    {
      return View("Success");
    }
  }

Now let’s do the View:

@model MvcApplication10.Models.Person
@using MvcApplication10.Models;
@{
  ViewBag.Title = "BankAccount";
  Html.EnableClientValidation(false);
  Html.EnableUnobtrusiveJavaScript(false);
}

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "mvcform" }))
{    
  
    BankAccount

    <div class="editor-field">      
      @{ 
        SelectList slStates = new SelectList(new Globalization().States, ViewBag.selectedState); 
      }
      @Html.DropDownList("State", slStates.OrderBy( x =&gt; x.Text ), "")
      @Html.ValidationMessageFor(model =&gt; model.State)
    </div>

    <p>
      
    </p>
  
}
<div>
  @Html.ActionLink("Back to List", "Index")
</div>

So with this app, if we don’t pick a value from the dropdown, we get an error:

Now, let’s look at the HTML code generated:


  
  FL
  IL
  NJ
  NY
  TX

Notice that the option elements don’t have explicit values, so they’ll be set to the text inside the option elements. So that’s equivalent to:


  
  FL
  IL
  NJ
  NY
  TX

We leave the first one blank so the user has to select a value. So what if we want to bind the dropdown to a key/value pair collection like Dictionary? Like this for example:


  FL
  IL

To do the above, refer to the next section…

Sample #2: Binding to a List<SelectListItem>

Now let’s visualize a different scenerio:

Where the HTML generated is:


  
  Approval Code
  More Info Requested
  Rejected
  Deleted
  Approved

and we have to populate it with the data from the db (Status table):

Where the schema is:

CREATE TABLE [dbo].[Status](
	[StatusID] [tinyint] IDENTITY(1,1) NOT NULL,
	[Name] [varchar](50) NOT NULL
 CONSTRAINT [PK_Status] PRIMARY KEY CLUSTERED 
(
	[StatusID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

So we write the C# code a little different for this scenario. I’ve found that for this, it’s helpful to use the helper @Html.DropDownListFor(), which accepts an IEnumerable, which you’ll have to construct.

First let’s create our Model class:

public class Category
{		
    [Required(ErrorMessage = "Status is required.")]
    public Byte StatusID { get; set; }
}

For convenience, let’s also create a ViewModel class that uses Category. We’re also using Dapper here, which makes db connection a snap. Check out the tutorial for more details.

  /// <summary>
  /// We create his class so we can map data from Dapper.
  /// </summary>
  public class StateSelectListItem
  {
    public string Name { get; set; }
    public byte StatusID { get; set; }
  }

  /// <summary>
  /// This is the ViewModel for the Category Create Form
  /// </summary>
  public class CategoryViewModel
  {
    public Category CategoryModel { get; set; }

    public List ListStatusCodes
    {
      get
      {
        // We're putting an empty SelectListItem so that the first item in the drop down
        // is blank. 
        List selectList = new List() { new SelectListItem() { Text = "", Value = "", Selected = false } };

        using (SqlConnection conn = new SqlConnection("Data Source=NARUTO;Initial Catalog=GalaxyM33;Integrated Security=True"))
        {
          conn.Open();

          // Let's map the results (using Dapper) to the list of StateSelectListItem
          IEnumerable listStatus = conn.Query("select StatusID, Name From [Status]");

          // We're adding SelectList objects to the List...
          foreach (StateSelectListItem item in listStatus)
          {
            selectList.Add(new SelectListItem() { Text = item.Name, Value = item.StatusID.ToString() });
          }

          conn.Close();
        }
        return selectList;
      }
    }
  }

Here’s the controller:

    public ActionResult Create()
    {
      CategoryViewModel viewModel = new CategoryViewModel();    
      return View(viewModel);
    }

    [HttpPost]
    public ActionResult Create(CategoryViewModel viewModel)
    {      
      return View(viewModel);
    }

Now for the View:

@model ViewModels.CategoryViewModel
@{
  ViewBag.Title = "Create";
  Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Create</h2>


@using (Html.BeginForm())
{
  @Html.ValidationSummary(true)
  
    Category
    <div class="editor-field">      
      @Html.DropDownListFor(m =&gt; m.CategoryModel.StatusID, Model.ListStatusCodes)
      @Html.ValidationMessageFor(model =&gt; model.CategoryModel.StatusID)
    </div>       
    <p>
      
    </p>
  
}
<div>
  @Html.ActionLink("Back to List", "Index")
</div>

That should do it.

Download Sample 1

Model Binding and Validation ASP.NET MVC Sample Project

I wanted to share this sample project I put together that demonstrates model-binding and validation of several form components, including complex ones such as dropdowns, checkboxes, and radio buttons. There are several aspects to think about when submitting a form:

  1. HTML form value has to map to the correct C# property/object via Model Binding.
  2. Value submitted has to be properly validated based on Attributes or logic in controller.
  3. If the form has invalid data, the form has to refresh itself and be populated with all the values the user previous attempted to submit.
  4. The appropriate error messages have to be displayed next. The error messages can be part of the set of attributes above the property or handled via ViewBag/ViewData object.

The following example has all that. It also uses a ViewModel (BankAccount.cs) to piece together the main Business Domain Models (e.g. Person).

Download the Sample Project

Here’s our classes in the project:

View Bound Events from an Element in jQuery

The .data() method is a neat way to find out what data is associated with an element. For example, let’s say we have the following HTML:

<a href="http://www.google.com" id="google-link">Click me to proceed.</a>

and we run the following:

$("#google-link").data("events");

We’ll get (in Chrome’s console):

We get an undefined because there are no events bound to it. Now, let’s add some events:

    $("#google-link").click(function(e) {      
      alert("Google link was clicked.");
      e.preventDefault();
    });

    $("#google-link").hover(function(e) {      
      alert("Google link was hovered.");
      e.preventDefault();
    });

Now let’s view the page and run the data method again in the console.

$("#google-link").data("events");

The results:

Thus it’s very handy, especially when you’re using plugins and they misbehave by randomly hooking themselves into elements, getting in your way.

Error Logging in ASP.NET MVC with ELMAH

Error logging in ASP.NET MVC is extremely easy with ELMAH (Error Logging Modules and Handlers). I suggest you get it from NuGet:

Once you have it installed, it can instantly start recording errors, even Yellow Screens of Deaths. Here’s a list of errors from Elmah:

So what happens, is after you set it up via NuGet, you can get started viewing issues (if there are any) via elmah.axd. So in my case:

http://localhost:56598/elmah.axd

Now, if you’re using Chrome, and you view this page, Chrome will try to request for favicon.ico, which is not delivered from this web page. So, you have to write a filter in your web.config to ignore the .ico file:

     .
     .
     .
  <elmah>    
    <errorFilter>
      <test>
        <regex binding="Context.Request.ServerVariables['URL']" pattern="/favicon\.ico(\z|\?)" />     
      </test>
    </errorFilter>    
  </elmah>

</configuration>

Or if you want to completely ignore 404 errors:

     .
     .
     .
  <elmah>    
    <errorFilter>
      <test>
        <equal binding="HttpStatusCode" value="404" type="Int32" />     
      </test>
    </errorFilter>    
  </elmah>
</configuration>

By default, ELMAH stores error details in memory, so every time the app pool gets restarted, it gets flushed. To dump the data to SQL Server instead, update your web.config:

  <elmah>
    <errorLog type="Elmah.SqlErrorLog, Elmah" connectionStringName="ElmahConnectionString"/>
  </elmah>
</configuration>

The Elmah connection string is pretty straightforward:

<connectionStrings>
<add name="ElmahConnectionString " connectionString="Initial Catalog=my_database;data source=.\SQLEXPRESS;Integrated Security=SSPI;" providerName="System.Data.SqlClient" />
</connectionStrings>

Then you go to the Elmah project page and run the SQL Server script via SSMS – MAKE SURE YOU RUN ‘USE ‘ first!

http://code.google.com/p/elmah/downloads/list

It then creates a table:

Testing JavaScript Code in Sublime Text with Node.js

Testing JavaScript code can easily be done now with today’s browser in console mode. If you want to this within an IDE like Sublime Text from the press of a button, read on. :)

The first thing you’ll need is a JavaScript interpreter like Node.js. Get it from http://nodejs.org/ . Then in Sublime Text go to:

Tool -> Build System -> New Build System

Create a new build system file. In this example, we’ll use JavaScript.sublime-build

By default, it’ll create it under the path:

C:\Users\Dan\AppData\Roaming\Sublime Text 2\Packages\User

Once you do that, configure the build file using the settings from the Sublime Text official docs.

So your config file will look like this:

{
  "cmd": ["C:/Program Files (x86)/nodejs/node.exe", "-p", "$file"]  
}

and that should be it.

So now when you press F7, the build system will run and the output will be shown like so:

Send A File Path from the Windows Context Menu to App

Here’s an easy way to pass the file path to a console app. I needed a way to right click on a folder or a file, and send the path to a console app, where the app does its thing with the file(s).

To show you what I mean:

When I right-click on “coolbeans” it runs the following console app, which simply displays the path:

The C# app is pretty straightforward. Basically, once you have the file path, you can apply any operations on the file.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace dan_rocks
{
  class Program
  {
    static void Main(string[] args)
    {
      Console.WriteLine(args[0]);
      Console.ReadLine();
    }
  }
}

So there’s nothing crazy going on in the above sample. You basically just have to add a few entries to the Registry.

If you want to pass a folder path when you right-click on it, and select the option in the context menu, create a new entry:

HKEY_LOCAL_MACHINE/Software/Classes/Folder/Shell

If you want to pass in a file, do the following:

HKEY_CLASSES_ROOT\*\shell

Let’s pass in the filepath to note.exe:

Do that and you’ll see the following:

ErrorDetail I/O Exception: peer not authenticated

Similar to this page, I was getting the following error:

ErrorDetail I/O Exception: peer not authenticated
Filecontent Connection Failure
Mimetype Unable to determine MIME type of file.
Statuscode Connection Failure. Status code unavailable.

Which you get when the JVM has an old version of an SSL certificate. More specifically, I was having problems connecting to ConstantContact, after noticing that they had just renewed their certificate:

Cracking my head open, and trying every solution in the world along what the people posted here, we just decided to reboot the server. This flushed the cache and it worked.

If you can afford to do this, then I recommend it if you want to go for the fastest solution. ConstantContact later provided other possible solutions.