How to Repopulate a html helper DropDownListFor

Question

I have a method that is responsible for loading the options from a drop-down menu.

When this view loads for the first time the method receives a null parameter, therefore it does not try to load any option in the drop-down menu

Now when the user finishes typing a number a field that is a html helper TextboxFor and exits this control the method is triggered again.

Only this time the method receives as a parameter the value that the user entered.

Now when he receives this parameter now if the method will bring a list of records.

And assign this list to a property of the model and then pass it on view.

However, and this is the problem, it happens that I cannot make the model update the drop-down menu with the list that is being sent to the property

I have already used ajax but by politas of the company I am not allowed to make a request to a WebService using the local host which busts me the application.

I also tried to make an append of JQUERY and it didn't work.

Try to reload the page but he deletes all other values ​​that the user has previously typed.

This is the function that is responsible for calling the method that will bring the list of options that I need to load from the drop-down menu

    $("#DdlDocType").empty();
    var a=document.getElementById('CodTranportista').value;
    $.get("/Documents/Add",{codtransport:a}, null);

PD. CodTransportista is the Id of the TextBox from which I am getting the value that I will pass to the method.

codtransport is the name of the variable that received the method in the code behind.

DdlDocType is the id I have assigned to the HTML Helper DropDownListFor

And this is DropDownListFor Html Helper that received the model

@Html.DropDownListFor(model => model.CarrierdtId, Model.SelectDocTypes, "No selection", new { id = "DdlDocType", @class = "col-xs-6 col-sm-4 col-md-6 col-lg-4 selectpicker show-menu-arrow modal-input" })

Answer 1

You could create a partial view that renders the dropdown. The ActionResult that will render the partial view, receives the value of the typed number (CodTranportista) and populates your dropdown model. To trigger the 'ActionResult', you can add a jQuery event onBlur to the textbox so every time the field loses focus, the trigger will happen.

Another approach would be this (however I would refector the accepted answer): ASP.NET MVC cascading dropdown

Answer 2

Why don't you post the model to that method, update the SelectDocTypes in there, and than send it back to the view, in that case you would have all your data that the user has previously entered.

EDIT

I know you mentioned you have tried with jQuery append and it didn't work, but maybe you are missing on something. Can you try this approach, i use it in my projects and it works just fine.

jQuery:

var a=document.getElementById('CodTranportista').value;

$.ajax({
        type: 'POST',
        url: '/Documents/Add',
        dataType: 'json',
        data: { codtransport: a },
        success: function (data) {
            $("#DdlDocType").empty();
            $.each(data, function () {
                  $("#DdlDocType").append('<option value="' + this.Value + '">' + this.Text + '</option>');
               });
            },
        error: function (error) {
             alert(error);
        }
     });

C#

public JsonResult Add(string codtransport)
        {
            var source = // Populate from somewhere
            IEnumerable<SelectListItem> dropDownValues = source.Select(s => new SelectListItem()
            {
               Text = s.Name,
               Value = s.Id
            });

            return new JsonResult { Data = dropDownValues , JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }