C# 在MVC3中单击jqgrid加载按钮

我想在MVC3中单击按钮加载jqGrid，但我无法这样做。数据进展顺利，但页面上什么也没有发生。当我单击时，它会显示网格加载，但在什么都没有发生之后。请参见以下内容：

我的看法

---

请帮助……

您不需要使用live，因为按钮已加载页面。另外，您不需要包装调用jquery.live。。。有功能。警报功能启动了吗？您正在使用JavaScript调试器吗？如果有，是否有任何错误，如果没有，请在chrome中打开页面并按F12键以打开“开发人员工具”窗口。

您使用的是firebug还是fiddler？我假设您的两个警报都已触发。这是正确的吗？是的，这只是为了测试…我不使用的生活，只是为了测试。这是实际的按钮点击事件。现在我的问题是我不想在页面加载时绑定。我只想在单击按钮时绑定网格。我不知道如何做到这一点……你应该发布引起麻烦的代码，而不是在下面的代码中看到的其他随机代码，我必须调用bindCustomer来绑定jqgrid。我不想这样做，而是我只想绑定按钮点击网格$document.ready函数{bindCustomers；$'btnContinue'。live'click'，函数{$'jqTable'。triggerreloadGrid；}；}；

@{
    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>

    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; }
    }
}