1
MVC 3のボタンクリックでjqGridをロードしたいが、できない。データはうまくいっていますが、ページ上で何も起こっていません。クリックすると、グリッドの読み込みが表示されますが、何も起こっていないと表示されます。以下ご参照ください：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;">
</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; }
}
}
助けてください....
火かき棒やフィドラーを使用していますか？ – clyc
私は両方の警告が発砲していると仮定しています。あれは正しいですか？ –
はい、テスト用です... – sensational