在MVC3中单击按钮时加载jqgrid

时间:2012-01-19 01:14:10

标签: c# jquery asp.net asp.net-mvc-3

我想在MVC 3中点击按钮加载jqGrid,但我无法做到。数据很好,但页面上没有任何结果。当我点击时,它会显示网格加载,但之后没有任何反应。请参阅以下内容:

我的观点

@{
    ViewBag.Title = "Home";    
}
@section Javascript
{
    <script type="text/javascript">
        var jqDataUrl = "LoadCustomerData";
        $(document).ready
        (
            function () {
                $('#btnContinue').live('click', function () {
                        bindCustomers();
                });
            }
        );

        var bindCustomers = function () {
            alert('in');
            // Set up the jquery grid
            $("#jqTable").jqGrid
                (
                    {
                        // Ajax related configurations
                        url: jqDataUrl,
                        datatype: "json",
                        mtype: "POST",

                        // Specify the column names
                        colNames: ["CustomerId", "FirstName", "LastName"],

                        // Configure the columns
                        colModel: [
                                { name: "CustomerId", index: "CustomerId", width: 40, align: "left" },
                                { name: "FirstName", index: "FirstName", width: 100, align: "left" },
                                { name: "LastName", index: "LastName", width: 200, align: "left"}],

                        // Grid total width and height
                        width: 550,
                        height: 200,

                        // Paging
                        toppager: true,
                        pager: $("#jqTablePager"),
                        rowNum: 5,
                        rowList: [5, 10, 20],
                        viewrecords: true, // Specify if "total number of records" is displayed

                        // Default sorting
                        //sortname: "Id",
                        //sortorder: "asc",

                        // Grid caption
                        caption: "A Basic jqGrid - Read Only"
                    }
                ).navGrid("#jqTablePager",
                    { refresh: true, add: false, edit: false, del: false },
                        {}, // settings for edit
                        {}, // settings for add
                        {}, // settings for delete
                        {sopt: ["cn"]} // Search options. Some options can be set on column level
                );
            alert('loading finish');
        }
    </script>
}
<p>
    @using (Html.BeginForm("Home", "Home"))
    {
        <div style="text-align: center; width: 350px; height: 200px; margin: 0 auto;">
            <table style="margin-left: auto; margin-right: auto;">
                <tr>
                    <td style="padding-right: 5px; text-align: right;">@Html.Label("lblCustomerID", "Customer ID")
                    </td>
                    <td>@Html.TextBoxFor(m => m.Customer.CustomerID, new { @style = "width: 100px" })
                    </td>
                </tr>
                <tr>
                    <td style="padding-right: 5px; text-align: right;">@Html.Label("lblUserID", "User ID")
                    </td>
                    <td>@Html.TextBoxFor(m => m.Customer.UserID, new { @style = "width: 100px" })
                    </td>
                </tr>
                <tr>
                    <td style="padding-right: 5px; text-align: right;">@Html.Label("lblPIC", "PIC")
                    </td>
                    <td>
                        @Html.TextBoxFor(m => m.Customer.PIC, new { @style = "width: 100px" })
                    </td>
                </tr>
                <tr>
                    <td style="padding-right: 5px; text-align: right;">@Html.Label("lblLastName", "Last Name")
                    </td>
                    <td>@Html.TextBoxFor(m => m.Customer.LastName, new { @style = "width: 100px" })
                    </td>
                </tr>
                <tr>
                    <td style="padding-right: 5px; text-align: right;">@Html.Label("lblInvoiceNo", "Invoice No")
                    </td>
                    <td>
                        @Html.TextBoxFor(m => m.FormTransaction.InvoiceNumber, new { @style = "width: 100px" })
                    </td>
                </tr>
                <tr>
                    <td style="padding-right: 5px; text-align: right;">@Html.Label("lblEmail", "Email")
                    </td>
                    <td>@Html.TextBoxFor(m => m.Customer.Email, new { @style = "width: 100px" })
                    </td>
                </tr>
            </table>
            <div style="height: 10px;">
                &nbsp;</div>
            <table style="margin-left: auto; margin-right: auto;">
                <tr>
                    <td width="33%">
                        <input type="submit" id="btnNewCustomer" name="btnNewCustomer" value="New Customer"
                            style="width: 100px;" />
                    </td>
                    <td width="33%">
                        <input type="submit" id="btnEnquiry" name="btnEnquiry" value="Enquiry" style="width: 100px;" />
                    </td>
                    <td width="33%">
                        <input type="submit" id="btnContinue" name="btnContinue" value="Continue" style="width: 100px;" />
                    </td>
                </tr>
            </table>
        </div>
    }
</p>
<div>
    <table id="jqTable" class="scroll">
    </table>
    <div id="jqTablePager" />
</div>

myController的

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Data.Linq;
    using System.Linq.Expressions;
    using System.Web;
    using System.Web.Mvc;
    using System.Dynamic;
    using System.Data.Objects.SqlClient;
    using NLISHelpdesk.WebUI.Models;
    using NLISHelpdesk.WebUI.Entities;
    using NLISHelpdesk.WebUI.Repositories;

    namespace NLISHelpdesk.WebUI.Controllers
    {
        public class HomeController : Controller
        {
            //
            // GET: /Home/
            public ActionResult Home()
            {
                CustomerViewModel ViewModel = new CustomerViewModel
                {
                    Customer = new Customer(), 
                    FormTransaction = new FormTransaction(), 
                    Customers = new List<CustomerViewModel>()
                };

                return View("Home", ViewModel);
            }

            [HttpPost]
            public JsonResult LoadCustomerData(string sidx, string sord, int page, int rows,
                    bool _search, string searchField, string searchOper, string searchString)
            {
                NLISHELPDESKEntities _CustomerContext = new NLISHELPDESKEntities();
                var query = (from cus in _CustomerContext.Customers
                             select new Cust
                             {
                                CustomerID = cus.CustomerID, 
                                FirstName = cus.FirstName,
                                LastName = cus.LastName
                             }
                    ).ToList();


                Customers = query;

                // Calculate the total number of pages
                var totalRecords = query.Count();


                var totalPages = (int)Math.Ceiling((double)totalRecords / (double)rows);

                // Prepare the data to fit the requirement of jQGrid
                var data = (from s in Customers
                            select new
                            {
                                id = s.CustomerID,
                                cell = new object[] { s.CustomerID, s.FirstName, s.LastName}
                            }).ToArray();

                // Send the data to the jQGrid
                var jsonData = new
                {
                    total = totalPages,
                    page = page,
                    records = totalRecords,
                    rows = data.Skip((page - 1) * rows).Take(rows)
                };

                return Json(jsonData, JsonRequestBehavior.AllowGet);
            }
        }
    }

public class Cust
    {
        public int CustomerID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
}

请帮忙......

1 个答案:

答案 0 :(得分:0)

您不需要使用直播,因为该按钮已加载页面。此外,您不需要使用函数包装调用jquery.live ...。警报功能会触发吗?您使用的是JavaScript调试器吗?如果有,是否有任何错误,如果没有在chrome中打开页面并按F12以显示开发人员工具窗口。