Arsip

Archive for Februari, 2013

ASP.NET MVC JQGrid nuget

6 Februari 2013 98 komentar

base on My Previous Article I have a lot of change in my JqGrid, and from now JqGrid can be accessed via nuget
 
Jq.Grid Nuget
 

To install ASP.NET MVC JQGrid, run the following command in the Package Manager Console

PM> Install-Package Jq.Grid

Controller :

using Jq.Grid.Demo.Models;
using System;
using System.Linq;
using System.Web.Mvc;

namespace Jq.Grid.Demo.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            JsonExampleGridModel model = new JsonExampleGridModel();
            model.Grid.DataUrl = Url.Action("Data");
            return View(model);
        }

        [HttpPost]
        public JsonResult Data()
        {
            JsonExampleGridModel model = new JsonExampleGridModel();
            using (DataContext ctx = new DataContext())
            {
                return model.Grid.DataBind(ctx.InvoiceHeader.AsQueryable());
            }
        }
    }
}

Model:

using System;
using System.Collections.Generic;

namespace Jq.Grid.Demo.Models
{
    public class invheader
    {
        public int id { get; set; }
        public DateTime invdate { get; set; }
        public string name { get; set; }
        public double amount { get; set; }
        public double tax { get; set; }
        public double total { get; set; }
        public string note { get; set; }
    }

    public class JsonExampleGridModel : JQGridModel
    {
        public JsonExampleGridModel()
        {
            Grid = new JQGrid
            {
                ID = "JsonExample",
                Columns = new List<JQGridColumn>
                {
                    new JQGridColumn 
                    {
                        DataField = "id",
                        HeaderText = "Inv No",
                        PrimaryKey = true,
                        DataType = typeof(int),
                    },
                    new JQGridColumn 
                    {
                        DataField = "invdate",
                        HeaderText = "Date",
                        DataType = typeof(DateTime)
                    },
                    new JQGridColumn 
                    {
                        DataField = "name",
                        HeaderText = "Client",
                        DataType = typeof(string)
                    },
                    new JQGridColumn 
                    {
                        DataField = "amount",
                        HeaderText = "Amount",
                        DataType = typeof(double)
                    },
                    new JQGridColumn 
                    {
                        DataField = "tax",
                        HeaderText = "Tax",
                        DataType = typeof(double)
                    },
                    new JQGridColumn 
                    {
                        DataField = "total",
                        HeaderText = "Total",
                        DataType = typeof(double)
                    },
                    new JQGridColumn 
                    {
                        DataField = "note",
                        HeaderText = "Notes",
                        DataType = typeof(string)
                    }
                }
            };
        }
    }
}

View :

@model Jq.Grid.Demo.Models.JsonExampleGridModel
@{
    ViewBag.Title = "Index";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>JSON Example</title>

    <!-- The jQuery UI theme that will be used by the grid -->
    @Styles.Render("~/Content/themes/base/css")

    <!-- The jQuery UI theme extension jqGrid needs -->
    <link href="/Content/ui.jqgrid.css" rel="stylesheet" />
</head>
<body>

    <!-- The Partial HTML Grid Table -->
    @Html.Grid().JQGridPartial(Model.Grid)

    <!-- JavaScript at the bottom for fast page loading -->
    @Scripts.Render("~/bundles/jquery")
    <!-- The localization file we need, English in this case -->
    <script src="/Scripts/i18n/grid.locale-en.js"></script>
    <!-- The jqGrid client-side javascript -->
    <script src="/Scripts/jquery.jqGrid.src.js"></script>
    <!-- The Grid Script client-side javascript -->
    @Html.Grid().JQGridScript(Model.Grid)
</body>
</html>

The full sample code can be accessed via github
Jq.Grid

Kategori:.NET Framework