Cullen's Code Reveries

Validation: set maxlength of a text box using MVC validation

2011-04-23T17:58:00.000-07:00

Given a view model as below:

public class EmployeeFormViewModel

{

[Required(ErrorMessage = "*")]

    [StringLength(20,ErrorMessage = "Max length 20 characters")]
    public string Name { get; set; }

}



And when client validation and unobtrusive JavaScript are enabled in a MVC 3 app in web.config in the root directory:

  <appSettings>
    <add key="ClientValidationEnabled" value="true"/> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
  appSettings>

A view:

<h2>Employee Formh2>
@using (Html.BeginForm("Employee","SaveEmployeeForm","Home",FormMethod.Post)){
    @Html.TextBoxFor(model=>model.Name)
    <br />
    <input type="submit" value="Submit" />
}

renders into Html on the client side:

<form action="/SaveEmployeeForm/Home?Length=4" method="post">
 <input data-val="true" 
  data-val-length="Name must not be longer than 20 characters long" 
  data-val-length-max="20" 
  data-val-required="*" 
  id="Name" 
  name="Name" 
  type="text" 
  value="" />    
 <br />
    <input type="submit" value="Submit" />
form>


This works great: it shows the error message when the user types a name longer than 20 characters and leaves the text box.  But it still allows the user to type in more than 20 letters before the focus leaves the text box.

  





What if I want to keep the user from keying in 20 characters? 








Well, the maxlength attribute of the input tag is the answer.  When it is set to 20, the user is only allowed to type in 20 characters.  I really don't want to keep setting "maxlength" to every single text box that I create and more importantly I want validation attribute "StringLength" to control this value.  But the generated code does not set the "maxlength" attribute.  How do I set the value of maxlength attribute using the value of data-val-length-max attribute?










A little JQuery sweetness does the trick:



<script language="javascript" type="text/javascript">
    $(document).ready
    (
        function () {
            $('input[data-val-length-max]').each
            (
                function (index) {
                    $(this).attr('maxlength', $(this).attr('data-val-length-max'));
                })
        });
script>
What the code above says is that for every input tag with the attribute of "data-val-length-max", use the value of it to set the value of "maxlength" attribute.

Double Meaning or Entendre

2011-04-22T15:45:00.000-07:00

Double Meaning or Double Entendre can be very funny when used in jokes. Read the following jokes from this site:
Old Timer 1 : You know what I miss?
Old Timer 2 : And what might that be?
Old Timer 1 : Really small targets that are miles away.

Teacher 1 : You know what makes me mad?
Teacher 2 : What?
Teacher 1 : Changing the 'e' to an 'a' and adding a 'd'.

Ha-ha-ha, he-he-he, wasn't that funny!

In the first example above, "miss" could mean thinking of something sentimental wishing you still have it or could mean when I shoot a target I don't hit it. Same thing in the second one where "me" could me myself or the word "me". This is all funny and silly until you start coding that way.

During a recent design session, a team member suggested reusing existing properties for different purposes. This reminded me of a story I heard some years back, during another design session, a team discovered that they needed a new field in the database for their application. The app had been released and it was in production at a major client's site. The client operated on 24/7 schedule, taking down the database would mean longer downtime therefore losing money. So the team decided to use an existing field but use it differently depending the format of the value in the field. It sounded like a good solution, all they had to do is re-deploy the application which took less then 5 minutes. The client gets new features without much of downtime. Great news, right?

To the client, yes. How about for the developers and the long term maintenance of the application? Subsequently, the property of the class that the field was mapped to had to be handled differently. Wherever the property was used, a helper extension method was used to parse the value so the new value is can be put to work while making sure not to break the old code. Suddenly, we created a lot of work for ourselves which meant higher cost to develop the feature. More importantly, it had a long term implication for maintenance. As we know people change jobs, developers come and go, now there was additional cost for maintenance because we had to document what the field really meant so we could educate new developers to use it properly. In the end, it really wasn't worth saving the client's downtime of maybe 10 hours the most.

The moral of the story: do not give double meaning to a property, field. Do it properly using S.O.L.I.D principles.

A mystery solved

2011-04-17T14:10:00.000-07:00

Today, I was trying to solve a problem where on our French site, a specification number (which is a decimal number) of the same product was toggling between 1.3 and 1,3 intermittently. It should be 1,3 for French. It turned out the problem was in two folds.

First of all, the following code is being used to convert decimal to string:
//specNumber = 1.3;
specNumber.ToString();

Secondly, the app is running on two load balanced servers. One server's region and language is set up as:

while the other is set up as below:

That explains why the value is appearing as 1.3 or 1,3 intermittently.

