2017-01-18 27 views
0

コントローラからビューにデータ(jsonオブジェクト)を送信し、jqgridにデータを表示しようとしていますが、データをjqgridにバインドできません。データはJSON形式でブラウザに出力されます。私はコードがどこに間違っていたのか理解できません。 here is the output what i getjqgridでデータを表示できませんASP.NET MVC

CONTROLLER

using System; 
    using System.Collections.Generic; 
    using System.Linq; 
    using System.Web; 
    using System.Web.Mvc; 
    using Prism.Models; 
    using System.Web.Script.Serialization; 


    namespace Prism.Controllers 
    { 
     public class SakilaController : Controller 
     { 
      // GET: Sakila 
      public JsonResult Index() 
      { 
       List<ActorModel> actormodel = new List<ActorModel>(); 
       using (var context = new sakilaEntities()) 
       { 

        List<actor> b = context.actors.ToList(); 
        actormodel.Add(new ActorModel() 
        {id = 1, 
        f_name = "MS", 
        l_name = "Vivek", 
        last_update = DateTime.Now}); 
       } 
     return Json(actormodel.ToList(), JsonRequestBehavior.AllowGet); 

     } 
    } 
    } 

Index.cshtml

<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" /> 
 
    <link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" /> 
 
    <script src="~/Scripts/jquery-3.1.1.min.js"></script> 
 
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script> 
 
    <script src="~/Scripts/i18n/grid.locale-en.js"></script> 
 
    <script src="~/Scripts/jquery.jqGrid.min.js"></script> 
 
    <script src="~/Scripts/MyGrid.js"></script> 
 

 

 
test 
 
<script> 
 
$(document).ready(function() { 
 
    $("#grid").jqGrid({ 
 
     url: 'Index/Sakila', 
 
     datatype: "json", 
 
     contentType: "application/json", 
 
     colNames: ['actor_id', 'f_name', 'l_name'], 
 
     colModel: [ 
 
     { name: 'id', index: 'id', width: 20 }, 
 
     { name: 'f_name', index: 'f_name', width: 150 }, 
 
     { name: 'l_name', index: 'l_name', width: 150 } 
 
     ], 
 
     rowNum: 10, 
 
     mtype: "POST", 
 
     rowList: [10, 20, 30], 
 
     pager: '#pager', 
 
     loadonce: false, 
 
     viewrecords: true, 
 
     sortorder: "desc", 
 
     autoencode: true, 
 
     caption: "Company approval" 
 
    }); 
 
    jQuery("#grid").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false }); 
 
}); 
 

 
</script> 
 
    
 
    
 
<table id="grid" ></table> 
 
<div id="pager"></div> 
 

 

レイアウト

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title>@ViewBag.Title - My ASP.NET Application</title> 
 
    @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") 
 

 
</head> 
 

 
<body> 
 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) 
 
     </div> 
 
     <div class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav"> 
 
      <li>@Html.ActionLink("Home", "Index", "Home")</li> 
 
      <li>@Html.ActionLink("About", "About", "Home")</li> 
 
      <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
 
     </ul> 
 
     @Html.Partial("_LoginPartial") 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container body-content"> 
 
    @RenderBody() 
 
    <hr /> 
 
    <footer> 
 
     <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p> 
 
    </footer> 
 
    </div> 
 

 
    @RenderSection("scripts", required: false) 
 
</body> 
 

 
</html>

+0

コントローラ名/メソッド名として働いていることに注意してくださいてSakila/GetDataの を呼んでいる。「Url.RouteUrl @(新しい{アクション= "インデックス"、コントローラ= "Sakila"}) ' –

+0

。お返事をありがとうございます。私はすでに試しましたが、うまくいきません。 –

答えて

1

私は何を考え出したことは、あなたのブラウザがするJsonResultを返すこと、Aの方法である 'shakila /インデックス' を当たっていますさ。したがって、ブラウザ経由でJSONオブジェクトを取得する必要があります。

あなたはこの質問には言及していない方法であるURL as'Index /てSakila」を使用しています。(私はそれが存在しないかではありません知らない)私は希望の上に基づいて

あなたJqgridコードで

それぞれのリクエストに適切なURLを使用するように提案しています。 ブラウザーのURLは、ブラウザーでページを表示するためにビューを返すコンローラーメソッドに当たって、Jqgridは適切なJsonResultメソッドを呼び出して適切に値を設定する必要があります(0120)。コードサンプル

JS

$("#grid").jqGrid({ 
     url: 'Sakila/GetData', 
     datatype: "json", 
     contentType: "application/json", 
     colNames: ['actor_id', 'f_name', 'l_name'], 
     colModel: [ 
     { name: 'id', index: 'id', width: 20 }, 
     { name: 'f_name', index: 'f_name', width: 150 }, 
     { name: 'l_name', index: 'l_name', width: 150 } 
     ], 
     rowNum: 10, 
     mtype: "POST", 
     rowList: [10, 20, 30], 
     pager: '#pager', 
     loadonce: false, 
     viewrecords: true, 
     sortorder: "desc", 
     autoencode: true, 
     caption: "Company approval" 
    }); 
    jQuery("#grid").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false }); 

C#

public class SakilaController : Controller 
     { 

      public JsonResult Index() 
      { 
       return view(); 
      } 
      public JsonResult GetData() 
      { 
       List<ActorModel> actormodel = new List<ActorModel>(); 
       using (var context = new sakilaEntities()) 
       { 

        List<actor> b = context.actors.ToList(); 
        actormodel.Add(new ActorModel() 
        {id = 1, 
        f_name = "MS", 
        l_name = "Vivek", 
        last_update = DateTime.Now}); 
       } 
     return Json(actormodel.ToList(), JsonRequestBehavior.AllowGet); 

     } 
    } 

ブラウザは咲を呼び出していますラ/インデックスとJqgridがあなたのjqGridのURLを変更してみMVCのURLパターンが

+0

それを得ました。ありがとうございました。以前はインデックスビューではなくJsonオブジェクトを返していました。 –

関連する問題