0

Necesito pasar el valor seleccionado de un DropDownList cargado por medio de un SelectList a una ventana modal, para eso estoy utilizando esta linea.

    @Html.LabelFor(model => model.CompañiaId, htmlAttributes: new { @class = "control-label col-sm-1" })
    <div class="col-sm-4">
        @Html.DropDownListFor(x => x.CompañiaId, Model.CompañiasViewModels, new { @class = "form-control", @id = "dropDownList" })
        @Html.ValidationMessageFor(model => model.CompañiasViewModels, "", new { @class = "label label-danger" })
    </div>
    <div>
        <a class="btn btn-warning disabled" data-modal="" data-target="#myModal" data-to data-toggle="modal" href='@Url.Action("CreatePopUp", "Usuario", new {id = 5})' id="btnCreateUser" "><span class="glyphicon glyphicon-plus"></span></a>
    </div>

</div>

Como verán el valor del Id esta hardcodeado y necesito que sea dinámico, este es el action del controller donde necesito que llegue el id seleccionado.

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

Para mostrar las ventanas modales utilizo el siguiente javascript:

$(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;
    });
}

Esta funcion es utilizada por otros botones por lo cual tomar el valor directamente aqui no me serviria,

¿Como puedo enviar el valor del DropDownlist desde esta linea?

 <a class="btn btn-warning disabled" data-modal="" data-target="#myModal" data-to data-toggle="modal" href='@Url.Action("CreatePopUp", "Usuario", new {id = 5})' id="btnCreateUser" title="Nuevo Usuario de Compañía "><span class="glyphicon glyphicon-plus"></span></a>

2 respuestas 2

1

Recuerda que para que model binding funcione debes hacer coincidir el name del control html con el parametro del action.

Hay varias formas de lograrlo, podrias enviar el valor puntualmente desde javascrit usando

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

});

Veras que no defino ningun id en el Html.DropDownListFor y tomo el valor desde el submit en jquery para enviarlo puntualmente como parametro.

Esa es una forma, ahora si quieres serializar el form podrias simplemente definir un name en el DropDownList que coincide con el parametro

@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);
}

como veras en el dropdownlist defini el atributo name y lo hago coincidir con el nombre del parametro, asi al serializar el madel binding hara mapear los valores.

0

Lo primero que me sugieres no me vendría bien ya que necesito tener el Id del DropDownList para referirme a el en otro script el cual carga una tabla dependiendo de la sección de este.

Probé definiendo un Name = "id" y definí el mismo nombre en el controller pero sigo recibiendo errores:

El diccionario de parámetros contiene una entrada NULL para el parámetro 'id' del tipo que no acepta valores NULL 'System.Int32' del método 'System.Web.Mvc.ActionResult CreatePopUp(Int32)' en 'CntrlLine.WebUi.Controllers.UsuarioController'. Un parámetro opcional debe ser un tipo de referencia, un tipo que acepte valores NULL o debe declararse como parámetro opcional. Nombre del parámetro: 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;
});
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.