Question

I have an Editor Template which contains a table row with (among other stuff) a dropdown/combobox to select a currency. This edit template is shown many times on the same View and it’s possible for a user to add these rows as many times as he wants.

I want changes on a row’s dropdown to reflect in an EditorFor (the currency’s rate) on the same row, so I’ve added a onchange html parameter:

<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>

My javascript function makes an ajax call to retrieve the rate for the selected currency:

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;

            }
        });
    }

My problem is that

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

has that Html helper which is server-side code. So when i view the page’s source code, the javascript code is replicated (once for each row) and all the var RateId = “@Html.ClientIdFor(model=>model.Rate)” are pointing to the most recently added column’s EditorFor.

Probably my way of attempting to solve the problem is wrong, but how can I get my javascript code to update the desired field (i.e. the field in the same row as the changed dropdown list).

I believe that one of the problems is that I have the javasript on the Editor Template, but how could I access stuff like document.getElementById(RateId).value = msg; if I did it like that?

Thanks in advance 🙂

Answer 1

Figured it out. Hoping it helps somebody:

In my view:

@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) + ")" })

In a separate JavaScript file:

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.

   });

}

Seems to be working so far.