Question

Bootstrap，HTML5或jQuery是否可以在输入字段中将货币前缀作为显示元素而不是实际输入值的一部分？

例如，我希望在金额字段中显示£550.00，但数据显示为550.00

我尝试过使用w2ui，jQuery Price Format和jQuery maskMoney，所有3个基本上做同样的工作，它们确实可以作为前缀或后缀，但它们实际上并没有在输入中存储值，因此发布数据会返回null值。

Model.cs

[DisplayFormat(DataFormatString = "{0:F2}", ApplyFormatInEditMode = true)]
public double Amount { get; set; }

HTML

<div class="col-sm-3">
    <div class="input-group">
        <span class="input-group-addon">Amount</span>
        @Html.TextBoxFor(m => m.Amount, new { @class = "form-control", @Value = @ViewBag.Amount, placeholder = "Amount", @Id = "Amount" })
    </div>
</div>

// Dynamically setting value of field
$('#Amount').val(data.Amount);

// w2ui example
$('#Amount').val(data.Amount).w2field('money', { moneySymbol: '£' });

// jQuery Price Format example
$('#Amount').val(data.Amount).priceFormat({
    prefix: '£'
});

我意识到我可以使用另一个字段来存储数值，但我需要显示很多字段，这些字段最初是动态填充的，但可以被用户覆盖。所以复制字段，一个用于显示输入，另一个用于存储输入数据，似乎过度杀戮。

非常感谢任何帮助： - ）

Answer 1

我建议用span：

包装您的输入

<span class="currency">£ @Html.TextBoxFor()</span>

用css修改它，使其格式化为自己。例如this。

或者只是将其添加为标签：

<label for="currencyInput">Amount in £</label>

否则，您将无法尝试在任何地方删除/添加前缀。保持输入为实际值。

Answer 2

问题不在于任何jQuery库，而是表单发布了一个字符串的事实，而模型期待双重。

所以我已经实现了一个ModelBinder来允许包含'£'井号的字符串数据的帖子并转换为double。

<强> MyModelBinder.cs

namespace WebApplication1.Models
{
    public class MyModelBinder : DefaultModelBinder
    {
        protected override object GetPropertyValue(ControllerContext controllerContext, ModelBindingContext bindingContext, System.ComponentModel.PropertyDescriptor propertyDescriptor, IModelBinder propertyBinder)
        {
            if (propertyDescriptor.ComponentType == typeof(MyModel))
            {
                if (propertyDescriptor.Name == "Amount")
                {
                    var obj = bindingContext.ValueProvider.GetValue("Amount");

                    return Convert.ToDouble(obj.AttemptedValue.Replace("£", ""));
                }
            }

            return base.GetPropertyValue(controllerContext, bindingContext, propertyDescriptor, propertyBinder);
        }
    }
}

<强> HomeController.cs

[HttpPost]
public ActionResult Index([ModelBinder(typeof(MyModelBinder))]MyModel model)

<强> HTML

$('#Amount').val(data.Amount).priceFormat({
    prefix: '£'
});

我希望这对其他人有用。

C＃MVC TextBoxFor货币前缀

2 个答案: