Pass selected value from DropDownList to modal window asp mvc

Remember that for model binding to work, you must match the name of the html control with the action parameter.

There are several ways to achieve this, you could send the value from javascrit on time using

@Html.DropDownListFor(x => x.CompañiaId, Model.CompañiasViewModels, new { @class = "form-control"})

$('form', dialog).submit(function () {

    var params={
        Id : $("#CompañiaId").val()
    };

    $.ajax({
        url: this.action,
        type: this.method,
        data: params,
        success: function (result) {
            if (result.success) {
                $('#myModal').modal('hide');
                $('#replacetarget').load(result.url);
            } else {
                $('#myModalContent').html(result);
                bindForm(dialog);
            }
        }
    });

    return false;

});

You will see that I do not define any id in the Html.DropDownListFor and I take the value from the submit in jquery to send it punctually as a parameter.

That's one way, now if you want to serialize the form you could simply define a name in the DropDownList that matches the parameter

@Html.DropDownListFor(x => x.CompañiaId, Model.CompañiasViewModels, new { @class = "form-control", Name = "companiaId" })

[HttpGet]
public ActionResult CreatePopUp(int companiaId)
{
   UsuarioViewModel usuarioViewModel = new UsuarioViewModel();
   usuarioViewModel.RolesViewModels = GetRoles();
   usuarioViewModel.CompañiaId = Convert.ToInt32(id);
   return View("CreatePopUp", usuarioViewModel);
}

As you will see in the dropdownlist I defined the attribute name and I match it with the name of the parameter, so when serializing the binding, it will map the values.

The first thing you suggest is not right for me since I need to have the Id from DropDownList to refer to it in another script which load a table depending on the section of this.

I tried defining a Name="id" and defined the same name in the controller but I keep getting errors:

The parameter dictionary contains a NULL entry for the 'id' parameter of the type that does not accept NULL values' System.Int32 'from the' System.Web.Mvc.ActionResult CreatePopUp (Int32) 'method in' CntrlLine.WebUi. Controllers.UsuarioController '. An optional parameter must be a reference type, a type that accepts NULL values or must be declared as an optional parameter. Parameter name: parameters

@Html.DropDownListFor(x => x.CompañiaId, Model.CompañiasViewModels, new { @class = "form-control", @id = "dropDownList", @Name = "id" })

Controller:

        public ActionResult CreatePopUp(int id)
    {

        UsuarioViewModel usuarioViewModel = new UsuarioViewModel();
        usuarioViewModel.RolesViewModels = GetRoles();
        usuarioViewModel.CompañiaId = Convert.ToInt32(id);
        return View("CreatePopUp", usuarioViewModel);
    }

Script:

$(function () {
$.ajaxSetup({ cache: false });
$("a[data-modal]").on("click", function (e) {

    $('#myModalContent').load(this.href, function () {
        $('#myModal').modal({
            /*backdrop: 'static',*/
            keyboard: true
        }, 'show');
        bindForm(this);
    });
    return false;
});
});

function bindForm(dialog) {
$('form', dialog).submit(function () {
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function (result) {
            if (result.success) {
                $('#myModal').modal('hide');
                $('#replacetarget').load(result.url);
            } else {
                $('#myModalContent').html(result);
                bindForm(dialog);
            }
        }
    });
    return false;
});
}