How to capitalize first letter razor

Question

I am new to MVC and have not found a solution for this online.

I have the html as :

@Html.DisplayFor(model => model.Address1) <br />

I want all the first letter of address1 to be capital letters e.g. Something Road instead of something road.

Now I have a class client and property Address1 and using EF to get the address as follow:

 public class MyDBContext : DbContext
    {
        public DbSet<Client> Clients { get; set; }
    }

Hope it makes sense.

Answer 1

You could add a partial class for Client with a property that returns Address1 in title case:

public partial class Client
{
    public string TitleCaseAddress1
    {
        get
        {
            return System.Globalization.CultureInfo.CurrentCulture.TextInfo.ToTitleCase(this.Address1);
        }
    }
}

You would then use TitleCaseAddress1 in your Razor:

@Html.DisplayFor(model => model.TitleCaseAddress1) <br />

Reference: http://msdn.microsoft.com/en-us/library/system.globalization.textinfo.totitlecase(v=vs.100).aspx

Answer 2

It's best to keep the presentation layer and the data access layer separate. Create a view model that wraps or translates the ORM / entity framework objects.

public class ClientViewModel
{
    private Client _dao;

    public ClientViewModel(Client dao)
    {
        _dao = dao;
    }

    public string Address 
    { 
        get
        {
            // modify the address as needed here
            return _dao.Address;
        }
    }
}

Answer 3

I know that the original question referred to capitalizing every word in the whole string. But, I got here trying to find a solution to capitalizing the first letter of a string. I agreed with kiflay's answer as the best solution to the OP. But, expanded on it to modify only the first letter, in my usage.

CSS:

blockquote::first-letter {
text-transform: capitalize;}

Answer 4

For anyone looking to do this strictly in Razor.
This example is converting the logged in user name. Replace with your string variable.

This gets first letter and converts to upper:

@(@User.Identity.GetUserName().ToString().Substring(0, 1).ToUpper())

This gets remaining string.

@(@User.Identity.GetUserName().ToString().Substring(1, User.Identity.GetUserName().ToString().Length - 1))

Just put them together like so to get the whole string.

@(@User.Identity.GetUserName().ToString().Substring(0, 1).ToUpper())@(@User.Identity.GetUserName().ToString().Substring(1, User.Identity.GetUserName().ToString().Length - 1))

Answer 5

easy solution could be

Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { class = "form-control" } })

then use below css to capitalize your first letter then you done.

.form-control {
text-transform:capitalize;
}

Answer 6

Here is the correct way to accomplish what you want, I've implemented it for you.

There is an HtmlStringFormatter.Create() which allow you to pass a delegate and make your own anonymous formatter.

Code Sample:

// This just upper case all the letters.
@Html.DisplayFormatFor(model => model.Address, HtmlStringFormatter.Create(s=> s.ToUpper()))

If You to create a custom formatter, derive from HtmlStringFormatter and set its delegate property to whatever manipulation you want to do.

Code Sample:

// Here I use the Capital Letter custom formatter.
@Html.DisplayFormatFor(model => model.Address, new CapitalLetterFormatter())

All the classes:

namespace MvcPlay.HelperExtensions
{
    public static class HelperExtensions
    {
        public static MvcHtmlString DisplayFormatFor<TModel, TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expression, HtmlStringFormatter formatter)
        {
            var output = helper.DisplayFor(expression);
            string formatted = formatter.Delegate.Invoke(output.ToString());
            return MvcHtmlString.Create(formatted);
        }
    }
}

namespace MvcPlay.HtmlStringFormatting
{
    public class HtmlStringFormatter
    {
        public delegate string FormatDelegate(string s);

        public FormatDelegate Delegate;
        public Expression<FormatDelegate> formatExpression;

        private HtmlStringFormatter(FormatDelegate expression)
        {
            Delegate = expression;
        }

        protected HtmlStringFormatter()
        {

        }

        public static HtmlStringFormatter Create(FormatDelegate expression)
        {
            return new HtmlStringFormatter(expression);
        }
    }

    public class CapitalLetterFormatter : HtmlStringFormatter
    {
        public CapitalLetterFormatter()
        {
            Delegate =
                s => new CultureInfo("en-US", false).TextInfo.ToTitleCase(s).ToString(CultureInfo.InvariantCulture);

        }
    }
}

Don't forget to add the following lines to the Web.Config at the Views folder:

<add namespace="MvcPlay.HelperExtensions" />
<add namespace="MvcPlay.HtmlStringFormatting"/>

This will include the Formatters and the Helper Extension automatically so you won't need to include it inside every view that you want to use it in.