c# - 用另一个 MVC 填充控件

Question

我有 C# 经验，但没有 Javascript 经验。我想要实现的目标不应该那么难，但我就是无法让它发挥作用:

我想用文本框的文本属性填充标签的文本属性。这需要在 KeyUpEvent 中完成。

我已经创建了 KeyUpEvent 并且它正在工作，但它没有使用以下代码填充我的标签的文本属性:

<script type="text/javascript">
    $(document).ready(function ()
    {
        $("#@Html.FieldIdFor(model => model.Quantity)").keyup(OnQuantityChanged);
    });

    function OnQuantityChanged()
    {
        alert("onQuantityChanged event fired.")
        document.getElementById('#@Html.FieldIdFor(model => model.SubTotalExclTax)').value = document.getelementById('#@Html.FieldIdFor(model => model.UnitPriceExclTax)').value
    }
</script>

因此，我创建了一个名为 OnQuantityChanged() 的函数，并在 KeyUp 事件上调用此函数。我的函数中的警报: alert("onQuantityChanged eventfired.") 被调用并向我显示一个对话框，因此该函数确实被调用。

我正在使用@Html.FieldIdFor来获取控件的ID。我认为这是由 NopCommerce 实现的，下面是 FieldIdFor 方法的定义:

public static string FieldIdFor<T, TResult>(this HtmlHelper<T> html, Expression<Func<T, TResult>> expression)
{
   var id = html.ViewData.TemplateInfo.GetFullHtmlFieldId(ExpressionHelper.GetExpressionText(expression));
   // because "[" and "]" aren't replaced with "_" in GetFullHtmlFieldId
   return id.Replace('[', '_').Replace(']', '_');
}

我认为我犯了一个语法错误，但不知道如何调试 Javascript，因为在 Visual Studio(2012) 中设置断点不会暂停代码。

我认为下面的行有一些不正确的语法，如果我错了，请纠正我:

document.getElementById('#@Html.FieldIdFor(model => model.SubTotalExclTax)').value = document.getelementById('#@Html.FieldIdFor(model => model.UnitPriceExclTax)').value

更新

页面 HTML 如下:

 <table>
            <tr>
                <td>
                    @Html.NopLabelFor(model => model.UnitPriceInclTax):
                </td>
                <td>
                    @Html.EditorFor(model => model.UnitPriceInclTax)@Model.UnitPriceInclTax
                </td>
            </tr>
            <tr>
                <td>
                    @Html.NopLabelFor(model => model.UnitPriceExclTax):
                </td>
                <td>
                    @Html.EditorFor(model => model.UnitPriceExclTax)@Model.UnitPriceExclTax
                </td>
            </tr>
            <tr>
                <td>
                    @Html.NopLabelFor(model => model.Quantity):
                </td>
                <td colspan="2">
                    @Html.EditorFor(model => model.Quantity, new { id = "lblQuantity"})
                </td>
            </tr>
            <tr>
                <td>
                    @Html.NopLabelFor(model => model.SubTotalInclTax):
                </td>
                <td>
                    @Html.EditorFor(model => model.SubTotalInclTax)@Model.SubTotalInclTax
                </td>
            </tr>
            <tr>
                <td>
                    @Html.NopLabelFor(model => model.SubTotalExclTax):
                </td>
                <td>
                    @Html.EditorFor(model => model.SubTotalExclTax)@Model.SubTotalExclTax
                </td>
            </tr>
        </table>

Answer 1

1. 使用 document.getElementById 时不需要 #，只需表示 id 的字符串就足够了。
2. 标签没有值，您只需设置 innerText 属性即可。

纯 JavaScript 解决方案:

document.getElementById("YourID").innerText = "New Text";

JQuery 解决方案

$("#YourID").text("New Text");