Click here to Skip to main content
Click here to Skip to main content
Go to top

Convert View Model property name to string => made easy! (MVC3)

, 3 Apr 2012
Rate this:
Please Sign up or sign in to vote.
Tutorial on how to create simple extension that converts view model propety name to string

Introduction 

Have you ever needed to get a simple property name from MVC View Model?

"Why would I need that?" - you may ask. The answer is pretty simple - if you have jQuery/JavaScript code that works with form elements created from view model, you can have those element names strongly typed in your JavaScript. Also it might be useful in some content output scenarios as well. 

What we need 

Let's say we have this class:

public class SomeClass {public class SomeClass {
  public string SomeProperty { get; set; }
} 
And we have a view model that implements the class above:
public class SomeViewModel{
  public SomeClass SomeClass { get; set; }
}  

Then on our MVC View, which inherits from our view model 'SomeViewModel', you have a text box on your form: 

@Html.TextBoxFor(model => model.SomeClass.SomeProperty)  

Which creates html:

<input id="SomeClass_SomeProperty" name="SomeClass.SomeProperty" type="text"> 

And, for example, you want to add a JQuery UI Datepicker to that text box:

$('#Someclass_SomeProperty').datepicker(); 

But if we rename 'SomeProperty' property or 'SomeClass' class, we'll have to manually rename references to it from jQuery. Which might be unpleasant with a large amount of jQuery code. 

So, we need to have this 'Someclass_SomeProperty' created in a strongly typed manner. How do we do that? 

Create HtmlHelper Extension 

We will create a simple extension of the MVC HtmlHelper class. So, first let's create an extension class anywhere in the project:

using System;
using System.Linq.Expressions;
using System.Web.Mvc;
 
public static class MvcExtensions {
  public static string GetPropertyName<TModel>
   (this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, object>> propertyNameExpr) {
    return ExpressionHelper.GetExpressionText(propertyNameExpr).Replace('.', '_');
  }
}
Then on the view, when we want to add a jQuery UI datepicker to textbox, we do this:
$('#@Html.GetPropertyName(model => model.SampleClass.SampleProperty)').datepicker();  

And the output is:

$('#Someclass_SomeProperty').datepicker(); 

Which is just what we wanted!

Additionally, if we just need to get the name of the property, but not the class, add this extension to class MvcExtensions

public static string GetPropertyNameShort<TModel>(this HtmlHelper<TModel> htmlHelper,
  Expression<Func<TModel, object>> propertyNameExpr) {
  var expression = ExpressionHelper.GetExpressionText(propertyNameExpr);
  return expression.Substring(expression.LastIndexOf('.') + 1);
}  

So now, the same code on the view will return this:

$('#SomeProperty').datepicker();  

I found this extension to be very useful in large complex applications, especially after you use ReSharper to rename classes/properties. 

P.S. 

A little amendment - this code from extensions above:

var expression = ExpressionHelper.GetExpressionText(propertyNameExpr); 

Will work fine, but will fail when either class or property is null. If you need it to work on null properties/values, change line above like this: 

var lambda = propertyNameExpr as LambdaExpression;
var expression = lambda.Body.ToString().Replace(")", "");
return expression.Substring(expression.IndexOf('.') + 1); 

And that's all folks, thank you for reading! 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Mikhail-T
Web Developer
United States United States
MVC, .NET, AngularJS, JQuery, and POST/GET - all are my good friends!

Comments and Discussions

 
SuggestionIndexer Values PinmemberPaul Pemberton4-Feb-14 7:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140921.1 | Last Updated 3 Apr 2012
Article Copyright 2012 by Mikhail-T
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid