How to load Textboxfor after onchange of a Dropdownlistfor?

Question

How can I load a Textboxfor after choosing a Dropdownlistfor element?

I load the Dropdownlistfor with a list and from that list I want to filter an object to load the balance according to the selected Dropdownlistfor id.

<div class="linhaInteira">
                <div class="coluna">
                    @Html.LabelFor(x => x.ContaPagamento.Conta)
                    @Html.DropDownListFor(model => model.ComboBoxDados.Items, Model.ComboBoxDados, "Escolha",
                    new { onchange = "changeSaldo(this);" })
                </div>
                <div class="coluna">
                    @Html.LabelFor(x => x.ContaPagamento.Saldo)
                    @Html.TextBoxFor(x => x.ContaPagamento.Saldo, new { @readonly = "readonly" })
                </div>
            </div>

My Javascript

<script>
    function changeSaldo(sel) {
        alert(sel.value);
    }
</script>

Method to load the object.

[HttpPost]
public JsonResult ObtemContaPagamento(int id)
{
    var vm = new ConfiguracaoPlanoClienteVm();
    vm.ObtemContaPagamento(id);
    return Json(vm.ContaPagamento.Saldo);
}

Answer 1

After further analyzing, I believe the only problem was the order of the parameters in your url, for example, you were doing so:

$.ajax({ 
    url: '@Url.Action("ClienteConfiguracaoPlano","ObtemContaPagamento‌​")', 
    type: "POST", 
    data: { id: 21}, 
    cache: false, 
    async: true, 
    success: function (data) { 
        alert(data); 
    }
});

while the correct url would be:

$.ajax({ 
    url: '@Url.Action("ObtemContaPagamento‌​", "ClienteConfiguracaoPlano")',
    type: "POST",
    contentType: 'application/json; charset=UTF-8', 
    data: JSON.stringify({ id: 21}),
    dataType: 'json',
    cache: false, 
    async: true, 
    success: function (data) { 
        alert(data); 
    }
});

because first you must pass the name of Action, and then the name of the Controller.

Note also that I used:

contentType: 'application/json; charset=UTF-8', 
data: JSON.stringify({ id: 21}),
dataType: 'json',

So that the data sent and received are by JSON.

Well, as I said in the messages, I suggest you change your Action method to [HttpGet] instead of [HttpPost], since your request only gets data and does not change anything. This way it is safer, because the method [HttpGet] only accepts the data request and not their modification on the server. There are cases that will need to use the [HttpPost], when for example you have to pass as Action parameter, some more complex data, such as a class that has some property with some more complex type, i.e., Ienumerable or some other class within it. In this case you would have to use the [HttpPost] for the [HttpGet] only accepts simple parameters, for example: { parametro: valor }.

In this case then, your request would look like this:

$.get('@Url.Action("ObtemContaPag‌​amento", "ClienteConfiguracaoPlano")', { id: 21 }, function(data) { 
    alert(data); 
});

Another suggestion I give is to use a more user-friendly form of url, for example:

$.get('/ClienteConfiguracaoPlano/ObtemContaPag‌​amento', { id: 21 }, function(data) { 
    alert(data); 
});

Or better yet, so I don’t have trouble with more routes, I usually do the following. In my HTML I put an input to type Hidden with the url inside and get this url by javascript, this way I think it is more typed and safe, this way:

In HTML:

<input type="hidden" id="url-obtem-conta-pagamento" value="@Url.Action("ObtemContaPagamento‌​", "ClienteConfiguracaoPlano")" />

In javascript:

var urlObtemContaPagamento = $('#url-obtem-conta-pagamento').val();
$.get(urlObtemContaPagamento, { id: 21 }, function(data) { 
    alert(data); 
});

This way you make sure you are taking the right route and get more typed.

To better understand routes in ASP.NET MVC, I found this article which explains exactly how it works in a very clear way.

I hope I’ve helped.

Hug!