无法在MVC 4中加载jqgird [英] unable to load jqgird in MVC 4
问题描述
我是MVC 4的新手，我试图在我的剃刀视图（内容页面）中使用基于MVC 4的项目中的jqgird。当我在布局剃刀视图中使用jqgird时它工作正常但是当我在剃刀视图（内容页面）中使用jqgrid时我无法获得desiare输出。数据即将到来，但jqgrid的设计不可见。
@ Scripts.Render（〜/ bundles / jquery） ;
此代码造成问题。
查看代码....
@ {
@using System.Web.Optimization;
@ Scripts.Render（〜/ bundles / jquery）;
< script src =../ Scripts / i18n / grid.locale-en.jstype =text / javascript>< / script>
@ Scripts.Render（〜/ bundles / jqGrid）;
< link href =../ Content / jquery.jqGrid / ui.jqgrid.css =stylesheettype =text / css/>
< link href =../ Content / themes / base / jquery-ui.css =stylesheettype =text / css/>
}
< script type =text / javascript>
var path =登录/索引;
jQuery（＃jQGridDemo）。jqGrid（{
url：path，
datatype：json，
colNames：['userID'，'FirstName']，
colModel：[
{name：'userID'，index：'userID'，width：20，stype：'text'}，
{name：'username'，index：'FirstName' ，宽度：150，stype：'text'，sortable：true，editable：true}
]，
rowNum：10，
mtype：'POST'，
loadonce：true，
rowList：[10,20,30]，
pager：'＃jQGridDemoPager'，
sortname：'_ id'，
viewrecords：true，
sortorder：'desc'，
标题：列出员工详细信息，
// editurl：'http：// localhost：58404 / JQGridHandler.ashx'
}）;
$（'＃jQGridDemo'）。jqGrid（'navGrid'，'＃jQGridDemoPager'，
{
编辑：true，
add：true，
del：true，
search：true，
searchtext：Search，
addtext：Add，
edittext：Edit，
deltext： 删除
}，
{//编辑
//高度：300，
//宽度：400，
//顶部：50，
// left：100，
// dataheight：280，
closeOnEscape：true，//按下转义键关闭弹出窗口
reloadAfterSubmit：true，
drag：true，
afterSubmit：function（response，postdata）{
if（response.responseText ==）{
$（this）.jqGrid（'setGridParam' ，{datatype：'json'}）。trigger（'reloadGrid'）; //编辑后重新加载网格
return [true，'']
}
else {
$（this）.jqGrid（'setGridParam'，{datatype：'json' }）触发（ 'reloadGrid'）; //编辑后重新加载网格
return [false，response.responseText] //在编辑窗口中捕获并显示响应文本
}
}，
editData：{
EmpId：function（）{
var sel_id = $（'＃jQGridDemo'）。jqGrid（'getGridParam'，'selrow'）;
var value = $（'＃jQGridDemo'）。jqGrid（'getCell'，sel_id，'_ id'）;
返回值;
}
}
}，
{
closeAfterAdd：true，//在添加
afterSubmit：function（response，postdata）{之后关闭添加窗口
if（response.responseText ==）{
$（this）.jqGrid（'setGridParam'，{datatype：'json'}）。trigger（'reloadGrid'）/ /在Add
return [true，'']
}之后重新加载网格
else {
$（this）.jqGrid（'setGridParam'，{datatype：'json'} ）.trigger（'reloadGrid'）//添加
后重新加载网格[false，response.responseText]
}
}
}，
{//删除
closeOnEscape：true，
closeAfterDelete：true，
reloadAfterSubmit：true，
closeOnEscape：true，
drag：true，
afterSubmit：function（response，postdata）{
if（response.responseText ==）{
$（＃jQGridDemo）。trigger（reloadGrid，[{current：true}]）;
return [false，response.responseText]
}
else {
$（this）.jqGrid（'setGridParam'，{datatype：'json'}）。trigger（' reloadGrid'）
return [true，response.responseText]
}
}，
delData：{
EmpId：function（）{
var sel_id = $（'＃jQGridDemo'）。jqGrid（'getGridParam'，'selrow'）;
var value = $（'＃jQGridDemo'）。jqGrid（'getCell'，sel_id，'_ id'）;
返回值;
}
}
}，
{// SEARCH
closeOnEscape：true
}
）;
< / script>
< h2>指数< / h2>
< table id ='jQGridDemo'>
< / table>
app_start / bundleConfig.cs file
<$ p $使用系统;
使用System.Collections.Generic;
使用System.Linq;
使用System.Web;
使用System.Web.Optimization;
命名空间MVC_grid_application.App_Start
{
public class BundleConfig
{
public static void RegisterBundles（BundleCollection bundles）
{
bundles.Add（new StyleBundle（〜/ Content / themes / base / css）。包括（
〜/ Content / themes / base / jquery-ui.css，
〜/ Content / themes / base / jquery.ui.all.css，
〜/ Content / themes / base / jquery.ui.autocomplete.css，
〜/ Content / themes /base/jquery.ui.button.css，
〜/ Content / themes / base / jquery.ui.base.css，
〜/ Content / themes / base / jquery.ui .datepicker.css，
〜/ Content / themes / base / jquery.ui.resizable.css，
〜/ Content / themes / base / jquery.ui.selectable.css，
〜/ Content / themes / base / Site.css，
〜/ Content / themes /base/jquery.ui.spinner.css，
〜/ Content / themes / base / jquery.ui.theme.css
）
）;
bundles.GetBundleFor（〜/ Content / themes / base / css）。Orderer = new AppCssOrderer（）;
var bootstrapOrdering = new BundleFileSetOrdering（bootstrap）;
bundles.Add（new ScriptBundle（〜/ Scripts / js）。包括（
〜/ Scripts / eXNav.js，
〜/ Scripts / jquery -1.8.1-vsdoc.js，
〜/ Scripts / jquery-1.8.1.js，
〜/ Scripts / jquery-ui-1.8.23.custom.min.js ，
〜/ Scripts / Labels.js，
〜/ Scripts / Dialog.js，
〜/ Scripts / SessionTimeOut.js，
〜 /Scripts/jquery.qtip.js，
〜/ Scripts / json2.js，
〜/ Scripts / jquery.watermark.min.js，
〜/ Scripts /grid.locale-en.js，
〜/ Scripts / jquery.jqGrid.src.js，
〜/ Scripts / jquery.jqGrid.fluid.js，
〜/ Scripts / jquery.validate.min.js，
〜/ Scripts / jquery.validate.unobtrusive.min.js，
〜/ Scripts / Computing.js，
〜/ Scripts / Controllers / ProjectController.js，
〜/ Scripts / Controllers / RequestController.js，
〜/ Scripts / Controllers / SystemController.js，
〜/ Scripts / Views / ProjectView.js，
〜/ Scripts / Views / RequestView.js，
〜 /Scripts/Views/SystemView.js
）
）;
bundles.GetBundleFor（〜/ Scripts / js）。Orderer = new AppJsOrderer（）;
BundleTable.EnableOptimizations = true;
}
公共类AppCssOrderer：IBundleOrderer
{
public IEnumerable< System.IO.FileInfo> OrderFiles（BundleContext context，
IEnumerable< System.IO.FileInfo> files）
{
// return files.OrderBy（f => f.Name ==eyNav.css？ -1：1）;
if（context == null）
抛出新的ArgumentNullException（context）;
if（files == null）
抛出新的ArgumentNullException（files）;
返回文件;
}
public IEnumerable< BundleFile> OrderFiles（BundleContext context，IEnumerable< BundleFile> files）
{
throw new NotImplementedException（）;
}
}
公共类AppJsOrderer：IBundleOrderer
{
public IEnumerable< System.IO.FileInfo> OrderFiles（BundleContext context，
IEnumerable< System.IO.FileInfo> files）
{
// return files.OrderBy（f => f.Name ==eyNav.css？ -1：1）;
if（context == null）
抛出新的ArgumentNullException（context）;
if（files == null）
抛出新的ArgumentNullException（files）;
返回文件;
}
public IEnumerable< BundleFile> OrderFiles（BundleContext context，IEnumerable< BundleFile> files）
{
throw new NotImplementedException（）;
}
}
}
}
（'＃jQGridDemo'） .jqGrid（'navGrid'，'＃jQGridDemoPager'，
{
edit：true，
add：true，
del：true，
search：true，
searchtext：搜索，
addtext：添加，
edittext：编辑，
deltext：删除
}，
{/ /编辑
//身高：300，
//宽度：400，
//上：50，
//左：100，
// dataheight： 280，
closeOnEscape：true，//关闭p opup on press escape key
reloadAfterSubmit：true，
drag：true，
afterSubmit：function（response，postdata）{
if（response.responseText ==）{
（this）.jqGrid（'setGridParam'，{datatype：'json'}）。trigger（'reloadGrid'）; //编辑后重新加载网格
return [true，'']
}
else {
（this）.jqGrid（'setGridParam'， {datatype：'json'}）。trigger（'reloadGrid'）; //编辑后重新加载网格
return [false，response.responseText] //在编辑窗口中捕获并显示响应文本
}
}，
editData：{
EmpId：function（）{
var sel_id =
I m a fresher in MVC 4 and I m trying to use jqgird in my razor view(content page) in MVC 4 based project. WHen i m using the jqgird in layout razor view it works properly but i m unable to get the desiare output when i m using jqgrid in razor view(content page). The data is coming in view but the design of jqgrid is not visible.
@Scripts.Render("~/bundles/jquery"); this code is creating problem.
view code....
@{
@using System.Web.Optimization;
@Scripts.Render("~/bundles/jquery");
<script src="../Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
@Scripts.Render("~/bundles/jqGrid");
<link href="../Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
}
<script type="text/javascript">
var path = "Login/Index";
jQuery("#jQGridDemo").jqGrid({
url: path,
datatype: "json",
colNames: ['userID', 'FirstName'],
colModel: [
{ name: 'userID', index: 'userID', width: 20, stype: 'text' },
{ name: 'username', index: 'FirstName', width: 150, stype: 'text', sortable: true, editable: true }
],
rowNum: 10,
mtype: 'POST',
loadonce: true,
rowList: [10, 20, 30],
pager: '#jQGridDemoPager',
sortname: '_id',
viewrecords: true,
sortorder: 'desc',
caption: "List Employee Details",
//editurl: 'http://localhost:58404/JQGridHandler.ashx'
});
$('#jQGridDemo').jqGrid('navGrid', '#jQGridDemoPager',
{
edit: true,
add: true,
del: true,
search: true,
searchtext: "Search",
addtext: "Add",
edittext: "Edit",
deltext: "Delete"
},
{ //EDIT
// height: 300,
// width: 400,
// top: 50,
// left: 100,
// dataheight: 280,
closeOnEscape: true, //Closes the popup on pressing escape key
reloadAfterSubmit: true,
drag: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
return [true, '']
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
return [false, response.responseText]//Captures and displays the response text on th Edit window
}
},
editData: {
EmpId: function () {
var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
return value;
}
}
},
{
closeAfterAdd: true, //Closes the add window after add
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
return [true, '']
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
return [false, response.responseText]
}
}
},
{ //DELETE
closeOnEscape: true,
closeAfterDelete: true,
reloadAfterSubmit: true,
closeOnEscape: true,
drag: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$("#jQGridDemo").trigger("reloadGrid", [{ current: true}]);
return [false, response.responseText]
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')
return [true, response.responseText]
}
},
delData: {
EmpId: function () {
var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
return value;
}
}
},
{//SEARCH
closeOnEscape: true
}
);
</script>
<h2>Index</h2>
<table id='jQGridDemo' >
</table>
app_start/bundleConfig.cs file
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;
namespace MVC_grid_application.App_Start
{
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery-ui.css",
"~/Content/themes/base/jquery.ui.all.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.base.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/Site.css",
"~/Content/themes/base/jquery.ui.spinner.css",
"~/Content/themes/base/jquery.ui.theme.css"
)
);
bundles.GetBundleFor("~/Content/themes/base/css").Orderer = new AppCssOrderer();
var bootstrapOrdering = new BundleFileSetOrdering("bootstrap");
bundles.Add(new ScriptBundle("~/Scripts/js").Include(
"~/Scripts/eXNav.js",
"~/Scripts/jquery-1.8.1-vsdoc.js",
"~/Scripts/jquery-1.8.1.js",
"~/Scripts/jquery-ui-1.8.23.custom.min.js",
"~/Scripts/Labels.js",
"~/Scripts/Dialog.js",
"~/Scripts/SessionTimeOut.js",
"~/Scripts/jquery.qtip.js",
"~/Scripts/json2.js",
"~/Scripts/jquery.watermark.min.js",
"~/Scripts/grid.locale-en.js",
"~/Scripts/jquery.jqGrid.src.js",
"~/Scripts/jquery.jqGrid.fluid.js",
"~/Scripts/jquery.validate.min.js",
"~/Scripts/jquery.validate.unobtrusive.min.js",
"~/Scripts/Computing.js",
"~/Scripts/Controllers/ProjectController.js",
"~/Scripts/Controllers/RequestController.js",
"~/Scripts/Controllers/SystemController.js",
"~/Scripts/Views/ProjectView.js",
"~/Scripts/Views/RequestView.js",
"~/Scripts/Views/SystemView.js"
)
);
bundles.GetBundleFor("~/Scripts/js").Orderer = new AppJsOrderer();
BundleTable.EnableOptimizations = true;
}
public class AppCssOrderer : IBundleOrderer
{
public IEnumerable<System.IO.FileInfo> OrderFiles(BundleContext context,
IEnumerable<System.IO.FileInfo> files)
{
// return files.OrderBy(f => f.Name == "eyNav.css" ? -1 : 1);
if (context == null)
throw new ArgumentNullException("context");
if (files == null)
throw new ArgumentNullException("files");
return files;
}
public IEnumerable<BundleFile> OrderFiles(BundleContext context, IEnumerable<BundleFile> files)
{
throw new NotImplementedException();
}
}
public class AppJsOrderer : IBundleOrderer
{
public IEnumerable<System.IO.FileInfo> OrderFiles(BundleContext context,
IEnumerable<System.IO.FileInfo> files)
{
// return files.OrderBy(f => f.Name == "eyNav.css" ? -1 : 1);
if (context == null)
throw new ArgumentNullException("context");
if (files == null)
throw new ArgumentNullException("files");
return files;
}
public IEnumerable<BundleFile> OrderFiles(BundleContext context, IEnumerable<BundleFile> files)
{
throw new NotImplementedException();
}
}
}
}('#jQGridDemo').jqGrid('navGrid', '#jQGridDemoPager', { edit: true, add: true, del: true, search: true, searchtext: "Search", addtext: "Add", edittext: "Edit", deltext: "Delete" }, { //EDIT // height: 300, // width: 400, // top: 50, // left: 100, // dataheight: 280, closeOnEscape: true, //Closes the popup on pressing escape key reloadAfterSubmit: true, drag: true, afterSubmit: function (response, postdata) { if (response.responseText == "") {
(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit return [true, ''] } else {
(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit return [false, response.responseText]//Captures and displays the response text on th Edit window } }, editData: { EmpId: function () { var sel_id =
这篇关于无法在MVC 4中加载jqgird的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
