Aplicación web móvil con jQuery Mobile y ASP.NET MVC 2 – parte 3

En esta tercera parte continuamos implementando lo que hace falta del controlador mClientesController que es la acción Nuevo que nos permita dar de alta nuevos Clientes.

Entonces, agreguemos la nueva ActionResult llamada Nuevo en su respuesta GET y POST:

public ActionResult Nuevo()
{
    //La vista para registrar un nuevo cliente solo necesita la lista de estados
    //los combos municipio y localidad aparecerán vacíos y se complementán
    //a partir del estado seleccionado
    ViewData["Estados"] = Listas.Estados();
    return View();
}

[HttpPost]
public ActionResult Nuevo(Cliente cliente)
{
    //Antes de guardar los datos, comprobar que el Nuevo objeto haya sido
    //validado
    if (ModelState.IsValid)
    {
        BD.AddToCliente(cliente);
        BD.SaveChanges();
        //Regresar al usuario a la vista que le muestra los datos del nuevo cliente.
        return Redirect("../../m/mclientes/vercliente/" + cliente.IdCliente);
    }
    else
    {
        //En el caso de algún error (algún dato no fue ingresado y pasó hasta aquí 
        //por alguna circunstancia), devolver el formulario al usuario con los datos que
        //ya había ingresado
        //Si ya había seleccionado estado, municipio y localidad, debemos
        //cargar las listas para mostrar los combos
        if (cliente.IdLocalidad != 0)
            cliente.Localidad = BD.Localidad.Where(l => l.IdLocalidad == cliente.IdLocalidad).FirstOrDefault();
        ViewData["Estados"] = Listas.Estados();
        if (cliente.Localidad != null)
        {
            ViewData["Municipios"] = Listas.MunicipiosEstado((int)cliente.Localidad.Municipio.IdEstado);
            ViewData["Localidades"] = Listas.LocalidadesMunicipio((int)cliente.Localidad.IdMunicipio);
        }
        //Devolver la vista con los datos ya ingresados.
        return View(cliente);
    }
}
La vista Nuevo presenta la misma estructura que la vista Editar, utiliza la plantilla Cliente.ascx y utiliza los mismos scripts y css.
Crear la vista Nuevo tipada para Cliente con contenido Create.
Img. 1. Agregar vista Nuevo (Cliente).
Entonces creemos la estructura similar a Editar, la vista Nuevo queda como:
<%@ Page Title="" Language="C#" MasterPageFile="~/Areas/m/Views/Shared/Movil.Master" 
    Inherits="System.Web.Mvc.ViewPage<Agencia2012.Models.Cliente>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Registrar
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script src="../../../Areas/m/Content/scripts/clientevars.js" type="text/javascript"></script>
    <link href="../../../Areas/m/Content/css/estilos.css" rel="stylesheet" type="text/css" />
<!-- Inicio de la página -->
<div data-role="page" data-theme="b" id="nuevocliente">
<div data-role="header" id="hdrMain" data-theme="b" name="hdrMain" data-nobackbtn="true">
<a href="/m/mclientes" data-icon="arrow-l">Clientes</a>
           <h1>Registrar</h1>
        <a href="/m/mclientes/nuevo" data-icon="plus" rel="external">Agregar</a>
</div>
<div data-role="content" id="contentMain" name="contentMain">
        <form id="datoscliente" action="" method="post">
        <!-- Invocar al EditorTemplate Cliente.ascx que es nuestra plantilla -->
         <%: Html.EditorFor(model => Model) %>
            <p>
                <button type="submit" data-theme="b" data-inline="true">Agregar</button> 
                <a data-rel="back" data-role="button" data-theme="d" data-inline="true">Cancelar</a>
            </p>
   </form>
</div><!-- Fin del contenído de la página -->
<div data-role="footer" data-theme="a">
                <h4><a href="http://www.afelipelc.mx" rel="external">www.afelipelc.mx</a></h4>
     </div>
<!-- Contenedor que utilizaremos como cuadro de diálogo al momento de validar -->
  <div align="center" data-role="content" id="contentDialog" name="contentDialog">
<div>Llene todos los campos marcados con * antes de enviar el formulario.</div>
<a id="buttonOK" name="buttonOK" href="#editarcliente" data-role="button" data-inline="true">Aceptar</a>
</div> <!-- fin contenedor de Dialogo -->
    <!-- Enlazar a los scripts para que puedan ser ejecutados correctamente -->
    <script src="../../../Areas/m/Content/scripts/clientevalidador.js" type="text/javascript"></script>
    <script src="../../../Areas/m/Content/scripts/scriptmunicipios.js" type="text/javascript"></script>
</div> <!-- fin de toda la página jQuery M -->
</asp:Content>
Comprobemos ahora que funciona, ejecutamos la app e ingresamos a http://localhost:1877/m/mclientes/nuevo o en Clientes dando clic en Agregar.
Img. 2. Agregar nuevo Cliente.
La validación también debe funcionar correctamente.
Img. 3. Validando formulario.
Y finalmente al registrar el Cliente, nos redirecciona a ver todos sus datos registrados.
Img. 4. Cliente registrado.
Y esta es la pequeña parte para complementar la gestión de Clientes, continuaremos con la gestión de Autos que es muy similar.
Créditos: La validación de formularios fue tomada de http://mobile.tutsplus.com/tutorials/mobile-web-apps/jquery-mobile-forms/
Anuncios

Escribe tu comentario:

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