Question 246875 in ASP.NET Question posted in
The official documentation can be found here.

Asp.net – convert text as uppercase

i want to take uppercase only even if i am entering lowercase it should convert in uppercase in text field in mudblazor.

 <MudTextField For="@(() => AddEditItemModel.HSNSAC)"
               @bind-Value="AddEditItemModel.HSNSAC"
               Label="@_localizer["SAC"]"
               MaxLength="3">
 </MudTextField>

i tried to call through @onclick method and tried to handle with method, but the issue is that method is getting called.

<MudTextField For="@(() => AddEditItemModel.HSNSAC)"
              @bind-Value="AddEditItemModel.HSNSAC"
              Label="@_localizer["SAC"]" MaxLength="3" 
              @oninput="ConvertToUppercase"
</MudTextField>
Tags:

2

Answers


  1. 0

    You need to use Value and ValueChanged instead of @bind-Value if you want to add custom logic for when the value changes.

    The changed value will be passed to the handler method that you assign to ValueChanged.

    Since Value is a property of type T you need to define the it in the component e.g. T="string". docs

    Another tip: You can also set Immediate="true" if you want it to change to uppercase on each input.

     <MudTextField For="@(() => AddEditItemModel.HSNSAC)"
               Value="AddEditItemModel.HSNSAC"
               ValueChanged="HandleValueChanged"
               MaxLength="3" 
               T="string" 
               Label="@_localizer["SAC"]"
               Immediate="true">
 </MudTextField>
 @code{
    void HandleValueChanged(string newValue)
    {
        AddEditItemModel.HSNSAC = newValue.ToUpper();
    }
}

    MudBlazor Snippet

    Alternatively, you can use the Text and TextChanged where the type used for those are string so T does not need to be declared.

     <MudTextField For="@(() => AddEditItemModel.HSNSAC)"
               Text="@AddEditItemModel.HSNSAC"
               TextChanged="HandleTextChanged"
               MaxLength="3" 
               Label="@_localizer["SAC"]"
               Immediate="true">
 </MudTextField>
 @code{
    void HandleTextChanged(string newValue)
    {
        AddEditItemModel.HSNSAC = newValue.ToUpper();
    }
}
    Login or Signup to reply.
  2. 0

    To convert text to uppercase as the user types you need to do the following:

    <MudTextField Label="SAC"  
              T="string"
              Value="addEditItemModel.HSNSAC" 
              ValueChanged="(value) => addEditItemModel.HSNSAC = value.ToUpper()"
              Immediate="true"
              For="@(() => addEditItemModel.HSNSAC)" 
              MaxLength="3" />

<p>@addEditItemModel.HSNSAC</p>

@code {
 private AddEditItemModel addEditItemModel = new AddEditItemModel(); 

 public class AddEditItemModel
    {
       public string HSNSAC { get; set; } 
    }  
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search