2

Trabajo en un proyecto ASP MVC, estoy tratando de crear una entidad Material para lo cual tengo el siguiente Modelo:

public class MaterialViewModel
{
    [Display(Name = "Número de Registro")]
    public int MaterialId { get; set; }

    [Display(Name = "Descripción")]
    public string Descripcion { get; set; }

    [Display(Name = "Categoría")]
    public int CategoriaId { get; set; }

    ***public SelectList CategoriasMaterialViewModel { get; set; }***

    [Display(Name = "Unidad de medida")]
    public int UnidadMedidaId { get; set; }

    ***public SelectList UnidadesDeMedidaViewModel { get; set; }***

    public ImagenViewModel  ImagenViewModel { get; set; }
}

Este modelo lo utilizo en la siguiente vista:

@model xxxx.WebUi.Models.MaterialViewModel
@{
    ViewBag.Title = "Nuevo material";
}

<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Content/js/fileUpload.js"></script>
<link href="~/Content/css/fileUpload.css" rel="stylesheet" />

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <div class="content clearfix">
        <!-- Page Content -->
        <div id="page-wrapper">
            <div class="container-fluid">
                <div class="row">

                    <div class="panel panel-default">
                        <div class="panel-body">

                            <div class="form-horizontal">

                                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                                <div class="form-group">
                                    @Html.LabelFor(model => model.Descripcion, htmlAttributes: new { @class = "control-label col-sm-3" })
                                    <div class="col-sm-4">
                                        @Html.EditorFor(model => model.Descripcion, new { htmlAttributes = new { @class = "form-control", maxlength = "200" } })
                                        @Html.ValidationMessageFor(model => model.Descripcion, "", new { @class = "label label-danger" })
                                    </div>
                                </div>

                                <div class="form-group">
                                    @Html.LabelFor(model => model.CategoriaId, htmlAttributes: new { @class = "control-label col-sm-3" })

                                    <div class="col-sm-4">
                                        @Html.DropDownListFor(x => x.CategoriaId, ***Model.CategoriasMaterialViewModel***, "<<<Seleccione>>>", new { @class = "form-control" })
                                        @Html.ValidationMessageFor(model => model.CategoriaId, "", new { @class = "label label-danger" })
                                    </div>
                                    <div>
                                        <a class="btn btn-info" data-modal="" data-target="#myModal" data-to data-toggle="modal" href='@Url.Action("Create", "CategoriasMateriales")' id="btnCreate" title="Nueva Categoría de Material"><span class="glyphicon glyphicon-plus"></span></a>
                                    </div>
                                </div>

                                <div class="form-group">
                                    @Html.LabelFor(model => model.UnidadMedidaId, htmlAttributes: new { @class = "control-label col-sm-3" })
                                    <div class="col-sm-4">
                                        @Html.DropDownListFor(model => model.UnidadMedidaId, ***Model.UnidadesDeMedidaViewModel***, "<<<Seleccione>>>", new { @class = "form-control" })
                                        @Html.ValidationMessageFor(model => model.UnidadMedidaId, "", new { @class = "label label-danger" })
                                    </div>

                                    <div>
                                        <a class="btn btn-info" data-modal="" data-target="#myModal" data-to data-toggle="modal" href='@Url.Action("CreatePopUp", "UnidadDeMedidas")' id="btnCreateUnidadMedida" title="Nueva Unidad de Medida"><span class="glyphicon glyphicon-plus"></span></a>
                                    </div>
                                </div>

                                <div class="form-group">

                                    <div class="col-sm-offset-3 col-sm-9">
                                        <input type="submit" class="btn btn-success" value="Guardar" />
                                        <a href='@Url.Action("Index")' class="btn btn-warning" role="button">Cancelar</a>
                                    </div>
                                </div>

                            </div>

                            <div>@Html.ActionLink("Regresar a la lista", "Index")</div>
                        </div>
                        <div class="panel-footer"></div>
                    </div>


                </div> <!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>  <!-- /.container-PAGE -->

    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/Content/MyScripts")

}

<script src="~/Content/popup/xxxpopup.js"></script>

<!-- modal placeholder-->
<div id='myModal' class='modal fade in'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='myModalContent'></div>
        </div>
    </div>
</div>

Para cargar esta vista uso el siguiente controller:

private SelectList GetCategoriasMaterial()
{
    return new SelectList(_categoriasRepository.GetAll(false), "CategoriaId", "Descripcion");
}

private SelectList GetUnidadesMedida()
{
    return new SelectList(_unidadesMedidasRepository.GetAll(false), "UnidadMedidaId", "Descripcion");
}


// GET: Materiales/Create
public ActionResult Create()
{
    var materialViewModel = new MaterialViewModel();
    materialViewModel.UnidadesDeMedidaViewModel = GetUnidadesMedida();
    materialViewModel.CategoriasMaterialViewModel = GetCategoriasMaterial();

    return View(materialViewModel);
}

Con este script es que muestro y cierro el Pop-Up:

$(function () {
$.ajaxSetup({ cache: false });
$("a[data-modal]").on("click", function (e) {
    e.preventDefault();
    $('#myModalContent').load(this.href, function () {
        $('#myModal').modal({
            keyboard: true
        }, 'show');
        bindForm(this);
    });
    return false;
});
});

function bindForm(dialog) {
    $('form', dialog).submit(function () {
        $.ajax({
            url: this.action,
            type: this.method,
            contentType: this.enctype,
            data: $(this).serialize(),
            success: function (result) {

                if (result.success) {
                    $('#myModal').modal('hide');
                    $('#replacetarget').load(result.url); 
                } else {
                    $('#myModalContent').html(result);
                    bindForm(dialog);
                }
            }
        });
        return false;
    });
}

Ahora, como pueden ver en el modelo los DropDownslist se cargan a partir de los SelectList UnidadesDeMedidaViewModel y del CategoriasMaterialViewModel, en la vista tengo la opción de poder agregar una unidad de medida o una nueva categoría para poder crear el Material correspondiente, por lo cual tengo la necesidad de que después de que se agregue la unidad de medida o la categoría los DropDownList se refresquen con la nueva entidad creada y así poder continuar con el flujo.


¿Cómo lograr por medio de AJAX recargar solo el DropDown correspondiente a la entidad creada (Unidad de Medida o Categoría)?.

1 respuesta 1

1

Me hace algo semajante asi, para un Proyecto llamado "Platypus", donde el contenido del DropDownList (html select) es "Units"

A Model like so (in \Models\HomeModel.cs):

public class HomeModel
{
    public DataTable Units { get; set; }
    . . .
}

A Controller like so (in \Controllers\HomeController.cs):

public class HomeController : Controller
{
    public ActionResult Index()
    {
        HomeModel model = new HomeModel();

        DataTable unitsDT = SQL.ExecuteSQLReturnDataTable(SQL.SelectUnitsQuery, CommandType.Text, null);
        model.Units = unitsDT;
        . . .

A View like this (in \Views\Home\Index.cshtml):

@model Platypus.Models.HomeModel
@using System.Data
@{
    DataTable dtUnits = Model.Units;
    var units = from x in dtUnits.AsEnumerable()
                select new
                {
                    unit = x.Field<string>("unit")
                };

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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