Programando con MVC y WebApi en C# (Parte 4)


En el apartado anterior hemos creado nuestras vistas en nuestro MVC y como conectarla, para agregar un registro ahora veremos como presentarla y como editarla, si no has leído el apartado anterior te recomiendo que lo hagas desde aquí.

En este apartado, agregaremos una vista secundaria a nuestra Student que se encuentra dentro de la carpeta vistas, a la cual llamaremos ListStudent.cshtml algo más o menos como lo siguiente:

Una vez creado nuestro archivo agregaremos el siguiente código:


<script src="@Url.Content("~/js/DataList/Student.js")"></script>
<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">
            Lista de Estudiantes
        </h1>
        <ol class="breadcrumb">
            <li>
                <i class="fa fa-dashboard"></i>  <a href="index.html">Dashboard</a>
            </li>
            <li class="active">
                <i class="fa fa-edit"></i>Lista de Estudiantes
            </li>
        </ol>
    </div>
</div>
<div class="row">
    <div class="table-responsive">
        <table id="lstStudent" class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>NoControl</th>
                    <th>Nombre</th>
                    <th>Apellido Paterno</th>
                    <th>Apellido Materno</th>
                    <th>CURP</th>
                    <th>Semestre</th>
                    <th>Opciones</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

Ahora bien, una vez agregado este codigo descargaremos unas librerías que nos permitirán hacer algunas monadas con poco código puedes descargarlas desde aquí.

A partir de esto crearemos en la carpeta js una carpeta llamada CustomControls en la cual pondremos todos los JavaScript que utilizaremos nuestra solución quedará como la siguiente:

Agregaremos los scripts para que sean cargados por nuestra pagina

 


<script src="@Url.Content("~/js/CustomControls/CustomControls.js")"></script>
<script src="@Url.Content("~/js/CustomControls/CustomFunctions.js")"></script>
<script src="@Url.Content("~/js/CustomControls/CustomSimpleGrid.js")"></script>

Una vez realizado esto podemos dedicarnos a escribir la parte del script que dará funcionalidad a nuestro código y quedará de la siguiente manera:


<script>
    var students = [];
    var gridList;

    function GetGrid() {
//Agregamos una lista con los semestres para el DropDown
        var semestre = [];
        semestre.push({ id: 1, name: "1" });
        semestre.push({ id: 1, name: "2" });
        semestre.push({ id: 1, name: "3" });
        semestre.push({ id: 1, name: "4" });
        semestre.push({ id: 1, name: "5" });
        semestre.push({ id: 1, name: "6" });
        semestre.push({ id: 1, name: "7" });
//Creamos un Grid con la librería, se define un Layout y los campos que queremos que se muestren además del tipo de campo a mostrar y sus botones
        gridList = $('#lstStudent').gridView({
            layout: { "NoControl": 0, "Name": "", "Paternal": "", "Maternal": "", "CURP": "", "Semestre": 0 },
            columns: [
                { Field: "NoControl", ControlType: "Label", Source: null },
                { Field: "Name", ControlType: "Label", Source: null },
                { Field: "Paternal", ControlType: "Label", Source: null },
                { Field: "Maternal", ControlType: "Label", Source: null },
                { Field: "CURP", ControlType: "Label", Source: null },
                { Field: "Semestre", ControlType: "Dropdown", Source: semestre },
                                {
                                    Field: "Opciones", ControlType: "Buttons",
                                    Buttons: {
                                        Edit: '<button type="button" class="btn btn-success btn-circle btn-edit-item"><i class="fa fa-pencil"></i></button>'
                                    }
                                }
            ]
        });
    }
//Esta funcion nos permite darle funcionalidad a los botones que tengamos en la tabla
    function TableFunction() {
        $('#lstStudent tbody').on('click', 'button', function () {
            var button = $(this);
            var item = $(this).parent().parent();
            var tbody = $(this).parent().parent().parent();
            var data = $(item).attr('data-row');
            if (typeof (data) == "string") {
                if (data != "") {
                    data = JSON.parse($(item).attr('data-row'));
                }
            }
            if (button.hasClass('btn-edit-item')) {
//Si existe la clase btn-edit-item se da por sentado que se ha terminado de editar el o los registros del item
//No debemos preocuparnos ya que la librería edita la variable de manera interna
                Update(data);
            }
        });
    }

    $(document).ready(function () {
        GetGrid();
//Se pide la lista de los estudiantes a nuestro webapi desde el javascript student.js
        students = getStudents();
//Creamos el Grid con los resultados de la lista
        gridList.gridView("Create", students);
//Agregamos funcionalidad al grid
        TableFunction();
    });
</script>

Este script manda a llamar a nuestro archivo CustomSimpleGrid.js el cual nos da las herramientas para crear un Grid, es muy simple de utilizar y además editable al nivel que decidamos, como podemos ver en las siguientes imagenes:

 

Y con esto hemos finalizado el tutorial de MVC y WebApi en .NET, espero que les haya gustado y que les sea de ayuda.

 
Descargar Ejemplo Completo
 

Anuncios

Acerca de Francisco Castán

Creador, Diseñador, Investigador y Programador de Software Lenguajes Preferidos: C/C++, C#, Java, PHP, Python, PERL, Shell, JavaScript

Publicado el 11/04/2017 en .Net, JavaScript, JQuery, JSON y etiquetado en , , , , . Guarda el enlace permanente. Deja un comentario.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: