MVC4/C# - Geneste data berekenen obv. userinput

[MikevanEngelen]

Als back-end programmeur probeer ik na lange tijd weer eens een website inelkaar te sleutelen voor een goed doel.

Ik gebruik hiervoor MVC 4 (C#) en probeer een product pagina te maken, waarbij de aantallen van de producten kunnen worden aangepast en er "on the fly" een prijsberekening plaatsvind.
De crux hierin, is dat er echter niet slechts één product wordt geladen, maar een onbekend aantal (lijstje komt dmv. EF uit de database).

Mijn doel is dus (waarbij [aantal] variabel is en [PrijsTotaal] daar obv user input direct wordt berekend):

code:

[Product]   [UnitPrijs] [Aantal]    [PrijsTotaal]
Kaas         7,50            1           7,50
BHam         2,00            5           10,00

Ik verwacht geen complete code voorbeelden, maar ik mis een stukje denk logica (denk ik ).

In mijn View doe ik namelijk:

code:

<table border="1">
    <tr>
        <th>Product</th>
        <th>UnitPrijs</th>
        <th>Aantal</th>
        <th>PrijsTotaal</th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>@Html.DisplayFor(modelItem => item.name)</td>
            <td>@Html.DisplayFor(modelItem => item.priceperunit, "EuroCurrency")</td>
            <td><input id="tbxAmount" type="text" /></td>
            <td><div id="lblPriceTotal"></div></td>
        </tr>
    }
</table>

Ik kom er niet bij, in gedachten dan, hoe ik die "lblPriceTotal" uberhaupt on the fly kan berekenen (user input van tbxAmount), gezien het "id" van "tbxAmount" altijd hetzelfde is (dus je meerdere product regels krijgt met hetzelfde "id").

Ik heb al het eea. met Javascript geprobeerd, waaronder de naam en waardes meegeven van de UnitPrijs & een naam die ik voor de textbox on the fly genereerde... Dit is niet gelukt.
Ik ga er van uit dat dit basis MVC4 vragen zijn, zoals gezegd: liever een goede nalees tip dan een snippet, want ik wil graag begrijpen hoe ik 't moet oplossen.

[Megamind]

Ik snap niet helemaal wat je bedoeld, maar is het niet gewoon zoiets

code:

    var total = 0;
    @foreach (var item in Model)
    {
        total+= item.Price;
        <tr>
            <td>@Html.DisplayFor(modelItem => item.name)</td>
            <td>@Html.DisplayFor(modelItem => item.priceperunit, "EuroCurrency")</td>
            <td><input id="tbxAmount" type="text" /></td>
            <td><div id="lblPriceTotal">@total</div></td>
        </tr>
    }

[Eric Z]

Hij bedoeld dat na het invoeren van een aantal de prijs word aangepast.

Met javascript/jQuery moet je een eind kunnen komen denk ik. Door op de onchange van de input de kosten te berekenen en dan de dichtsbijzijnde pricetotal aanpassen.

[LeVortex]

Tip (tenminste als ik het goed begrijp):
wel serverside narekenen, aantal*prijs. Dus niet uitgaan van de clientside berekening van javascript. Anders krijg je dat gezeur wat volgens mij cda had jaren geleden op de site waarbij ze uitgingen van de prijs die op de cliënt berekend werd en die werd massaal aangepast en gefactureerd.

[Jay-P]

Je kan het denk ik het best aan het viewmodel overlaten. EF vult je viewmodel, in je viewmodel voeg je een "amount" (en "totalprice") property toe die je bind aan de textbox (editorfor/textboxfor). Op die manier kan je elke keer dat de "amount" property changed simpel price*amount = totalprice doen.

[edit]bedenk me net dat je volgens mij dan nog wel ervoor moet zorgen dat de viewmodel de view update nadat er wijzigingen zijn aangebracht. Je zou iets als knockout kunnen gebruiken zodat viewmodel-view automatisch 'syncen'. Andere optie is om zolang er nog niet afgerekend wordt het clientside te berekenen en bij checkout het door je viewmodel laten controleren.

Dit artikel is mischien handig voor je.

[ Voor 47% gewijzigd door Jay-P op 06-10-2013 13:53 ]

[L01]

C# is natuurlijk een server-side taal, wat je wilt bereiken dient voornamelijk de client kant, JS dus.

Ik kan je geen codevoorbeeld geven maar op de volgende manier moet het lukken:

