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


En el apartado anterior se ha escrito sobre como crear nuestro webApi con MVC, como realizar las vistas y las conexiones con nuestro JavaScript si no has leído el apartado anterior te recomiendo que lo hagas desde  aquí.

En este apartado, comenzaremos creando una carpeta dentro de Views llamada Student que contendrá todas nuestras vistas. Para este ejercicio crearemos las siguientes vista Index.chtml que nos permitirá construir nuestro visualización.

Ahora bien, crearemos el controller para ordenar la visualización de ese index, nuestro controller se llamará StudentController.cs dando click con el boton derecho en la carpeta Controller>Add>Controller que nos mostrará una pantalla como la siguiente:

En dicha pantalla seleccionaremos un controller vacío, luego daremos click en el botón Add, para finalmente ponerle nombre en el siguiente cuadro de dialogo que nos mostrará:

Dentro del controller escribiremos lo siguiente:

public ActionResult Index()
{
string SourceView = "Index";
SourceView = this.Request.Params["Source"] != null ? this.Request.Params["Source"] : SourceView;
return View(SourceView);
}

¿Por que hacemos esto?

La respuesta es simple, me he encontrado que cuando manejas profundidad de controllers algunos scripts no funcionan bien, por lo tanto para mi tranquilidad, envío la pagina por método GET para que cargue el controller deseado.

Después de esto podemos ver que ya nos muestra la información de nuestro index, ahora lo siguiente que haremos será crear los componentes html dentro de nuestra vista: para esto se utilizará html simple que viene dentro de nuestro template de bootstrap, una vez en nuestra carpeta de bootstrap daremos click sobre el forms.html que trae el contenido que nos interesa, muy similar al siguiente:

Lo que nos interesa realmente son las clases con las que construyeron estos elementos así que abriremos este mismo archivo en notepad y analizaremos los valores principales en este caso solo necesitamos los controles textbox y select, y la configuración del encabezado.

Encabezado:

<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Forms
</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> Forms
</li>
</ol>
</div>
</div>

TextBox y Select:

<div class="row">
<div class="col-lg-6">
<form role="form">
<div class="form-group">
<label>Text Input with Placeholder</label>
<input class="form-control" placeholder="Enter text">
</div>
<div class="form-group">
<label>Selects</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>

Vamos a agregar este código a nuestro Index,cshtml para poder visualizarlo:

Ahora lo modificaremos un poco para que quede de acorde a lo que necesitamos, que en este caso debería ser similar a nuestra clase Student y lo formateraremos un poco para que quede del siguiente modo:

@{
    ViewBag.Title = "Index";
}
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
            Agregar 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> Agregar Estudiantes
            </li>
        </ol>
    </div>
</div>
<div class="row">
<form role="form">
<div class="col-lg-6">
<div class="form-group">
                <label>Nombre</label>
                <input class="form-control" placeholder="Escriba su Nombre">
            </div>
<div class="form-group">
                <label>Apellido Materno</label>
                <input class="form-control" placeholder="Escriba el Apellido">
            </div>
<div class="form-group">
                <label>Seleccione el Semestre</label>
                <select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
                </select>
            </div>
        </div>
<div class="col-lg-6">
<div class="form-group">
                <label>Apellido Paterno</label>
                <input class="form-control" placeholder="Escriba el Apellido">
            </div>
<div class="form-group">
                <label>CURP</label>
                <input class="form-control" placeholder="Escriba el CURP">
            </div>
        </div>
    </form>
</div>
<div class="form-group input-group">
    <button id="button" class="btn btn-default">Registrar</button>
</div>

Y se vería así:

Nice ¿No? pues vamos a conectar esto con un javascript que utilizaremos para conectar con nuestro WebApi que ya se encuentra generado en nuestro StudentController.cs que se encuentra en la carpeta service, dicho JavaScript es un pequeño archivo que nos permitirá accessar a los metodos GET,POST,PUT, etc, los cuales han sido creado en el controller, en mi propio modo de desarrollo creo las funciones a como las necesito, en este caso solo necesitamos 3, así que en la carpeta js crearemos una carpeta llamada DataList, en la cual crearemos un archivo Studen.js que contendrá la siguiente información:

function getStudents() {
    var lst = [];
    $.ajax({
        type: "GET",
        url: "service/Student/",
        contentType: 'application/json',
        dataType: 'json',
        async: false,
        success: function (responseData, textStatus, jqXHR) {
            if (responseData.Rows.length > 0) {
                lst = responseData.Rows;
            }
        },
        error: function (responseData, textStatus, errorThrown) {
        }
    });
    return lst;
}

function Add(request) {
    var response = {};
    $.ajax({
        type: "POST",
        url: 'service/Student/',
        contentType: 'application/json',
        dataType: 'json',
        async: false,
        data: JSON.stringify(request),
        success: function (responseData, textStatus, jqXHR) {
            if (responseData.success) {
                var additionalData = JSON.parse(responseData.AdditionalData);
                MessageModal("Aceptado", "Alumno Agregado.");
            }
            else {
                MessageModal("Información", responseData.Description);
                throw responseData.Description;
            }
        },
        error: function (responseData, textStatus, errorThrown) {
            MessageModal("Error", "Error interno");
            throw "Error interno";
        }
    });
    return response;
}

function Update(request) {
    var response = {};
    $.ajax({
        type: "PUT",
        url: 'service/Student/',
        contentType: 'application/json',
        dataType: 'json',
        async: false,
        data: JSON.stringify(request),
        success: function (responseData, textStatus, jqXHR) {
            if (responseData.success) {
                MessageModal("Aceptado", "Alumno Actualizado.");
            }
            else {
                MessageModal("Información", responseData.Description);
                throw responseData.Description;
            }
        },
        error: function (responseData, textStatus, errorThrown) {
            MessageModal("Error", "Error interno");
            throw "Error interno";
        }
    });
    return response;
}

Una vez  agregado este script lo incluiremos en nuestro Index.chtml dado que es un script creado para esa vista sera agregado mediante el comando @Url.Content del siguiente modo:


<script src="@Url.Content("~/js/DataList/Student.js")"></script>

Ahora bien iremos al final del archivo y abriremos las etiquetas correspondientes a la funcionalidad de la pagina con el siguiente código:


<script>
$("#button").on("click", function () {
var Name = $("#Name").val();
var Paternal = $("#Paternal").val();
var Maternal = $("#Maternal").val();
var CURP = $("#CURP").val();
var Semestre = $("#Semestre").val();

if (Name == undefined || Name == "") {
alert("El nombre es obligatorio");
}
else if (Paternal == undefined || Paternal == "") {
alert("El apellido paterno es obligatorio");
}
else if (Maternal == undefined || Maternal == "") {
alert("El apellido Materno es obligatorio");
}
else if (CURP == undefined || CURP == "") {
alert("El CURP es obligatorio");
}
else {
var request = {};
request.Name = Name;
request.Paternal = Paternal;
request.Maternal = Maternal;
request.CURP = CURP;
request.Semestre = Semestre;

response = Add(request);
}
});
</script>

Con el código ya enlazado podemos ver que el orden del desarrollo se vuelve rapido y mejoramos el entendimiento de nuestra aplicacción, con esto terminamos el apartado 3, en el apartado siguiente veremos como crear grids (Tablas) en tiempo real, y como hacerlos editables gracias a la siguientes herramientas mostradas aquí.

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 07/04/2017 en .Net, JavaScript, JQuery, JSON y etiquetado en , , , , . Guarda el enlace permanente. 2 comentarios.

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: