Question

我有一个编辑模板，其中包含一个表行（包括其他内容）下拉/组合框以选择货币。此编辑模板在同一个视图中多次显示，用户可以根据需要多次添加这些行。

我希望对行的下拉列表进行更改以反映同一行的EditorFor（货币汇率），因此我添加了一个onchange html参数：

<td>
    @*@Html.LabelFor(model => model.Currency)*@
    @Html.DropDownListFor(model => model.Currency, new SelectList(Model.CurrencyList, "Code", "Code"), new { onchange = "updateCurrency(this)" })
    @Html.ValidationMessageFor(model => model.Currency)
</td>

我的javascript函数进行ajax调用以检索所选货币的汇率：

function updateCurrency(elem) {
        alert("Currency changed!")
        $.ajax({
            type: "GET",
            url: "Currency?code=" + elem.value,
            success: function (msg) {
                // The Rate field's Id:
                var RateId = "@Html.ClientIdFor(model=>model.Rate)" //  // Halp, problem is here!
                document.getElementById(RateId).value = msg;

            }
        });
    }

我的问题是

var RateId = "@Html.ClientIdFor(model=>model.Rate)"

有Html帮助器，它是服务器端代码。因此，当我查看页面的源代码时，将复制javascript代码（每行一次），并且所有var RateId =“@ Html.ClientIdFor（model =＆gt; model.Rate）”指向最近添加的列的EditorFor

我试图解决问题的方法可能是错误的，但是如何让我的javascript代码更新所需的字段（即与更改的下拉列表在同一行中的字段）。

我认为其中一个问题是我在编辑模板上有javasript，但我怎样才能访问诸如document.getElementById（RateId）.value = msg;如果我这样做的话？

提前致谢：）

Answer 1

想出来。希望它有助于某人：

在我看来：

@Html.DropDownListFor(model => model.Currency, new SelectList(Model.CurrencyList, "Code", "Code"), new { @onchange = "updateCurrency(this, " + @Html.IdFor(m => m.Rate) + ", " + @Html.IdFor(m => m.Amount) + ", " + @Html.IdFor(m => m.Total) + ")" })

在单独的JavaScript文件中：

function updateCurrency(elem, RateId, AmountId, TotalId) {

   var cell = elem.parentNode // to get the <td> where the dropdown was

   var index = rowindex(cell) // get the row number

   // Request the currency's rate:
   $.ajax({

      blah blah blah .........
      (RateId[index - 1]).value = 'retreived value'; // Set the rate field value.

   });

}

到目前为止似乎正在运作。

使用Javascript修改复制的EditorTemplates

1 个答案: