Question

首先：新年快乐！

我试图建立一个简单的餐厅收银机。有一个价格菜单列表，订购金额的输入字段和应该计算该行的小计的字段。

我已经尝试了很多方法，但我没有到达那里。现在我得到了一些不同的解决方案，我越来越困惑。

Create.cshtml：

 <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.details)
            </th>
            <th>
                @Html.Label("Prijs (€)")
            </th>
            <th>
                @Html.Label("Aantal")
            </th>
            <th>
                @Html.Label("SubTotaal")
            </th>
        </tr>

        @for(var i = 0; i < Model.details.Count; ++i) {
            <tr>
                <td>
                    @Html.DisplayFor(model => model.details[i].omschrijving)
                </td>
                <td>
                    @Html.DisplayFor(model => model.details[i].prijs, new { id = "txtPrijs" })
                </td>
                <td>
                    @Html.EditorFor(model => model.details[i].aantal, new { id = "txtAantal" })
                </td>
                <td>
                    @Html.DisplayFor(model => model.details[i].subTotaal, new {id = "txtSubTotaal"}) 
                </td>

            </tr>
        }
    </table>

所以这是我们需要的3行。 Prijs * aantal = subtotaal 当有人输入金额时 - 应该动态计算小计。

@ Html.DisplayFor（model =＆gt; model.details [i] .prijs，new {＆gt; id =＆＃34; txtPrijs＆＃34;}） @ Html.EditorFor（model =＆gt; model.details [i] .aantal，new {＆gt; id =＆＃34; txtAantal＆＃34;}） @ Html.DisplayFor（model =＆gt; model.details [i] .subTotaal，＆gt; new {id =＆＃34; txtSubTotaal＆＃34;}）

以下是应该进行计算的Javascript

<script type='text/javascript'>
$(document).ready(function ($) {
        $('#txtAantal').blur(function () {
            var prijs = $.trim($("#txtPrijs").html());
            var aantal = $.trim($("#txtAantal").html());
            var tot = prijs * aantal;
            $("#txtSubTotaal").val(tot);

    });
});

现在问题：
- 如何从Displayfor调用脚本？（onBlur）
- 这有更简单的方法吗？

感谢您的帮助！

Answer 1

然后，您可以使用jquery的 endsWith 选择器，该选择器选择id以 aantal结尾的元素。

例如：

$("input[id$='aantal']" ).on('blur',function(){ //Similarly change for others });

现在即使数字更改，这也只会获取input以 id
结尾的aantal
<强>更新

选项1 - 使用内联函数调用

在function添加内联onblur以触发textbox事件，如下所示：

@Html.EditorFor(model => model.details[i].aantal, new { id = "txtAantal", onblur="calculate(this)" })

并写一个function正文

function calculate(control) { var parent=$(control).closest('tr'); var prijs = $.trim($(parent).find("label[id$='prijs']").val()); var aantal = $.trim($(control).val()); var tot = prijs * aantal; $(parent).find("label[id$='subTotaal']").val(tot); }

在上面的函数中，parent将获取传递的控件的最接近的tr。 prijis的值将通过搜索所引用的父级的子级并使用endswith选择器获取，并且与小计相同。

选项2 - 为每个textbox分配一个班级，并向该班级添加模糊事件

向textbox添加属性，即class，并在其上附加blur个事件，如下所示：

@Html.EditorFor(model => model.details[i].aantal, new { @class="aantal" }) $('.aantal').on('blur',function(){ var parent=$(this).closest('tr'); //refer with this for current textbox var prijs = $.trim($(parent).find("label[id$='prijs']").val()); var aantal = $.trim($(control).val()); var tot = prijs * aantal; $(parent).find("label[id$='subTotaal']").val(tot); });

Answer 2

当我第一次开始使用MVC时，我还使用razor直接从控制器将ViewModels注入到视图中。在你的问题中，你问是否有更好的方法来解决你的问题，我相信有：KnockoutJs。

如果您使用的是Visual Studio，则可以使用nuget导入包。

Knockout允许您在javascript中定义一个viewmodel，您可以使用来自ViewModel的数据从控制器填充该模型。 Javascript允许您将计算直接编程到viewmodel（使用knockout绑定到视图）。

不需要更复杂的JQuery脚本。如果您决定不使用它，我仍然建议您通过示例来发现这个惊人的框架！

ASP.NET-JS-Razor：如何从htmlhelper

2 个答案: