CODEWITHSUNDEEP
c#asp.net-mvcknockout.js
Laurynas
Laurynas

Reputation: 37

Asp.net mvc calculated field in edit form

I'm trying to create asp.net mvc aplication. In worker.cs class I have added these parameters:

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

    }
}

Gross parameter should be readonly. My question is about edit form, I need to show gross value then user types net value (realtime).I have tried to use knockout.js, but I can't figure out how to do that. 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>

Upvotes: 1

Views: 1830

Answers (2)

Dhiren Patel
Dhiren Patel

Reputation: 500

KnockoutJS Follow MVVM Structure so u can just put calculation in view model.

ViewModel:-

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());

View:-

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>

See jsfiddle That Working example !!

Hope Its Work !!

Haapy Coding !!!

Upvotes: 3

windowtint
windowtint

Reputation: 21

This is something that needs to be calculated client-side (using javascript), not server side, if you want the gross figure to appear in real-time.

To do this, you need an event listener on the "Net" input. Something like this:

$('#net-input').change(function() {
    var gross;
    var net = $(this).val;
    // ..calculate gross..
    $('gross-input').val(gross);
}

Upvotes: 0

Related Questions