To address this problem, we need to fix it in code. When the site is being browsed in French we'll use:

   var fr = CultureInfo.CreateSpecificCulture("fr-CA");
   specNumber.ToString(fr.NumberFormat);

That way, the code is not dependent on the server region and language settings.

Asp.net View (Webform View) to Razor View Translator

2011-04-13T20:39:00.000-07:00

If you need to have asp.net views translated to Razor views, you might be interested in checking out Teleriks

Razor Converter.

Custom Routing in MVC

2011-04-12T06:20:00.000-07:00

In MVC, by default, out of the box routing pattern is {controller}/{action}/{id} where id is optional as defined in the Global.asax.cs:

            routes.MapRoute
                (
                    "Default", // Route name
                    "{controller}/{action}/{id}", // URL with parameters
                    new {controller = "Home", action = "Index", id = UrlParameter.Optional} // Parameter defaults
                );

However, this will not always meet your needs. In such case, you can create custom routes. For instance, let's say it is a requirement that the "HR (Human Resource)" department of your company should have their own unique URL in a pattern like this: "Hr/PersonalProfile/Display/1234". Custom route can be utilized to make this work:

            routes.MapRoute
                (
                    "Hr", // The name must be unique in a route table
                    "Hr/PersonalProfile/{action}/{id}", // URL with parameters
                    new {controller = "PersonalProfile", action = "Display", id = UrlParameter.Optional} // Parameter defaults                );

Now you can display a personal profile using this URL: http://{yourdomian}/Hr/PersonalProfile/Display/1234

One very important thing to note is that MVC tries to find matching route in the order of the routes registration.

In our example, the custom route "Hr" must be registered before the default route is. Otherwise, when the site is accessed with the URL "http://{yourdomian}/Hr/PersonalProfile/Display/1234", it matches the default route and it will try to look for a controller named "Hr" which doesn't exist. This, of course, results in an error as below:

Server Error in '/' Application.

The resource cannot be found.

Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.

Requested URL: /Hr/PersonalProfile/Display

Phil Haack created a very useful tool for debugging MVC routing: route debugger and you can get it through NuGet package management tool. Just type in the following command in Package Manager Console:

PM> install-package routedebugger

If you're not familiar with NuGet, read about it here. And download it from here.

Hide MVC version # and Asp.Net version # from HTTP Header

2011-03-22T06:02:00.000-07:00

By default, Asp.Net and Mvc emit the version numbers in the HTTP header as below:

In the figure above, X-AspNet-Version is the Asp.net version and X-AspNetMvc-Version is version number of System.Web.Mvc version number as shown below:

But for some reason that you don't want the world know that you're running your app on Asp.net and MVC, you can turn them off.

To remove X-AspNet-Version from the header, set the value of enableVersionHeader of httpRuntime tag to false the web.config as follows:

  <system.web>
    <httpRuntime enableVersionHeader ="false" />

To remove X-AspNetMvc-Version from the header, you can modify the application_start event in Global.asax.cs as follows: protected void Application_Start()
        {
            MvcHandler.DisableMvcResponseHeader = true;

After making above changes in my app, the end result of the header looks like this:

NTLDR is missing Press CTRL+ALT+DEL to restart on Windows XP Pro SP3

2010-09-13T06:28:00.000-07:00

Saturday, decided to defragment my old laptop since I didn't remember when it was the last time that was done. My laptop runs on Window XP professional with SP3. As I looked at the analysis graph, it was indeed heavily fragmented. I left the laptop alone while defragmenting. Couple hours later, I shut it down. The next time when I booted it up, I got the following error message:

NTLDR is missing
Press CTRL+ALT+DEL to restart.

And the system would not boot . I searched the web for solutions and found a bunch of posts on that topic. Some of them are risky (could damage the hard disk partitions) while others require a floppy drive which my laptop doesn't have. After much thinking and praying, the solution was quite simple:

Load the XP Pro OS CD/DVD into the drive
Reboot the laptop and press F12 (this could be different depending on your laptop manufacturer) to load boot devices option
Select to boot from CD/DVD drive
The OS installation will start but don't panic it's not going to overwrite anything yet
When options are presented to install, repair or quit installation, choose 'R' for repair
And then select the OS you want load. By default you'll see: 1. c:\windows. In this case, type "1" and press enter
And then put the admin password
After you've logged in, you'll be presented with command prompt C:\Windows
Type D: plush Enter
Copy file NTLDR from the OS drive to root C:

copy d:\i386\ntldr c:\.

Reboot the computer
It should reboot correctly

Hope this will work for you as well. Naturally, if your cause is different, this will not work for you.

Some MVC Resources

2010-09-01T10:32:00.000-07:00

View Rules: this is a great post on ElegantCode.com regarding MVC view rules;

When to use and when not use Asynchronous actions

2010-08-31T07:10:00.000-07:00

Mvc 2 has a really cool feature: asynchronous actions. You can implement actions so it can be called asynchronously and your route is the same as synchronous call when making the request. Just read and article on msdn when to use asynchronous actions and when not to:

When to use

the operations in the actions are network-bound or I/O bound
Parallelism is more important than simplicity of code
You want to provide a mechanism to allow users to cancel long-running request

When not to use

operations a CPU bound
operations are simple and short-running

Organizing View Models with Namespaces

2010-08-30T12:05:00.000-07:00

In Asp.Net MVC, each view should, preferably, have a strongly typed view model. For a given controller, it could serve up multiple views through actions or simply by rendering partial views. Sometimes using same view model name for different views make sense while the view model implementations are quite different. For instance, I might have a view model named ProductForm for a view named Index as follows

public class ProductModel
{
  [DisplayName("Product Id")]
  public Guid Id { get; set; }
  public string Name { get; set; }
  public string Category { get; set; }
}

and I also have a view model for a view named Edit:

public class ProductModel
{
  [DisplayName("Product Id")]
  public Guid Id { get; set; }
  [Requried]
  public string Name { get; set; }
  [Requried]
  public Category Category { get; set; }
}

public enum Category
{
   Hardware,
   Software,
}

The difference between the two models are obvious. In this case, to distinguish the two models, I could use different names for each or separate them using name space. I find it easier to use namespace the models and it also follows the pattern convention which Mvc uses to locate a view for a controller as follows:

Models
  |---Home (controller name)
   |--- Index (view name)
   |--- ProductModel.cs (view model)

|--- Edit (view name)

|--- ProductModel.cs (view model)

So the name space looks like as follows:


UI.Home.Index.ProductModel
UI.Home.Edit.ProductModel

using statement causes undesired result in WCF client.

2009-08-11T10:19:00.000-07:00

I have a WCF service client which is a WinForms desktop application. I have a method that is responsible for uploading certain information by consuming the WCF service. I was initializing the proxy as follows:

using ( proxy = new WCFServiceClient. WCFServiceClient() ) {

proxy = new WCFServiceClient. WCFServiceClient() ;

proxy.UploadInfo();

}

It was working just fine. Then I had to make some changes (added a new method to the business logic layer called by the service) on the server side, it compiled without any error and passed the unit test. So I published it to my test site and ran a unit test against the test site. To my surprise, I started getting the following error message:

The communication object, System.ServiceModel.Channels.ServiceChannel, cannot be used for communication because it is in the Faulted state.

After bit of searching, I found this article.

According to this artical, one "should not use the C# "using" statement to automatically clean up resources when using a typed client". The reason being, "The C# "using" statement results in a call to Dispose(). This is the same as Close(), which may throw exceptions when a network error occurs. Because the call to Dispose() happens implicitly at the closing brace of the "using" block, this source of exceptions is likely to go unnoticed both by people writing the code and reading the code. This represents a potential source of application errors." That was exactly what was going on with my code. The "using" statement was masking the actual error that was occurring on the server. After removing the "using" statement and running the test again, I got the actual error which was the service couldn't find the new method that I had just added. It turned out that the publishing tool didn't update the business logic DLLs. The problem went away after forcing a replacement of the BLL DLLs.

Display Grid Page info ("Page # of Total Page Count")

2009-08-04T16:29:00.000-07:00

The GridView control has the options to enable paging. You can also specify different paging modes (NextPreviousFirstLast, Numeric, etc.) but it does not provide a way to display page info in the format of "Page 1 of 10" when you're in the mode of NextPriviousFirstLast mode. So I decided to add my own. Below the GridView control, I added a label control as follows:

I don't like to hard code strings into code if I can avoid it for internationlization reasons and for ease of editing at one place. So I put all my messages in a resource file. To display "Page # of #", I create a string resource named "PageNumberOfTotal" and its content is "Page {0} of {1}". Then I handle the DataBound event of the GridView control as follows:

protected void gdRecords_DataBound(object sender, EventArgs e)

{

//If there are records to display, then display the message

if (gdRecords.Rows.Count > 0)

{

lblNumberOfRecords.Visible = true;

lblNumberOfRecords.Text = string.Format(

MessageResource.Properties.Resources.PageNumberOfTotal,

gdRecords.PageIndex + 1,

gdRecords.PageCount);

} //If there isn't any records to display, the hide the label control

else lblNumberOfRecords.Visible = false;

}

Populating controls in FormView Insert or Empty empty template with default values

2009-07-23T13:00:00.000-07:00

FormView doesn't make it easy for a developer when he wants to populate the controls in a empty or insert template with default values. After doing some search, I found out one way to accomplish this is to override ItemCreated event as follows:

protected void fvMine_ItemCreated(object sender, EventArgs e)

{

//if the current mode in insert mode

if (fvMine.CurrentMode == FormViewMode.Insert)

{

//get a reference to the control

txt = (TextBox) fvMine.Row.FindControl("txtCity");

if (txt != null)

{

// populate it with a default value

txt.Text = "New York";

}

Delayed TextBox TextChanged event

2009-07-20T12:30:00.000-07:00

I have a textbox that does a search upon TextChanged event firing. However, I don't want it search for every character the users types unless the user is done with typing. So I wanted to delay it from firing. I found a great article here that describes exactly what I wanted. It uses System.Timers.Timer but I changed it to System.Windows.Forms.Timer.

WCF Send/Receive Progress Update

2009-07-20T10:14:00.000-07:00

After searching around the web, I didn't find any satifactory article. So posted a question on StackOverflow.com.

WCF Message Send/Receive Progress

2009-07-20T08:16:00.000-07:00

I've been working a project that involves sending/receiving messages to a server from a desktop application via a WCF webservice. When transferring a large chunk of message, I'd like to display a progress indicator to the desktop user. I'm going to do a little bit of research to find such a solution.

Debugging WCF: Unable to automatically step into the server. The remote procedure could not be debugged.

2009-06-02T12:20:00.000-07:00

I kept getting the following error all of a sudden when I was debugging a WCF client: "Unable to automatically step into the server. The remote procedure could not be debugged."

The WCF service is hosted by IIS. The client is a WinForm application. Both projects reside within the same solution. When I received the error message, I checked to make sure that the WCF service host's web.config has the debug flag set to true as follows: <compilation debug="true">. But I was still getting the same error. Then it dawned on me that I had changed the binding from wsHttp to wsDualHttp and wonder it that was the cause. So I reverted it back to wsHttp binding and I was able to step through the serive code when debugging the client.

I'll have to look up why that is when I get a chance from my project.

Move selection to the next item in ListBox when the record is deleted in a FormView

2009-04-15T12:13:00.000-07:00

In my previous post, I showed the method to highlight a newly inserted record from the FormView in the ListBox. Conversly, when a record is deleted from the FormView, I'd like to move to the next item in the ListBox if there is one. If the deleted item is last item, then move to the previous one.

Below is the definition of the ListBox:
<asp:ListBox ID="listBoxEmployees" runat="server"
AutoPostBack="true"
DataSourceID="odsListBoxEmployees"
DataTextField="EmployeeName"
DataValueField="EmployeeID"
onselectedindexchanged="listBoxEmployees_SelectedIndexChanged"
ondatabound="listBoxEmployees_DataBound">
</asp:ListBox>

Below is the definition of the FormView:
<asp:FormView
ID="fvEmployee"
runat="server"
DataKeyNames="EmployeeID"
DataSourceID="odsEmployee"
oniteminserted="fvEmployee_ItemInserted"
>

Below is the definition of the Object Data Source:

<asp:ObjectDataSource
ID="odsEmployee"
runat="server"
TypeName="Employees"
SelectMethod="SelectOne"
InsertMethod = "Insert"
UpdateMethod = "Update"
DeleteMethod = "Delete"
ConflictDetection="OverwriteChanges"
oninserted="odsEmployee_Inserted"
ondeleting="odsEmployee_Deleting"
>
<SelectParameters>
<asp:ControlParameter Name="EmployeeID" Type="Int32" Direction="Input" ControlID="listBoxEmployees" PropertyName="SelectedValue" />
</SelectParameters>
<InsertParameters>
<asp:Parameter Name="EmployeeName" Size="80" Direction = "Input" Type="String" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="EmployeeID" Type="Int32" Direction="Input" />
<asp:Parameter Name="EmployeeName" Size="80" Direction = "Input" Type="String" />
</UpdateParameters>
</asp:ObjectDataSource>

Handle Deleted event of the ODS so before the record is deleted in the FormView, we'll store the next item in the ListBox in view state as follows:


protected void odsEmployee_Deleting(object sender, ObjectDataSourceMethodEventArgs e)
{
    //if there are more one items in the list
    if (listBoxEmployees.Items.Count > 1)
        //if the record to be deleted is not the last one in the list
        if (listBoxEmployees.SelectedIndex < listBoxEmployees.Items.Count-1)
        {
            //store the next item's value
            ViewState["EmployeeID"] = listBoxEmployees.Items[++listBoxEmployees.SelectedIndex].Value;
        }
        else
            //if it is the last one, then store the previous item's value 
            ViewState["EmployeeID"] = listBoxEmployees.Items[--listBoxEmployees.SelectedIndex].Value;
}

The code above is self explanatory.

Next handle the DataBound event of the ListBox control as follows:


protected void listBoxEmployees_DataBound(object sender, EventArgs e)
{
if (listBoxEmployees.Items.Count > 0)
if (ViewState["EmployeeID"] != null)
{
listBoxEmployees.SelectedValue = ViewState["EmployeeID"].ToString();
}
else listBoxEmployees.SelectedIndex = 0;
ViewState.Remove("EmployeeID");
}

This will set the SelectedValue of the ListBox to the value in the view state. After we used the value in the view state, we remove it.

Highlight ObjectDataSource bound ListBox after ObjectDataSource bound FormView inserted a brand new record

2009-04-15T10:37:00.000-07:00

I have a ListBox (I'll call it listBoxEmployees) that is bound to an ObjectDataSource (I'll call odsListBoxEmployees).

<asp:ListBox ID="listBoxEmployees" runat="server"
AutoPostBack="true"
DataSourceID="odsListBoxEmployees"
DataTextField="EmployeeName"
DataValueField="EmployeeID"
onselectedindexchanged="listBoxEmployees_SelectedIndexChanged"
ondatabound="listBoxEmployees_DataBound">
</asp:ListBox>

It displays Employee Name as Text and stores EmployeeID as Value in the list.

Then I have a FormView which is bound to another ObjectDataSource (I'll call it odsEmployee) which retrieves an individual record when an item is selected in the ListBox control. Below is the FormView definition:
<asp:FormView
ID="fvEmployee"
runat="server"
DataKeyNames="EmployeeID"
DataSourceID="odsEmployee"
>

Below is the ODS definition:
<asp:ObjectDataSource
ID="odsEmployee"
runat="server"
TypeName="Employees"
SelectMethod="SelectOne"
InsertMethod = "Insert"
UpdateMethod = "Update"
DeleteMethod = "Delete"
ConflictDetection="OverwriteChanges"
oninserted="odsEmployee_Inserted"
ondeleting="odsEmployee_Deleting"
>
<SelectParameters>
<asp:ControlParameter Name="EmployeeID" Type="Int32" Direction="Input" ControlID="listBoxEmployees" PropertyName="SelectedValue" />
</SelectParameters>
<InsertParameters>
<asp:Parameter Name="EmployeeName" Size="80" Direction = "Input" Type="String" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="EmployeeID" Type="Int32" Direction="Input" />
<asp:Parameter Name="EmployeeName" Size="80" Direction = "Input" Type="String" />
</UpdateParameters>
</asp:ObjectDataSource>

What I want to do after inserting a record from the FormView is to add the newly inserted record in the ListBox control and highlight it by making it the selected item. Below is how to achieve this:

Handle the Inserted event of odsForm as follows:

protected void odsForm_Inserted(object sender, ObjectDataSourceStatusEventArgs e)
{
ViewState["EmployeeID"] = e.ReturnValue;
}

This will store the employee id of the new inserted record in the view state.

And then handle the DataBound event of the ListBox as follows:

protected void listBoxEmployees_DataBound(object sender, EventArgs e)
{
if (listBoxEmployees.Items.Count > 0)
if (ViewState["EmployeeID"] != null)
{
listBoxEmployees.SelectedValue = ViewState["EmployeeID"].ToString();
}
else listBoxEmployees.SelectedIndex = 0;
ViewState.Remove("EmployeeID");
}

This will set the SelectedValue of the ListBox to the value in the view state. After we used the value in the view state, we remove it.

It works great.

The difference between Eval and Bind data binding functions in ASP.NET

2009-04-15T07:30:00.000-07:00

When binding in ASP.NET within FormView, GridView or DetailsView, one could use data-binding expressions with this tag <%# %>. There are two functions, which are Eval and Bind, used frequently. For instance, suppose you a data source has the field named "ProductName", you could bind it as follows:

<%# Eval('ProductName')%> OR <%# Bind('ProductName')%>

So what is the difference between the two functions?
The difference is, according to MSDN, the Eval function is used to define one-way (read-only) binding. The Bind function is used for two-way (updatable) binding.

Hello, world!

2009-02-19T13:26:00.000-08:00

This blog spot will serve as my development knowledge diary as well as a place where I share what I've learned so it may benefit those who are searching for knowledge in software development in Windows, .NET, MS SQL and C# stack.