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

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.