Let MVC Concatenate For You

We have all encountered the situation where we want to show user information on a form. Most people have a FirstName and a LastName (unless you’re Prince or Bono) so we would usually show that data in two separate fields or columns. Here is a way to quickly and easily concatenate MVC ViewModel fields without having to use String.Format. Let MVC concatenate information you.

Firstly, let me set the scene with a simple “ViewModelUser” ViewModel.

namespace MyApp.Web.Models
{
    public partial class ViewModelUser
    {
		public int Id { get; set; }

		[Required("This is a required field")]
		[StringLength(50, ErrorMessageResourceName="ValidatedMaxLength", ErrorMessageResourceType=typeof(Generic))]
		[Display("UserName")]
		public string UserName { get; set; }

		[Required("This is a required field")]
		[StringLength(50, ErrorMessageResourceName="ValidatedMaxLength", ErrorMessageResourceType=typeof(Generic))]
		[Display("First Name")]
		public string FirstName { get; set; }

		[Required("This is a required field")]
		[StringLength(50, ErrorMessageResourceName="ValidatedMaxLength", ErrorMessageResourceType=typeof(Generic))]
		[Display("Surname")]
		public string LastName { get; set; }

		[Required("Email is a required field")]
		[StringLength(100, ErrorMessageResourceName="ValidatedMaxLength", ErrorMessageResourceType=typeof(Generic))]
		[Display("Email")]
		[RegularExpressEmailAttribute]
		[DataType(DataType.EmailAddress)]
		public string Email { get; set; }
	}
}

So now we have a number of fields that “describe” the ViewModelUser class.

A common use case for this is when we want to implement a simple CRUD mechanism. We want to make all users in the system available to an administrator and the most common way to do that is show a list screen, which displays all the users in a tabular format. The administrator can click one of the users in the table and will be directed to an Edit screen. Alternatively, the administrator could click a button to delete the intended user.

List Table

Let’s take this table as an example.

UserName First Name Surname Email
Daffy Daffy Duck [email protected]
Donald Donald Duck [email protected]
Mickey Mickey Mouse [email protected]
Daisy Daisy Duck [email protected]

You can see from this table that we have separated the first and last names. This is because we have separate fields in the database, which have flowed through to the ViewModel.

Here is the MVC razor code that renders the table. Take note of the fields in the razor code and how they relate to the fields of the ViewModelUser ViewModel.

@model IEnumerable<ViewModelUser>

<table class="table table-bordered">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.UserName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FirstName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.LastName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Email)
            </th>
            <th></th>
        </tr>
    </thead>

    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.UserName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.FirstName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.LastName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Email)
                </td>
                <td>
                    <input type="button" value="Edit" />
                    <input type="button" value="Delete" />
		</td>
            </tr>
        }
    </tbody>
</table>

Wouldn’t it be better use of screen real estate if we combined the first and last name columns into one? That is quite to do.

Firstly, let’s make a change to the ViewModel.

public int Id { get; set; }

[Required("This is a required field")]
[StringLength(50, ErrorMessageResourceName="ValidatedMaxLength", ErrorMessageResourceType=typeof(Generic))]
[Display("UserName")]
public string UserName { get; set; }

[Required("This is a required field")]
[StringLength(50, ErrorMessageResourceName="ValidatedMaxLength", ErrorMessageResourceType=typeof(Generic))]
[Display("First Name")]
public string FirstName { get; set; }

[Required("This is a required field")]
[StringLength(50, ErrorMessageResourceName="ValidatedMaxLength", ErrorMessageResourceType=typeof(Generic))]
[Display("Surname")]
public string LastName { get; set; }

[Required("Email is a required field")]
[StringLength(100, ErrorMessageResourceName="ValidatedMaxLength", ErrorMessageResourceType=typeof(Generic))]
[Display("Email")]
[RegularExpressEmailAttribute]
[DataType(DataType.EmailAddress)]
public string Email { get; set; }

[Display("Full Name")]
public string FullName
{
	get
	{
		return FirstName + " " + LastName;
	}
}

Notice the property FullName. This is a simple concatenation of the FirstName and LastName fields. Now all we need to do it call that in our razor code. Here is the altered table code.

@model IEnumerable<ViewModelUser>

<table class="table table-bordered">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.UserName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FullName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Email)
            </th>
            <th></th>
        </tr>
    </thead>

    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.UserName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.FullName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Email)
                </td>
                <td>
                    <input type="button" value="Edit" />
                    <input type="button" value="Delete" />
                </td>
            </tr>
        }
    </tbody>
</table>

And that’s all you have to do. You can use this approach with most ViewModel fields to make your razor code much more succinct and easier to write.

Til next time …


11 Comments

  • this one says:

    Nice post. I was checking constantly this blog and I’m impressed!

    Extremely helpful info particularly the last part :
    ) I care for such information much. I was looking for this particular information for a
    long time. Thank you and good luck.

  • trancheuse says:

    If some one wishes to be updated with hottest technologies afterward he
    must be visit this web site and be up to date every day.

  • like says:

    It’s amazing in support of me to have a site, which is beneficial in support of my knowledge.

    thanks admin

  • Good site you’ve got here.. It’s hard to find high quality writing like
    yours nowadays. I really appreciate people like you! Take care!!

  • Hu Ochoa & says:

    This paragraph is in fact a good one it helps new net users,
    who are wishing in favor of blogging.

  • I am in fact glad to read this website posts which carries lots of useful information, thanks for providing these kinds of information.

  • You really make it seem really easy along with your presentation but I find
    this topic to be really something which I think
    I might never understand. It kind of feels too complex and very
    large for me. I’m taking a look ahead in your subsequent submit, I’ll attempt to get the hold of it!

  • Can I simply just say what a relief to uncover someone who actually understands what they’re talking about on the internet.
    You actually realize how to bring an issue to light and make
    it important. More people need to look at this and understand this side of your
    story. It’s surprising you aren’t more popular because you most certainly have
    the gift.

  • I think the admin of this website is really working hard
    for his site, since here every stuff is quality based stuff.

  • Howdy, I think your web site could be having browser compatibility issues.
    When I look at your web site in Safari, it looks fine
    but when opening in IE, it’s got some overlapping issues.
    I merely wanted to provide you with a quick heads up!
    Apart from that, fantastic website!

  • BestLilia says:

    I see you don’t monetize your page, don’t waste your
    traffic, you can earn additional bucks every month because
    you’ve got high quality content. If you want to know how to make extra bucks,
    search for: Ercannou’s essential adsense alternative

Leave a Reply

Your email address will not be published. Required fields are marked *