2012-01-19 134 views
1

我想加載jqGrid的按鈕點擊MVC 3,但我無法做到這一點。數據正常,但頁面上沒有任何事情發生。當我點擊時,它顯示網格加載,但沒有任何反應後。請參閱以下內容:jqgrid加載按鈕點擊MVC3

我查看

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

請幫忙....

+0

您是使用螢火蟲還是小提琴手? – clyc 2012-01-19 03:06:55

+0

我假設你的兩個警報都在觸發。那是對的嗎? – 2012-01-19 03:10:30

+0

是的,這只是爲了測試... – sensational 2012-01-19 04:38:47

回答

0

你不需要使用live,因爲按鈕被加載了頁面。你也不需要用函數來包裝jquery.live ...的調用。警報功能是否觸發?你在使用JavaScript調試器嗎?如果是這樣,是否有任何錯誤,如果不是在Chrome中打開頁面,並按F12調出開發人員工具窗口。

+0

我沒有使用僅用於測試的實況。它是實際的按鈕點擊事件。現在我的問題是我不想在頁面加載時進行綁定。我想只在點擊按鈕時綁定網格。我不知道如何實現... – sensational 2012-01-19 04:13:51

+0

你應該發佈造成麻煩的代碼,而不是其他的隨機代碼 – Jason 2012-01-19 04:15:39

+0

你會在下面的代碼中看到我必須調用綁定jqgrid的bindCustomer()。我不想這樣做,而是隻想按鈕單擊時綁定網格。 $(文件)。就緒 ( \t函數(){ bindCustomers(); \t $( '#btnContinue')生活( '點擊',函數(){ \t $('#jqTable 「).trigger( 「reloadGrid」); \t \t }); \t} ); – sensational 2012-01-19 04:31:15