Jestem początkującym w MVC i opracowuję stronę internetową e-commerce. W mojej liście koszyka muszę wprowadzić określoną ilość, aby obliczyć całkowitą cenę. Użyłem połączenia ze skryptem Java wewnątrz oświadczenia Foreach, ale połączenie działa tylko dla pierwszego elementu w listy przedmiotów koszyka.

Gdy klikam drugi lub inny element " Całkowita cena ", elementy sterujące trafia do pierwszej pozycji " Całkowita cena ".

Mój skrypt jest

<script>
    function edValueKeyPress() {
        var i ;
        for (i = 0; i < 5; i++) {
            var edValue = document.getElementById("qt");
            var edValue1 = document.getElementById("cprice");
            var s = edValue.value * edValue1.value;
            var t = document.getElementById("total");
            t.value = s;

        }}
 </script>

Mój widok

<table class="table">
    @foreach (var item in lscart)
    {
        <tr>
            <td>
                @{
                    var base64 = Convert.ToBase64String(item.CImage);
                    var imgSrc = String.Format("data:image/jpg;base64,{0}", base64);
                    <img src='@imgSrc' style="width:100px; height:100px;" />
                 }
            </td>
            <td>@Html.DisplayFor(modelItem => item.CProductName)</td>
            <td>Rs.</td>
            <td>@Html.EditorFor(modelItem => item.CPrice, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly",@id="cprice" } })</td>

            <td>
                <div class="col-md-6">

                    @Html.EditorFor(modelItem => item.Cquantity, new { htmlAttributes = new { @class = "form-control", @placeholder = " Qty",@id="qt" } })
                </div>

            </td>
            <td>
                <div>
                    @Html.EditorFor(modelItem => item.CTotalPrice, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @placeholder = " Total Price", @id = "total", @onclick = "edValueKeyPress()", @onkeyup = "edValueKeyPress()" } })

                </div>
            </td>

            <td><a href="#"><i class="fa fa-close"></i></a></td>
        </tr>
    }

</table>

Oto próbka projektu

https://i.stack.imgur.com/mf9pv.png.

0
PRADEEP 6 wrzesień 2017, 14:19

2 odpowiedzi

Najlepsza odpowiedź

//widok

<table class="table">

                        @{
                            int i = 0;

                            foreach (var item in lscart)
                            {
                                i = i + 1;
                                <tr>
                                    <td>
                                        @{
                                var base64 = Convert.ToBase64String(item.CImage);
                                var imgSrc = String.Format("data:image/jpg;base64,{0}", base64);
                                <img src='@imgSrc' style="width:100px; height:100px;" />
                                        }
                                    </td>
                                    <td>@Html.DisplayFor(modelItem => item.CProductName)</td>
                                    <td>Rs.</td>
                                    <td>@Html.EditorFor(modelItem => item.CPrice, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @id = "cprice" + @i } })</td>

                                    <td>
                                        <div class="col-md-6">
                                            @*@Html.EditorFor(modelItem => item.Cquantity, new { htmlAttributes = new { @class = "form-control", @placeholder = " Qty", @onkeyup = "sum()" } })*@
                                            @Html.EditorFor(modelItem => item.Cquantity, new { htmlAttributes = new { @class = "form-control", @placeholder = " Qty", @id = "qt" + @i } })


                                        </div>

                                    </td>


                                    <td>
                                        <div>
                                            @Html.EditorFor(modelItem => item.CTotalPrice, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @placeholder = " Total Price", @id = "total" + @i, @onclick = "edValueKeyPress(" + @i + ")", @onkeyup = "edValueKeyPress(" + @i + ")" } })

                                        </div>
                                    </td>

                                    <td><a href="#"><i class="fa fa-close"></i></a></td>
                                </tr>
                            }
                        }


                    </table>

//scenariusz

<script>
    function edValueKeyPress(i) {


        //alert(i);
        var edValue = document.getElementById("qt" + i);
        var edValue1 = document.getElementById("cprice" + i);
        var s = edValue.value * edValue1.value;
        var t = document.getElementById("total" + i);
        t.value = s;






    }
</script>
0
PRADEEP 7 wrzesień 2017, 09:50

Musisz dodać identyczne nazwy ID

<table class="table">
    @{
         var i = 0; // add a variable to get count
    }
    @foreach (var item in lscart)
    {
        i++; // incrementing for each iteration
        <tr>
            <td>
                @{
                    var base64 = Convert.ToBase64String(item.CImage);
                    var imgSrc = String.Format("data:image/jpg;base64,{0}", base64);
                    <img src='@imgSrc' style="width:100px; height:100px;" />
                 }
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.CProductName)
            </td>
            <td>
                Rs.
            </td>
            <td>
                @Html.EditorFor(modelItem => item.CPrice, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @id="cprice_"+@i } }) // change id 
            </td>
            <td>
                <div class="col-md-6">
                     @Html.EditorFor(modelItem => item.Cquantity, new { htmlAttributes = new { @class = "form-control", @placeholder = " Qty", @id="qt_"+@i } }) // change id 
                </div>
            </td>
            <td>
                <div>
                    @Html.EditorFor(modelItem => item.CTotalPrice, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @placeholder = " Total Price", @id = "total_"+@i, @onclick = "edValueKeyPress(@i)", @onkeyup = "edValueKeyPress(@i)" } }) // change id and pass value of i in onclick
                </div>
            </td>
            <td>
                <a href="#"><i class="fa fa-close"></i></a>
            </td>
        </tr>
    }
</table>

Skrypt będzie wyglądał tak

<script>
    function edValueKeyPress(i) {
        var edValue = document.getElementById("qt_"+i);
        var edValue1 = document.getElementById("cprice_"+i);
        var s = edValue.value * edValue1.value;
        var t = document.getElementById("total_"+i);
        t.value = s;
    }
</script>
0
user6448640user6448640 6 wrzesień 2017, 11:58