将JSON数据返回到JQGrid会提示保存文件

时间:2013-03-12 17:07:25

标签: asp.net-mvc-4 jqgrid

我是ASP.Net MVC的新手。我正在尝试一个示例程序将JQGrid与数据绑定。当我从Controller返回JSON数据时,系统会弹出“你想要保存文件吗...”。我相信我的浏览器无法理解JSON数据。我浏览了StackOverFlow中的另一篇文章,似乎没有人帮助我。我在IE8上运行此设置为兼容模式。请参阅以下代码:

Index.cshtml

@{
ViewBag.Title = "Home Page";
  }
  <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />  
   <link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet"    type="text/css" />  
   <link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />

  <script src="~/Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>  
  <script src="~/Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>  
  <script src="~/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>

  <script type="text/javascript">
  $(document).ready(function () {
    $("#myGrid").jqGrid({
        url: '../../Home/About/GetJQGridData',
        datatype: 'json',
        contentType: 'application/json',
        myType: 'GET',
        colNames: ['Id', 'Name'],
        colModel: [
        { name: 'Id', index: 'Id' },
        { name: 'Name', index: 'Name' }
        ],
        jsonReader: {
            root: 'Data',
            id: 'id',
            repeatitems: false
        },
        pager: $('#myPager'),
        rowNum: 5,
        rowList: [2, 5, 10],
        width: 600,
        viewrecords: true,
        caption: 'Jqgrid MVC Tutorial'
        });
     });
   </script>



    <table id="myGrid"></table>  
     <div id="myPager"></div>`

我的控制器代码如下:

  

HomeController.cs

 [AcceptVerbs(HttpVerbs.Get)] 
    public ActionResult GetJQGridData()
    {
        var jqGridData = new JQGridObject()
        {
            Data = GetSomeSampleData(),
            Page = "1",
            PageSize = 3, // u can change this !  
            SortColumn = "Name",
            SortOrder = "asc"
        };

        return Json(jqGridData, JsonRequestBehavior.AllowGet);
    }

    public List<Fruit> GetSomeSampleData()
    {
        return new List<Fruit>  
        {  
        new Fruit{Id = 1, Name = "Apple" },  
        new Fruit{Id = 2, Name = "Melon" },  
        new Fruit{Id = 3, Name = "Orange" },  
        new Fruit{Id = 4, Name = "Grapes" },  
        new Fruit{Id = 5, Name = "Pineapple" },  
        new Fruit{Id = 6, Name = "Mango" },  
        new Fruit{Id = 7, Name = "Bannana" },  
        new Fruit{Id = 8, Name = "Cherry" }  
        };
    } 

任何帮助都将受到高度赞赏。 感谢

1 个答案:

答案 0 :(得分:1)

第一件事就是我的控制器/视图被错误引用

url: '../../Home/About/GetJQGridData',

应该是

url: '/Home/GetJQGridData',

您不需要在客户端上设置jsonReader。