CODEWITHSUNDEEP
asp.net-mvc
Bronzato
Bronzato

Reputation: 9332

How to force uppercase on a Html.TextboxFor

I would like to force uppercase on a textbox in my view. So when user type something in the textbox, either the text is immediately converted in uppercase or (an alternative) the text is converted in uppercase when the form is submitted and the model is populated with data (in the action controller). Maybe there are some CSS or jquery solutions but I prefer some MVC solutions (if possible).

Here is my view:

@model Domain.Entities.ProjectTechnology

<script src="../../Scripts/Admin/_AddProjectTechnology.js" type="text/javascript"></script>

<div class="editor-label">Technologies</div>    

<div class="editor-field">

    @using (Ajax.BeginForm("_AddProjectTechnology", new AjaxOptions { HttpMethod = "POST",
                                                                  UpdateTargetId = "RemoveProjectTechnology",
                                                                  InsertionMode = InsertionMode.Replace,
                                                                  OnComplete = "AddProjectTechnologyCompleted" })) {    
        @Html.ValidationSummary(true)
        @Html.HiddenFor(m => m.ProjectID)
        @Html.EditorFor(m => m.TechnologyID)
        @Html.ValidationMessageFor(m => m.TechnologyID)          
    }
</div>

And here is my model:

public class ProjectTechnology
{
    public int     ProjectID   { get; set; }
    public string  TechnologyID    { get; set; }
}

The textbox in question is this line: @Html.EditorFor(m => m.TechnologyID)

How can I proceed ?

Thanks.

Upvotes: 14

Views: 39591

Answers (8)

Pete Swinford
Pete Swinford

Reputation: 61

My line of code in the view is:

@Html.TextBoxFor(model => model.BldgNameAbbv, new {onkeyup="InputToUpper(this);"})

The associated script is:

<script>
function InputToUpper(obj)
{
    if (obj.value!="")
    {
    obj.value = obj.value.toUpperCase();
    }
}
</script>

This worked for me. And using TextBoxFor, instead of EditorFor, was essential.

Upvotes: 6

Derek
Derek

Reputation: 41

If you want to simply prevent saving to the DB as lower case then the most straight forward option is to alter the value to upper case during the HttpPost of the Create and Edit Actions e.g.

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("ProjectID, TechnologyID ")] ProjectTechnology projectTechnology)
    {
        ProjectTechnology.TechnologyID = ProjectTechnology.TechnologyID.ToUpper();

        if (ModelState.IsValid)
        {
            _context.Add(person);
            await _context.SaveChangesAsync();

Upvotes: 1

Alfred Tinsley
Alfred Tinsley

Reputation: 31

I looked at changing my getter and settter in my Model but in my case I am using DB first so if I make a change to my db structure I would have to put the getter and setter code back every time. This would be hard for us to manage in future.

I tried;

@Html.EditorFor(m => m.Lname, 
  new { @class = "whatever-class",  
  @style = "text-transform:uppercase"})

but as stated above this only makes it capital on the View. When you save it to the DB the data appears how ever the user entered it.(GIGO) For our site I am needing it to be upper case in the DB as well. So what I did to solve this issue was to set the property of my object to itself along with .upper(), on the post action method Ex:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Include = "Recid,FName,LName")] UserModel change)
    {
        change.LName = change.LName.ToUpper();
        change.FName = change.FName.ToUpper();
        .... //code to update table
    }

So combined with the CSS style on the front end and setting the property in the post I have upper cases on both the Front and Back end.

Upvotes: 3

Messiah
Messiah

Reputation: 41

Also see this:

@Html.EditorFor(m => m.TechnologyID, 
      new { @class = "whatever-class",  
      @style = "text-transform:uppercase"})

Upvotes: 4

leifbattermann
leifbattermann

Reputation: 632

The easiest way is IMO:

@Html.EditorFor(m => m.TechnologyID, new { htmlAttributes = new { @style = "text-transform:uppercase" } })

Upvotes: 21

Felipe M. Martins
Felipe M. Martins

Reputation: 61

For EditorFor:

@Html.EditorFor(model => 
    model.Nome, 
    new { 
        htmlAttributes = new { 
            @class = "form-control", 
            @onkeyup = "InputToUpper(this);"
        } 
    }
)

Upvotes: 6

Yaroslav Bigus
Yaroslav Bigus

Reputation: 678

You can use text-transform: uppercaase css property. If you want to make this from mvc, you can try create template for textbox(where you output input with css class for uppercase) and use UIHint attribute in the model. Hope this help you.

Upvotes: 3

Darin Dimitrov
Darin Dimitrov

Reputation: 1038710

You could perform this conversion on the getter of the property:

public class ProjectTechnology
{
    public int ProjectID { get; set; }

    private string _technologyId;
    public string TechnologyID 
    {
        get 
        {
            if (string.IsNullOrEmpty(_technologyId))
            {
                return _technologyId;
            }
            return _technologyId.ToUpper();
        }
        set
        {
            _technologyId = value;
        }
    }
}

Upvotes: 5

Related Questions