Asp.net mvc以编辑形式计算字段

时间:2017-03-05 13:51:48

标签: c# asp.net-mvc knockout.js

我正在尝试创建asp.net mvc应用程序。在worker.cs类中,我添加了以下参数:

 public class Worker
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Surname { get; set; }
    public double Net { get; set; }
    [Editable(false)][NotMapped]
    public double Gross
    {
        get {
            if (Net <= 282.10 && Net > 0)
                return Math.Round(Net / 0.91, 2);
            else if (Net <= 335.30 && Net > 282.10)
                return Math.Round((Net - 46.5) / 0.76, 2);
            else if (Net <= 760 && Net > 335.3)
                return Math.Round((Net - 75) / 0.685, 2);
            else if (Net > 760)
                return Math.Round((Net / 0.76), 2);
            else
                return 0;
        }

    }
}

总参数应该是只读的。我的问题是关于编辑表单,我需要显示值,然后用户输入 net 值(实时)。我试图使用knockout.js,但我可以&#39 ;弄清楚如何做到这一点。 enter image description here

div class="form-group">
            @Html.LabelFor(model => model.Net, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Net, new { htmlAttributes = new { @class = "form-control", data_bind = "value: NetV, valueUpdate:'afterkeydown'" } })
                @Html.ValidationMessageFor(model => model.Net, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Gross, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
               @Html.TextBoxFor(model => model.Gross, new { @class = "form-control", data_bind="value:GrossV",@readonly = "readonly", disabled = "disabled" })

            </div>
        </div>

2 个答案:

答案 0 :(得分:3)

KnockoutJS 关注 MVVM 结构,以便您可以将计算放在视图模型中。

<强>视图模型: -

var viewModel = function(data) {
   var self = this;
   self.net = ko.observable();
   self.gross = ko.computed(function() {
         if (self.net () <= 282.10 && self.net () > 0)
                return parseFloat(self.net () / 0.91).toFixed(2);
            else if (self.net () <= 335.30 && self.searchQuantity1 () > 282.10)
                return parseFloat((self.net () - 46.5) / 0.76).toFixed(2);
            else if (self.net () <= 760 && self.net () > 335.3)
                return parseFloat((self.net () - 75) / 0.685).toFixed(2);
            else if (self.net () > 760)
                return parseFloat(self.net () / 0.76).toFixed(2);
            else
                return 0;
    }, self);
};

ko.applyBindings(new viewModel());

查看: -

Net:-

<input id="test1" name="test1" type="text" data-bind="value: net, valueUpdate:'afterkeydown'"/>

<p>Gross: <span id="spantest3" data-bind="text: gross"></span></p>

请参阅jsfiddle该工作示例!!

希望它的工作!!

Haapy Coding !!!

答案 1 :(得分:0)

这是需要在客户端(使用javascript)而非服务器端计算的,如果您希望实时显示总数。

要执行此操作,您需要在“Net”输入上使用事件侦听器。像这样:

git fetch