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)?.