Je vangt met javascript het onchange of onblur event af.
Daarna pak je de waardes voor je berekening uit dezelfde rij als waarin je getypt hebt (<tr>)
Na je berekening vul je de totaal prijs in op de gewenste plek.

Zodra je dit POST kan je dit wel prima herbereken in je business layer op de server.

Succes!

[F.West98]

Je moet iig niet 10x hetzelfde id gebruiken.
Wat je beter kan doen is je model aanpassen, en er een count ofzo bij zetten (aantal).
Dan kan je dus het volgende doen:

code:

<td>@Html.EditorFor(model => item.counter)</td>

Zoiets.

Dan kan je in het model het volgende zetten:

C#:

public int total {
    get {
        return counter * price;
    }
}

En dan stukje JS schrijven, en dan via een AJAX request naar de server number bijwerken en dan de nieuwe totaalprijs terugkrijgen en die in het formulier zetten. Of niet onchange maar als de gebruiker gewoon op een knopje klikt

[MikevanEngelen]

Dank allen voor jullie reactie. Vooral de reactie van Jay-P en F.West98 hebben mij erg op weg geholpen.
Nu had ik de tekstboxen al eerder "uniek" gemaakt, door de guid van het product erin op te nemen, maar miste wat slagen.

Ook neem ik jullie advies van harte dat wanneer je uiteindelijk de order wilt gaan maken, dan toch serverside nog even na te rekenen. Heb inderdaad weinig zin in dat dit misbruikt gaat worden...

Ik ga d'r mee a/d slag, en zal proberen terug te koppelen hoe ik 't uiteindelijk heb opgelost

[InZane]

F.West98 schreef op zondag 06 oktober 2013 @ 23:13:
Je moet iig niet 10x hetzelfde id gebruiken.

Sterker nog: Je mág niet eens 10 keer hetzelfde ID gebruiken. Een ID moet namelijk altijd uniek zijn!

MikevanEngelen schreef op zondag 06 oktober 2013 @ 03:45:
Ik ga er van uit dat dit basis MVC4 vragen zijn, zoals gezegd: liever een goede nalees tip dan een snippet, want ik wil graag begrijpen hoe ik 't moet oplossen.

Kudo's trouwens!

[ Voor 36% gewijzigd door InZane op 07-10-2013 10:46 ]

[MikevanEngelen]

Zoals beloofd zou ik nog een terugkoppeling geven wat ik ervan heb gebakken.
Het is uiteindelijk geworden (nog niet af, maar we komen d'r ):

't JavaScript/jQuery deel:

JavaScript:

<script language="javascript" type="text/javascript">
    $(function() {
        $(".LineCalculation").change(function() {
            // Gather textbox (the actual productid) the change occured for
            var productId = $(this).attr("data-id");
            
            // Retrieve the user filled in value
            var quantityValue = $("#" + "tbx_" + productId).val();

            // Do callback for price calculation
            if (productId != undefined && (quantityValue != undefined)) {
                $.post("/ProductListing/CalculateLinePrice", { "productId": productId, "quantity": quantityValue },
                    function(data) {
                        $("#" + "amt_" + productId).text(data);
                    });
            }
        });
    });
</script>

't Deel van de Model:

HTML:

        <tr>
            <td colspan="2">@Html.DisplayFor(modelItem => item.name)</td>
            <td>@Html.DisplayFor(modelItem => item.priceperunit, "EuroCurrency")</td>
            <td><input class="LineCalculation" type="text" data-id="@item.productid" id="[e-mail]" value="0" size="1" maxlength="4" /></td>
            <td><div id="[e-mail]">€ 0,00</div></td>
        </tr>

't Micro deel van de Controller:

C#:

        public string CalculateLinePrice(Guid productId, int quantity)
        {
            if (productId != Guid.Empty && quantity > 0)
            {
                var product = db.tblProduct.FirstOrDefault(x => x.productid == productId);

                if (product != null)
                return string.Format(CultureInfo.GetCultureInfo("nl-NL"), "{0:C}", product.priceperunit*quantity);
            }

            return string.Format(CultureInfo.GetCultureInfo("nl-NL"), "{0:C}", 0);
        }

[sig69]

Micro tip: als toch alles nl-NL geformat moet worden, zou ik de culture in je web.config zetten en CutlureInfo.Current(UI)Culture gebruiken.

[BasieP]

kleine stukje leesvoer over je manier om op undefined te checken:

http://stackoverflow.com/...r-undefined-in-javascript