Form.cshtml

@model ADSProjectLab.Models.Grupo

@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Grupo</h2>


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <input type="hidden" id="_operacion" value="@ViewData["Operacion"]" />
    <input type="hidden" id="_redirectURL" value='@Url.Action("Index", "Grupos")' />
    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)

        <div class="form-group">
            @Html.LabelFor(model => model.IdCarrera, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.IdCarrera, new SelectList(ViewBag.Carreras, "Id", "Nombre"), "[Seleccione una opción]", htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.IdCarrera, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.IdMateria, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.IdMateria, new SelectList(ViewBag.Materias, "Id", "Nombre"), "[Seleccione una opción]", htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.IdMateria, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.IdProfesor, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.IdProfesor, new SelectList(ViewBag.Profesores, "Id", "Nombres"), "[Seleccione una opción]", htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.IdProfesor, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Ciclo, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Ciclo, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Ciclo, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Anio, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Anio, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Anio, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Guardar" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Regresar", "Index", new { }, new { @class = "btn btn-default btn-sm" })
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script>

        $(document).ready(function () {
            // Cuando la operación es Ver, entonces se deben desabilitar los controles del formulario.
            if ($("#_operacion").val() == "Ver") {
                $("form").find("input, select").attr("disabled", true);
            }
            //Agregamos a los formularios la clase form-ajax
            //La cual activa el formulario para trabajar con Ajax
            $("form").addClass("form-ajax");
            //Activamos Ajax
            initAjaxForm();

            $("#IdCarrera").change(cargarMaterias);

            $("#IdCarrera").trigger("change");
        });

        function cargarMaterias() {
            cargarDataCombobox('@Url.Action("CargarMaterias", "Grupos")?IdCarrera=' + $("#IdCarrera").val(), $("#IdMateria"));
        }

        function cargarDataCombobox(URL, cmb) {
            $.ajax({
                url: URL,
                headers: {
                    'Accept': "application/json; charset=utf-8"
                },
                beforeSend: function () {
                    console.log("Iniciando petición...");
                },
                success: function (data) {
                    var valorSeleccionado = $("#IdMateria").val();
                    cmb.html("<option value=''>[Seleccione una opción]</option>");
                    $.each(data, function (index, item) {
                        if (valorSeleccionado == item.Id) {
                            cmb.append(`<option selected value=${item.Id}>${item.Nombre}</option>`);
                        } else {
                            cmb.append(`<option value=${item.Id}>${item.Nombre}</option>`);
                        }
                    });
                },
                error: function (xhr, textStatus, errorThrown) {
                    console.log("Ocurrió un error en la petición.");
                },
                complete: function () {
                    console.log("Petición completada.");
                },
                type: "GET",
                contentType: false,
                processData: false,
                async: true,
                cache: false
            });
        }

    </script>
}