Как добавить символ доллара перед TextBox (ASP.NET MVC)

Question

Как добавить знак доллара перед TextBox of Rate, основываясь на этом коде? Я хочу иметь символ доллара, чтобы людям не нужно было печатать «$» самостоятельно. Вот мой код:

<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>

Это выглядит так:

Answer 1

Вы можете использовать атрибут DisplayFormat для украшения свойства вашей модели:

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

Тогда, на ваш взгляд:

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

Вы можете применить подобное форматирование длядата истечения срока с использованием DisplayFormat.

---

Или вместо EditorFor вы можете использовать TextBoxFor, передавая строку формата:

@Html.TextBoxFor(m => m.Pricing.Price1, "{0:c}")

Answer 2

Использование Bootrap 4 и 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>

Answer 3

Похоже, вы уже используете Bootstrap. Вы можете использовать Группа ввода , чтобы отобразить знак доллара перед входом, например:

<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>