就绪功能未在MVC 4中触发 [英] Ready function is not firing in MVC 4
问题描述
我正在研究JQ Grid的样本。我在简单的Web应用程序和网站上多次使用JQ Grid，我没有遇到任何问题。但这是我第一次使用MVC 4。我正在动态创建100万个数据并将其转换为json。在视图中，我接受json并绑定到jqGrid。但即使是document.ready函数也没有解雇。我在这里给我的代码。任何帮助表示赞赏。
查看：
@ {
ViewBag.Title =getJson;
}
@ Styles.Render（〜/ css / jquery-ui.css）
@ Styles.Render（〜/ css / jquery-ui-1.10.4.css ）
@ Styles.Render（〜/ themes / ui.jqgrid.css）
@ Scripts.Render（〜/ js / jquery-2.1.1.js）
@ Scripts.Render（〜/ js / trirand / i18n / grid.locale-en.js）
@ Scripts.Render（〜/ js / trirand / jquery.jqGrid.js）
@ Scripts.Render（〜/ js / trirand / jquery.jqDatePicker.js）
@ Scripts.Render（〜/ js / trirand / jquery.jqAutoComplete.js）
@ Scripts.Render（〜/ js / JQGridSettings.js）
< style type = text / css >
/ * 设置订单日期的datepicker搜索控件的大小* /
＃ ui-datepicker-div {
font-size ： 11px;
}
/ * 设置自动完成搜索控件的大小* /
。 ui-menu-item {
font-size ： 11px;
}
。 ui-autocomplete {
font-size ： 11px;
}
< / style >
< 表 id = jqGrid > < span class =code-keyword>< / table >
< div id = jqGridPager > < / div >
我的JS：
<前lang =cs> $（文件）.ready（function（）{
alert（ ）;
$（ #jqGrid）。jqGrid（{
async ： false ，
url：' / Home / getJson'，
mtype： 获取，
数据类型： json，
page： 1 ，
colNames：[' 订单ID'，' 客户ID'，' 订单日期'，' 运费'，' 发货名称']，
colModel：[
{name：' OrderID'，key： true ，width： 75 }，
{
name：' CustomerID'，
宽度： 150 ，
// stype定义搜索类型控件 - 在本例中为HTML select（下拉列表）
stype： 选择，
// searchoptions值 - 下拉列表的名称值对 - 它们将显示为选项
searchoptions：{ value ： [全部]：[全部]; ALFKI：ALFKI; ANATR：ANATR ; ANTON：ANTON; AROUT：AROUT; BERGS：BERGS; BLAUS：BLAUS; BLONP：BLONP; BOLID：BOLID; BONAP：BONAP; BOTTM：BOTTM; BSBEV：BSBEV; CACTU：CACTU;的CentC：的CentC; CHOPS：CHOPS; COMMI ：COMMI; CONSH：CONSH; DRACD：DRACD; DUMON：DUMON; EASTC：EASTC; ERNSH：ERNSH; FAMIA：FAMIA; FOLIG：FOLIG; FOLKO：FOLKO; FRANK：FRANK; FRANR：FRANR; FRANS：FRANS; FURIB：FURIB ; GALED：GALED; GODOS：GODOS; GOURL：GOURL; GREAL：GREAL; GROSR：GROSR; HANAR：HANAR; HILAA：HILAA; HUNGC：HUNGC; HUNGO：HUNGO; ISLAT：ISLAT; KOENE：KOENE; LACOR：LACOR;拉迈：拉迈; LAUGB：LAUGB; LAZYK：LAZYK; LEHMS：LEHMS; LETSS：LETSS; LILAS：LILAS; LINOD：LINOD; LONEP：LONEP; MAGAA：MAGAA; MAISD：MAISD; MEREP：MEREP; MORGK：MORGK; NORTS：NORTS ; OCEAN：OCEAN; OLDWO：OLDWO; OTTIK：OTTIK;佩里奇：佩里奇; PICCO：PICCO;普里尼：普里尼; QUEDE：QUEDE; QUEEN：QUEEN; QUICK：QUICK; RANCH：牧场; RATTC：RATTC; REGGC：REGGC; RICAR ：RICAR; RICSU：RICSU; ROMEY：ROMEY; SANTG：SANTG; SAVEA：SAVEA; SEVES：SEVES; SIMOB：SIMOB; SPECD：SPECD; SPLIR：SPLIR; SUPRD：SUPRD; THEBI：THEBI; THECR：THECR; TOMSP：TOMSP ; TORTU：TORTU; TRADH：TRADH; TRAIH：TRAIH; VAFFE：VAFFE; VICTE：VICTE; VINET：VINET; WANDK：WANDK;瓦尔特：瓦尔特; WEL LI：WELLI; WHITC：WHITC; WILMK：WILMK; WOLZA：WOLZA}
}，
{
name：' OrderDate'，
宽度： 150 ，
searchoptions：{
// dataInit是初始化列的工具栏搜索字段时触发的客户端事件
// 使用它来放置第三方控件来自定义工具栏
dataInit：function（element）{
$（element）.datepicker（{
id：' orderDate_datePicker'，
dateFormat：' M / d / yy'，
minDate： new 日期（ 2010 ， 0 ， 1 ），
maxDate： new 日期（ 2020 ， 0 ， 1 ），
showOn：' focus'
}）;
}
}
}，
{名称：' 运费' ，width： 150 }，
{
name：' ShipName'，
width： 150 ，
searchoptions：{
// dataInit是在初始化列的工具栏搜索字段时触发的客户端事件
// 使用它来放置第三方控件来自定义工具栏
dataInit： function（element）{
$（element）.autocomplete（{
id：' AutoComplete'，
source：' data.json'，
autoFocus： true
}）;
}
}
}
]，
宽度： 750 ，
height： 250 ，
rowNum： 20 ，
pager： ＃jqGridPager
}）;
$（' #jqGrid'）。filterToolbar（）;
}）;
我的控制器：
命名空间JQGrid.Controllers
{
public class HomeController：Controller
{
//
// GET： / Home /
public ActionResult Index（）
{
return View（）;
}
public JsonResult getJson（）
{
JsonModel jsm = new JsonModel（）;
var collection = jsm.jsonResultString（）;
return（Json（collection，JsonRequestBehavior.AllowGet））;
}
protected override JsonResult Json（对象数据，字符串contentType，System.Text.Encoding contentEncoding，JsonRequestBehavior行为）
{
返回new JsonResult（）
{
数据=数据，
ContentType = contentType，
ContentEncoding = contentEncoding，
JsonRequestBehavior = behavior，
MaxJsonLength = Int32.MaxValue
};
}
}
}
当我检查在浏览器控制台中。页面呈现如下。请看。
< html >
< head > < / head >
< 正文 >
< pre >
[{\OrderID \：\ 0 \，\CustomerID \：\SCT0 \，\Ord ...
< ; / body >
< / html >
谢谢。
（document）.ready（function（）{
alert（ ）;
（ #jqGrid）。jqGrid（{
async ： false ，
url：' / Home / getJson'，
mtype： GET，
datatype： json，
page： 1 ，
colNames：[' 订单ID'，' 客户ID'，' 订单日期'，' 运费'，' Ship Name']，
colModel：[
{name：' OrderID'，键： true ，宽度： 75 }，
{
name：' CustomerID'，
width： 150 ，
// stype定义搜索类型控件 - 在此case HTML select（dropdownlist）
stype： select，
// searchoptions值 - 下拉列表的名称值对 - 它们将显示为选项
searchoptions：{ value ： [全部]：[全部]; ALFKI：ALFKI; ANATR： ANATR; ANTON：ANTON; AROUT：AROUT; BERGS：BERGS; BLAUS：BLAUS; BLONP：BLONP; BOLID：BOLID; BONAP：BONAP; BOTTM：BOTTM; BSBEV：BSBEV; CACTU：CACTU;的CentC：的CentC; CHOPS：CHOPS; COMMI：COMMI; CONSH：CONSH; DRACD：DRACD; DUMON：DUMON; EASTC：EASTC; ERNSH：ERNSH; FAMIA：FAMIA; FOLIG：FOLIG; FOLKO：FOLKO; FRANK：FRANK; FRANR：FRANR; FRANS：FRANS; FURIB： FURIB; GALED：GALED; GODOS：GODOS; GOURL：GOURL; GREAL：GREAL; GROSR：GROSR; HANAR：HANAR; HILAA：HILAA; HUNGC：HUNGC; HUNGO：HUNGO; ISLAT：ISLAT; KOENE：KOENE; LACOR：LACOR;拉迈：拉迈; LAUGB：LAUGB; LAZYK：LAZYK; LEHMS：LEHMS; LETSS：LETSS; LILAS：LILAS; LINOD：LINOD; LONEP：LONEP; MAGAA：MAGAA; MAISD：MAISD; MEREP：MEREP; MORGK：MORGK; NORTS： NORTS;海洋：OCEAN; OLDWO：OLDWO; OTTIK：OTTIK;佩里奇：佩里奇; PICCO：PICCO;普里尼：普里尼; QUEDE：QUEDE; QUE EN：QUEEN; QUICK：QUICK; RANCH：牧场; RATTC：RATTC; REGGC：REGGC; RICAR：RICAR; RICSU：RICSU; ROMEY：ROMEY; SANTG：SANTG; SAVEA：SAVEA; SEVES：SEVES; SIMOB：SIMOB; SPECD： SPECD; SPLIR：SPLIR; SUPRD：SUPRD; THEBI：THEBI; THECR：THECR; TOMSP：TOMSP; TORTU：TORTU; TRADH：TRADH; TRAIH：TRAIH; VAFFE：VAFFE; VICTE：VICTE; VINET：VINET; WANDK：WANDK; WARTH：WARTH; WELLI：WELLI; WHITC：WHITC; WILMK：WILMK; WOLZA：WOLZA}
}，
{
name：' OrderDate'，
宽度： 150 ，
searchoptions：{
// dataInit是初始化工具栏搜索字段时触发的客户端事件列
// 使用它来放置第三方控件以自定义工具栏
dataInit：function（element）{
（element）.datepicker（{
id：' orderDate_datePicker'，
dateFormat：' M / d / yy' ，
minDate： new 日期（ 2010 ， 0 ， 1 ），
maxDate： new 日期（ 2020 ， 0 ， 1 ），
showOn：' focus'
}）;
}
}
}，
{名称：' 运费' ，width： 150 }，
{
name：' ShipName'，
width： 150 ，
searchoptions：{
// dataInit是在初始化列的工具栏搜索字段时触发的客户端事件
// 使用它来放置第三方控件来自定义工具栏
dataInit： function（element）{
I am working on a sample of JQ Grid. I worked with JQ Grid so many times in simple web application and website, there i didn't face any problem. But this is the first time i am working with MVC 4 . I am creating 1 million data dynamically and converting it to the json. In the view i am accepting the json and bind to the jqGrid. But even document.ready function is not firing. Here i am giving my codes. Any help is appreciated .
View :
@{
ViewBag.Title = "getJson";
}
@Styles.Render("~/css/jquery-ui.css")
@Styles.Render("~/css/jquery-ui-1.10.4.css")
@Styles.Render("~/themes/ui.jqgrid.css")
@Scripts.Render("~/js/jquery-2.1.1.js")
@Scripts.Render("~/js/trirand/i18n/grid.locale-en.js")
@Scripts.Render("~/js/trirand/jquery.jqGrid.js")
@Scripts.Render("~/js/trirand/jquery.jqDatePicker.js")
@Scripts.Render("~/js/trirand/jquery.jqAutoComplete.js")
@Scripts.Render("~/js/JQGridSettings.js")
<style type="text/css">
/* set the size of the datepicker search control for Order Date*/
#ui-datepicker-div {
font-size: 11px;
}
/* set the size of the autocomplete search control*/
.ui-menu-item {
font-size: 11px;
}
.ui-autocomplete {
font-size: 11px;
}
</style>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
My JS :
$(document).ready(function () {
alert("");
$("#jqGrid").jqGrid({
async: false,
url: '/Home/getJson',
mtype: "GET",
datatype: "json",
page: 1,
colNames: ['Order ID', 'Customer ID', 'Order Date', 'Freight', 'Ship Name'],
colModel: [
{ name: 'OrderID', key: true, width: 75 },
{
name: 'CustomerID',
width: 150,
// stype defines the search type control - in this case HTML select (dropdownlist)
stype: "select",
// searchoptions value - name values pairs for the dropdown - they will appear as options
searchoptions: { value: "[All]:[All];ALFKI:ALFKI;ANATR:ANATR;ANTON:ANTON;AROUT:AROUT;BERGS:BERGS;BLAUS:BLAUS;BLONP:BLONP;BOLID:BOLID;BONAP:BONAP;BOTTM:BOTTM;BSBEV:BSBEV;CACTU:CACTU;CENTC:CENTC;CHOPS:CHOPS;COMMI:COMMI;CONSH:CONSH;DRACD:DRACD;DUMON:DUMON;EASTC:EASTC;ERNSH:ERNSH;FAMIA:FAMIA;FOLIG:FOLIG;FOLKO:FOLKO;FRANK:FRANK;FRANR:FRANR;FRANS:FRANS;FURIB:FURIB;GALED:GALED;GODOS:GODOS;GOURL:GOURL;GREAL:GREAL;GROSR:GROSR;HANAR:HANAR;HILAA:HILAA;HUNGC:HUNGC;HUNGO:HUNGO;ISLAT:ISLAT;KOENE:KOENE;LACOR:LACOR;LAMAI:LAMAI;LAUGB:LAUGB;LAZYK:LAZYK;LEHMS:LEHMS;LETSS:LETSS;LILAS:LILAS;LINOD:LINOD;LONEP:LONEP;MAGAA:MAGAA;MAISD:MAISD;MEREP:MEREP;MORGK:MORGK;NORTS:NORTS;OCEAN:OCEAN;OLDWO:OLDWO;OTTIK:OTTIK;PERIC:PERIC;PICCO:PICCO;PRINI:PRINI;QUEDE:QUEDE;QUEEN:QUEEN;QUICK:QUICK;RANCH:RANCH;RATTC:RATTC;REGGC:REGGC;RICAR:RICAR;RICSU:RICSU;ROMEY:ROMEY;SANTG:SANTG;SAVEA:SAVEA;SEVES:SEVES;SIMOB:SIMOB;SPECD:SPECD;SPLIR:SPLIR;SUPRD:SUPRD;THEBI:THEBI;THECR:THECR;TOMSP:TOMSP;TORTU:TORTU;TRADH:TRADH;TRAIH:TRAIH;VAFFE:VAFFE;VICTE:VICTE;VINET:VINET;WANDK:WANDK;WARTH:WARTH;WELLI:WELLI;WHITC:WHITC;WILMK:WILMK;WOLZA:WOLZA" }
},
{
name: 'OrderDate',
width: 150,
searchoptions: {
// dataInit is the client-side event that fires upon initializing the toolbar search field for a column
// use it to place a third party control to customize the toolbar
dataInit: function (element) {
$(element).datepicker({
id: 'orderDate_datePicker',
dateFormat: 'M/d/yy',
minDate: new Date(2010, 0, 1),
maxDate: new Date(2020, 0, 1),
showOn: 'focus'
});
}
}
},
{ name: 'Freight', width: 150 },
{
name: 'ShipName',
width: 150,
searchoptions: {
// dataInit is the client-side event that fires upon initializing the toolbar search field for a column
// use it to place a third party control to customize the toolbar
dataInit: function (element) {
$(element).autocomplete({
id: 'AutoComplete',
source: 'data.json',
autoFocus: true
});
}
}
}
],
width: 750,
height: 250,
rowNum: 20,
pager: "#jqGridPager"
});
$('#jqGrid').filterToolbar();
});
My controller :
namespace JQGrid.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
public JsonResult getJson()
{
JsonModel jsm = new JsonModel();
var collection=jsm.jsonResultString();
return (Json(collection, JsonRequestBehavior.AllowGet));
}
protected override JsonResult Json(object data, string contentType, System.Text.Encoding contentEncoding, JsonRequestBehavior behavior)
{
return new JsonResult()
{
Data = data,
ContentType = contentType,
ContentEncoding = contentEncoding,
JsonRequestBehavior = behavior,
MaxJsonLength = Int32.MaxValue
};
}
}
}
And when i checked in the browser console. The page rendered as the following . Please look.
<html>
<head></head>
<body>
<pre>
"[{\"OrderID\":\"0\",\"CustomerID\":\"SCT0\",\"Ord…
</body>
</html>
Thank you.
(document).ready(function () { alert("");
("#jqGrid").jqGrid({ async: false, url: '/Home/getJson', mtype: "GET", datatype: "json", page: 1, colNames: ['Order ID', 'Customer ID', 'Order Date', 'Freight', 'Ship Name'], colModel: [ { name: 'OrderID', key: true, width: 75 }, { name: 'CustomerID', width: 150, // stype defines the search type control - in this case HTML select (dropdownlist) stype: "select", // searchoptions value - name values pairs for the dropdown - they will appear as options searchoptions: { value: "[All]:[All];ALFKI:ALFKI;ANATR:ANATR;ANTON:ANTON;AROUT:AROUT;BERGS:BERGS;BLAUS:BLAUS;BLONP:BLONP;BOLID:BOLID;BONAP:BONAP;BOTTM:BOTTM;BSBEV:BSBEV;CACTU:CACTU;CENTC:CENTC;CHOPS:CHOPS;COMMI:COMMI;CONSH:CONSH;DRACD:DRACD;DUMON:DUMON;EASTC:EASTC;ERNSH:ERNSH;FAMIA:FAMIA;FOLIG:FOLIG;FOLKO:FOLKO;FRANK:FRANK;FRANR:FRANR;FRANS:FRANS;FURIB:FURIB;GALED:GALED;GODOS:GODOS;GOURL:GOURL;GREAL:GREAL;GROSR:GROSR;HANAR:HANAR;HILAA:HILAA;HUNGC:HUNGC;HUNGO:HUNGO;ISLAT:ISLAT;KOENE:KOENE;LACOR:LACOR;LAMAI:LAMAI;LAUGB:LAUGB;LAZYK:LAZYK;LEHMS:LEHMS;LETSS:LETSS;LILAS:LILAS;LINOD:LINOD;LONEP:LONEP;MAGAA:MAGAA;MAISD:MAISD;MEREP:MEREP;MORGK:MORGK;NORTS:NORTS;OCEAN:OCEAN;OLDWO:OLDWO;OTTIK:OTTIK;PERIC:PERIC;PICCO:PICCO;PRINI:PRINI;QUEDE:QUEDE;QUEEN:QUEEN;QUICK:QUICK;RANCH:RANCH;RATTC:RATTC;REGGC:REGGC;RICAR:RICAR;RICSU:RICSU;ROMEY:ROMEY;SANTG:SANTG;SAVEA:SAVEA;SEVES:SEVES;SIMOB:SIMOB;SPECD:SPECD;SPLIR:SPLIR;SUPRD:SUPRD;THEBI:THEBI;THECR:THECR;TOMSP:TOMSP;TORTU:TORTU;TRADH:TRADH;TRAIH:TRAIH;VAFFE:VAFFE;VICTE:VICTE;VINET:VINET;WANDK:WANDK;WARTH:WARTH;WELLI:WELLI;WHITC:WHITC;WILMK:WILMK;WOLZA:WOLZA" } }, { name: 'OrderDate', width: 150, searchoptions: { // dataInit is the client-side event that fires upon initializing the toolbar search field for a column // use it to place a third party control to customize the toolbar dataInit: function (element) {
(element).datepicker({ id: 'orderDate_datePicker', dateFormat: 'M/d/yy', minDate: new Date(2010, 0, 1), maxDate: new Date(2020, 0, 1), showOn: 'focus' }); } } }, { name: 'Freight', width: 150 }, { name: 'ShipName', width: 150, searchoptions: { // dataInit is the client-side event that fires upon initializing the toolbar search field for a column // use it to place a third party control to customize the toolbar dataInit: function (element) {
这篇关于就绪功能未在MVC 4中触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
