sábado, 8 de agosto de 2015

MVC Grid jquery





TablaJs es una librería lista para usar por los desarrolladores, enteramente realizadas con jQuery y JSON.   Ofrece diversas funcionalidades básicas, como buscar mientras se escribe, ordenar, entre otras.  También soporta múltiples tipos de datos (string, decimal, int, bool)

Descargar Ejemplo Completo

El ejemplo es muy sencillo, debes tener terminado.

http://www.cjorellana.net/2014/06/mvc-5-modelos.html

1.) Deben de agregar la libreria de tabla3.js a su carpeta Script, puede bajarlo de este sitio.

Descargar Tabla.js





2.) En el Controlador debemos de cambiar índex para que solo retorne la vista y agregar un método que devuelva el json.

        public ActionResult Index() 
        { 
            return View();
        }


        [HttpPost] 
        [ValidateAntiForgeryToken] 
        public JsonResult ObtenerProductos() 
        { 

            var query = from p in db.Products 
                        select new 
                        { 
                            p.ProductID, 
                            p.ProductName, 
                            p.UnitPrice,  
                            p.Discontinued 
                        }; 

            return Json(query.ToList(), JsonRequestBehavior.AllowGet);
        }


3.) Debemos de cambiar la vista  index.

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

@Html.AntiForgeryToken()

<div class="row">
    <div class="col-sm-12">

        <div class="panel panel-info">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-sm-8 col-md-9">
                        <strong>Listado De Productos</strong>
                    </div>
                    <div class="col-sm-4 col-md-3">
                        <div data-tabla="dttabla">
                            <input type="text" class="form-control search-query input-sm" placeholder="Buscar" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-hover table-condensed" data-orden="true" data-filtro="true" data-fuente="dtLlenar"
                       id="dttabla" data-seleccion="true">
                    <thead>
                        <tr>
                            <th data-tipo="foto" data-campo="FOTO" data-alineacion="centro"></th>
                            <th data-tipo="int" data-campo="ProductID"
                                data-alineacion="izquierda" style="width:30px">ID</th>
                            <th data-tipo="string" data-campo="ProductName"
                                data-alineacion="izquierda">Nombre</th>

                            <th data-tipo="decimal" data-campo="UnitPrice"
                                data-formato="#,###.00"
                                data-alineacion="izquierda">Precio</th>

                            <th data-tipo="bool" data-campo="Discontinued"
                                data-alineacion="izquierda">Descontinuado</th>

                            <th data-boton="ver" data-alineacion="centro"></th>
                            <th data-boton="editar" data-alineacion="centro"></th>
                            <th data-boton="borrar" data-alineacion="centro"></th>

                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
        <nav class="text-center">
            <ul class="pagination pagination-sm" data-tabla="dttabla" data-cantidad="10" data-grupo="8"></ul>
        </nav>
       

    </div>
</div>




@section Scripts {
    <script type="text/javascript" src="@Url.Content("/Scripts/tabla.js")"></script>

    <script type="text/javascript">


        $(document).ready(function () {
            $("#dttabla").tabla('@Url.Action("ObtenerProductos", "Products")', null);
        });

        //ver
        $(document).on('click', 'i[title=Ver]', function () {
            var codigo = $(this).parent().parent().children("td:eq(0)").text();
            window.location = '/Productos/details/' + codigo;
        });

        $(document).on('click', 'i[title=Editar]', function () {
            var codigo = $(this).parent().parent().children("td:eq(0)").text();
            window.location = '/Productos/edit/' + codigo;
        });

        //borrar
        $(document).on('click', 'i[title=Eliminar]', function () {
            var codigo = $(this).parent().parent().children("td:eq(0)").text();
            window.location = '/Productos/delete/' + codigo;
        });

    </script>
}
3.) Vamos hacer otro ejemplo para manejar tipos de datos fecha, vamos a crear un metodo que regrese json.





        [HttpPost]
        [ValidateAntiForgeryToken]
        public JsonResult ObtenerOrdenes()
        {

            var query = from  o in db.Orders
                        select new
                        {
                            id=o.CustomerID,
                            Empleado=o.Employees.FirstName + " " + o.Employees.LastName,
                            Cliente=o.Customers.CompanyName,
                            fecha=o.OrderDate,
                            fecha_envio=o.ShippedDate
                        };

            return Json(query.ToList(), JsonRequestBehavior.AllowGet);
        }

4.) Ahora en otra vista.

<h2>orden</h2>

@Html.AntiForgeryToken()

<div class="row">
    <div class="col-sm-12">

        <div class="panel panel-info">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-sm-8 col-md-9">
                        <strong>Listado De Ordenes</strong>
                    </div>
                    <div class="col-sm-4 col-md-3">
                        <div data-tabla="dttabla">
                            <input type="text" class="form-control search-query input-sm" placeholder="Buscar" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-hover table-condensed" data-orden="true" data-filtro="true" data-fuente="dtLlenar"
                       id="dttabla" data-seleccion="true">
                    <thead>
                        <tr>
                    
                            <th data-tipo="string" data-campo="id"
                                data-alineacion="izquierda" style="width:30px">ID</th>

                            <th data-tipo="string" data-campo="Empleado"
                                data-alineacion="izquierda">Empleado</th>

                            <th data-tipo="string" data-campo="Cliente"
                                data-alineacion="izquierda">Cliente</th>

                            <th data-tipo="datetime" data-campo="fecha" data-formato="dd/MM/yyyy" 
                                data-alineacion="centro">Fecha</th>



                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
        <nav class="text-center">
            <ul class="pagination pagination-sm" data-tabla="dttabla" data-cantidad="10" data-grupo="8"></ul>
        </nav>


    </div>
</div>




@section Scripts {
    <script type="text/javascript" src="@Url.Content("/Scripts/tabla.js")"></script>

    <script type="text/javascript">

        $(document).ready(function () {
            $("#dttabla").tabla('@Url.Action("ObtenerOrdenes", "Products")', null);
        });      

    </script>
}

No hay comentarios.: