0

a ver si me pueden dar una ayuda, tengo una vista que muestra dos combos, uno tiene el State y otro Province, una provincia pertenece a un estado y un estado puede tener muchas provincias por lo que necesito que cuando se seleccione un estado me actualice en tiempo real el combo de provincias.

tengo dos helpers hechos donde uno carga una lista con los estados y otro carga una lista con las provincias según un ID, el problema es que no se como hacer que esto suceda en tiempo real sin tener que evaluarlo cuando se haga el submit.

Me podrán ayudar ?? les dejo el código del controlador, el helper y la vista

HELPERS

public IEnumerable<SelectListItem> GetComboProvincesByStateId(int Id)
    {
        var list = _context.Provinces.Where( p => p.State.Id == Id).Select(dt => new SelectListItem
        {
            Text = dt.Name,
            Value = $"{dt.Id}"
        }).ToList();

        list.Insert(0, new SelectListItem
        {
            Text = "[Select a document type...]",
            Value = "0"
        });

        return list;
    }

    public IEnumerable<SelectListItem> GetComboStates()
    {
        var list = _context.States.Select(dt => new SelectListItem
        {
            Text = dt.Name,
            Value = $"{dt.Id}"
        }).ToList();

        list.Insert(0, new SelectListItem
        {
            Text = "[Select a document type...]",
            Value = "0"
        });

        return list;
    }

View Model Employee

public class EmployeeViewModel
{
    public int EmployeeId { get; set; }
    [Display(Name = "Email")]
    [Required(ErrorMessage = "The field {0} is mandatory.")]
    [MaxLength(100, ErrorMessage = "The {0} field can not have more than {1} characters.")]
    [EmailAddress]
    public string Username { get; set; }

    [Display(Name = "Document")]
    [MaxLength(20, ErrorMessage = "The {0} field can not have more than {1} characters.")]
    [Required(ErrorMessage = "The field {0} is mandatory.")]
    public string Document { get; set; }

    [Required(ErrorMessage = "The field {0} is mandatory.")]
    [Display(Name = "Document Type")]
    [Range(1, int.MaxValue, ErrorMessage = "You must select a Document Type.")]
    public int DocumentTypeId { get; set; }

    public IEnumerable<SelectListItem> DocumentTypes { get; set; }

    [Required(ErrorMessage = "The field {0} is mandatory.")]
    [Display(Name = "State")]
    [Range(1, int.MaxValue, ErrorMessage = "You must select a State.")]
    public int StateId { get; set; }

    public IEnumerable<SelectListItem> States { get; set; }

    [Required(ErrorMessage = "The field {0} is mandatory.")]
    [Display(Name = "Province")]
    [Range(1, int.MaxValue, ErrorMessage = "You must select a Province.")]
    public int ProvinceId { get; set; }

    public IEnumerable<SelectListItem> Provinces { get; set; }

    [Display(Name = "First Name")]
    [MaxLength(50, ErrorMessage = "The {0} field can not have more than {1} characters.")]
    [Required(ErrorMessage = "The field {0} is mandatory.")]
    public string FirstName { get; set; }

    [Display(Name = "Last Name")]
    [MaxLength(50, ErrorMessage = "The {0} field can not have more than {1} characters.")]
    [Required(ErrorMessage = "The field {0} is mandatory.")]
    public string LastName { get; set; }

    [MaxLength(100, ErrorMessage = "The {0} field can not have more than {1} characters.")]
    public string Address { get; set; }

    [Display(Name = "Phone Number")]
    [MaxLength(50, ErrorMessage = "The {0} field can not have more than {1} characters.")]
    public string PhoneNumber { get; set; }

    [Display(Name = "Password")]
    [Required(ErrorMessage = "The field {0} is mandatory.")]
    [DataType(DataType.Password)]
    [StringLength(20, MinimumLength = 6, ErrorMessage = "The {0} field must contain between {2} and {1} characters.")]
    public string Password { get; set; }

    [Display(Name = "Password Confirm")]
    [Required(ErrorMessage = "The field {0} is mandatory.")]
    [DataType(DataType.Password)]
    [StringLength(20, MinimumLength = 6, ErrorMessage = "The {0} field must contain between {2} and {1} characters.")]
    [Compare("Password")]
    public string PasswordConfirm { get; set; }
}

VIEW

@model MyStyle.Web.Models.EmployeeViewModel

@{
    ViewData["Title"] = "Create";
}

<h2>Create</h2>

<h4>Client</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Username" class=""></label>
                <input asp-for="Username" class="form-control" />
                <span asp-validation-for="Username" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Document" class=""></label>
                <input asp-for="Document" class="form-control" />
                <span asp-validation-for="Document" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="DocumentTypeId" class="control-label"></label>
                <select asp-for="DocumentTypeId" asp-items="Model.DocumentTypes" class="form-control"></select>
                <span asp-validation-for="DocumentTypeId" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="FirstName" class=""></label>
                <input asp-for="FirstName" class="form-control" />
                <span asp-validation-for="FirstName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="LastName" class=""></label>
                <input asp-for="LastName" class="form-control" />
                <span asp-validation-for="LastName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Address" class=""></label>
                <input asp-for="Address" class="form-control" />
                <span asp-validation-for="Address" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="StateId" class="control-label"></label>
                <select asp-for="StateId" asp-items="Model.States" class="form-control"></select>
                <span asp-validation-for="StateId" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="ProvinceId" class="control-label"></label>
                <select asp-for="ProvinceId" asp-items="Model.Provinces" class="form-control"></select>
                <span asp-validation-for="ProvinceId" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="PhoneNumber" class=""></label>
                <input asp-for="PhoneNumber" class="form-control" />
                <span asp-validation-for="PhoneNumber" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Password" class=""></label>
                <input asp-for="Password" class="form-control" />
                <span asp-validation-for="Password" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="PasswordConfirm" class=""></label>
                <input asp-for="PasswordConfirm" class="form-control" />
                <span asp-validation-for="PasswordConfirm" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index" class="btn btn-success" >Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

2

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.