-1

How do I add a dollar sign in front of the TextBox of Rate, based on this code? I want to have the dollar symbol so people don't need to type '$' by themselves. Here is my code:

<div class="row" style="margin-bottom: 20px">
    <div class="col-md-3">
        @Html.Label("lblP1", "Rate 1", htmlAttributes: new { @class = "control-label", @style = "margin-right: 30px" })
        <br />
        @Html.EditorFor(m => m.Pricing.Price1, null, new { htmlAttributes = new { @type = "string", @class = "form-control" } })
        <br />
        @Html.ValidationMessageFor(m => m.Pricing.Price1, "", new { @class = "text-danger" })
    </div>
    <div class="col-md-3">
        @Html.Label("lblExp1", "Expiry 1", htmlAttributes: new { @class = "control-label", @style = "margin-right: 30px" })
        <br />
        @Html.EditorFor(m => m.Pricing.Exp1, "{0:yyyy-MM-dd}", new { htmlAttributes = new { @type = "text", @class = "form-control datepicker1", @id = "datepicker1", @placeholder = "MM/DD/YYYY" } })
    </div>
</div>

It looks like:

enter image description here

Hammad Sajid
  • 312
  • 1
  • 3
  • 14
Gary
  • 11
  • 5
  • you can add add EditFor into span like `$@Html.EditorFor(m => m.Pricing.Price1, null, new { htmlAttributes = new { @type = "string", @class = "form-control" } })
    `     – Hammad Sajid Oct 15 '19 at 12:22
  • You can also use javascript, Jquery or any frontend language to render it on keystrokes/typing – Hammad Sajid Oct 15 '19 at 12:23
  • Please refer to this [link](https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_form_input_group&stacked=h) – jishan siddique Oct 15 '19 at 12:24
  • Relevant Answer `https://stackoverflow.com/questions/2913236/html-text-input-field-with-currency-symbol` – Hammad Sajid Oct 15 '19 at 12:26

3 Answers3

1

You can use the DisplayFormat attribute to decorate your model property:

[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:c}")]
public decimal Price1 { get; set; }

Then in your view:

@Html.EditorFor(m => m.Pricing.Price1)

You could apply similar formatting for the expiry DateTime using DisplayFormat.

Or instead of EditorFor you could use TextBoxFor passing in a format string:

@Html.TextBoxFor(m => m.Pricing.Price1, "{0:c}")
haldo
  • 14,512
  • 5
  • 46
  • 52
0

It looks like you're already using Bootstrap. You could use the Input group to render a dollar sign in front of the input like so:

<div class="input-group mb-3">
    <div class="input-group-prepend">
       <span class="input-group-text">$</span>
    </div>
    @Html.EditorFor(m => m.Pricing.Price1, null, new { htmlAttributes = new { @type = "string", @class = "form-control" } })
</div>
Matt M
  • 3,699
  • 5
  • 48
  • 76
0

Using Bootrap 4 and fontawesome

  <div class="form-group">
                    @Html.LabelFor(model => model.Pricing.Price1, htmlAttributes: new { @class = "control-label font-weight-bold" })
                    <div>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="basic-addon1"><i class="fas fa-dollar-sign"></i></span>
                            </div>
                           @Html.TextBoxFor(m => m.Pricing.Price1, "{0:c}")
                            @Html.ValidationMessageFor(model => model.Pricing.Price1, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>
Víctor Melgar
  • 71
  • 7