Как реализовать jtable в asp.net mvc 4?

Question

я пытался реализовать таблицу JTable и сделал этот шаг:

1- установить его с помощью NuGet Install-Package JTable

2- создать вид этим:

@{ 
    ViewBag.Title = "Index"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<h2>Index</h2> 

<link href="/Scripts/jtable/themes/standard/blue/jtable_blue.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="/Scripts/jtable/external/json2.js"></script> 
<script type="text/javascript" src="~/Scripts/jtable/jquery.jtable.js"></script> 
@*<script src="~/Scripts/jquery-1.9.1.min.js"></script>*@ 
<input id="Load" type="button" value="load" /> 

<div id="PersonTable"> 

</div> 
<script> 
    $(Load).click(function() { 
     debugger; 
     $("#PersonTable").jtable({ 
      title: 'teacherlist', 
      actions: { 
       listAction:'/Teacher/personlist', 
       deleteAction: '/Home/DeletePerson', 
       updateAction: '/Home/UpdatePerson', 
       createAction: '/Home/CreatePerson' 
      }, 
      fields: { 
       Name: { 
        title: 'Name', 
        width: '15%' 
       } 
      } 
     }); 

     $(PersonTable).jtable('load'); 
    }); 
</script> 

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
} 

это мой макет ссылки:

<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
     <script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")"></script> 
     <meta name="viewport" content="width=device-width" /> 
     @Styles.Render("~/Content/css") 
     @Scripts.Render("~/bundles/modernizr") 

но когда я отладки кода JQuery я получать эту ошибку

jTable - Uncaught TypeError: Object [object Object] не имеет метода 'jtable'

Answer 1

Существует несколько проблем с вашим кодом. Я хотел бы начать с помощью ссылки JQuery и JQuery-Ui зависимостей в макете:

... 
    <script type="text/javascript" src="~/scripts/jquery-1.10.2.min.js"></script> 
    <script type="text/javascript" src="~/scripts/jquery-ui-1.9.2.min.js"></script> 
    @RenderSection("scripts", required: false) 
</body> 

, а затем внутри вида, чтобы все скрипты были размещены в соответствующем разделе:

@{ 
    ViewBag.Title = "Index"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<h2>Index</h2> 

<input id="Load" type="button" value="load" /> 

<div id="PersonTable"></div> 

@section Scripts { 
    <link href="~/scripts/jtable/themes/standard/blue/jtable_blue.css" rel="stylesheet" type="text/css" /> 

    @Scripts.Render("~/bundles/jqueryval") 
    <script type="text/javascript" src="~/Scripts/jquery-ui-1.9.2.min.js"></script> 
    <script type="text/javascript" src="/Scripts/jtable/external/json2.js"></script> 
    <script type="text/javascript" src="~/Scripts/jtable/jquery.jtable.js"></script> 
    <script type="text/javascript"> 
     $('#Load').click(function() { 
      debugger; 
      $("#PersonTable").jtable({ 
       title: 'teacherlist', 
       actions: { 
        listAction: '@Url.Action("personlist", "Teacher")', 
        deleteAction: '@Url.Action("DeletePerson", "Home")', 
        updateAction: '@Url.Action("UpdatePerson", "Home")', 
        createAction: '@Url.Action("CreatePerson", "Home")' 
       }, 
       fields: { 
        Name: { 
         title: 'Name', 
         width: '15%' 
        } 
       } 
      }); 

      $('#PersonTable').jtable('load'); 
     }); 
    </script> 
}