unable to load jqgird in MVC 4

See more:

MVC

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();
            }
        }
    }
}