Question

jQuery 위젯을 사용하기 시작했으며 JSON 데이터로 DataTable을 채 웁니다. 이건 내 코드입니다 :

<script type="text/javascript"> 
    $(document).ready(function() { 
     // prepare the data 
     var url = '@Url.Action("AjaxGetNewsItems", "News")'; 
     console.log(url); 

     var source = 
     { 
      dataType: "json", 
      dataFields: [ 
       { name: 'title'}, 
       { name: 'text'}, 
       { name: 'id'} 
      ], 
      url: 'News/AjaxGetNewsItems' 
      //id: 'id' 
     }; 
     var dataAdapter = new $.jqx.dataAdapter(source); 

     console.log(dataAdapter); 

     $("#dataTable").jqxDataTable(
     { 
      width: 850, 
      source: dataAdapter, 
      theme: 'arctic', 
      pageSize: 5, 
      sortable: true, 
      filterable: true, 
      pageable: true, 
      columns: [ 
       { text: 'title', dataField: 'title', width: 300 }, 
       { text: 'text', dataField: 'text', width: 200 }, 
       { text: 'id', dataField: 'id', width: 200 } 
      ] 
     }); 
    }); 
</script> 


<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;overflow: display; padding-top: 20px;"> 
    <div id="dataTable"> 
    </div> 
</div> 

이 내 JSON 보이는 것입니다 같은 : 데이터 어댑터의

[ 
    { 
     "title": "Tree fungus ID: Inonotus dryadeus", 
     "text": "Ref: 204201/252874\r\nThe fruiting bodies are those of a fungus called Inonotus dryadeus. Oak is the most common host of this fungus, which can often cause decay of the inner parts of the root system and the base of the trunk.\r\n\r\nWhilst the fungus can cause extensive decay, the effect on the tree itself can be very variable. Some trees will survive for many years or even indefinitely - although the central roots and wood may decay the hollow tree remains alive and standing on 'stilts' of buttress roots. However, if the decay also affects these roots then there is a risk of the tree falling. In a case such as this we would always recommend having the tree examined in situ by an arboricultural consultant, particularly if there is any risk of injury or damage to property should the tree fall. The consultant will be able to check the location and extent of the decay, and recommend any appropriate remedial action (such as crown reduction).\r\n\r\nThe link below takes you to our web profile on bracket fungi. This does not mention Inonotus dryadeus specifically, but gives the contact details for the Arboricultural Association who will be able to provide you with a list of suitably-qualified consultants operating in your area. \r\n\r\nhttp://apps.rhs.org.uk/advicesearch/Profile.aspx?pid=98\r\nI hope this information is helpful.\r\nYours sincerely, \r\nJohn Scrace\r\nPlant Pathologist", 
     "id": 6 
    } 
] 

마지막으로 내 콘솔 창 :

무엇 오전 내가 잘못하고있어?

Answer 1

이것은 asp.net mvc에서 Partial Views와 함께 jQuery 라이브러리를 사용하는 데 문제가있는 사람을위한 나의 대답입니다.

제 문제는 부분적으로 모든 위젯 논리를 캡슐화하려는 것입니다. 부모 뷰에 자바 스크립트를 작성한 다음 부분 뷰에 HTML을 작성하고 싶지 않습니다.

내 부모보기 - 부분적인 전망에

@{ 
    ViewBag.Title = "Index"; 
} 


<script type="text/javascript"> 
    $(document).ready(function() { 
     //$('#docking').jqxDocking({ orientation: 'horizontal', width: 800, mode: 'docked' }); 
     $('#docking').jqxDocking({ mode: 'docked' }); 
     $('#docking').jqxDocking('disableWindowResize', 'window1'); 
     $('#docking').jqxDocking('disableWindowResize', 'window2'); 

     //$('#calendar').jqxCalendar({ width: 180, height: 180 }); 
     //$('#newsTbs').jqxTabs({ width: 375, height: 181, selectedItem: 1 }); 
     //$('#listbox').jqxListBox({ source: source, width: 375, height: 181 }); 
     //$('#zodiak').jqxPanel({ width: 375, height: 180 }); 
    }); 
</script> 


    <div id="docking" style="width:100%"> 
      <div id="window1" style="width: 35%; padding:20px;"> 
       <!-- Partial view --> 
       @Html.Action("_NewsWidget", "News") 
      </div> 
      <div id="window2" style="width: 65%;"> 
       <!-- Partial view --> 
       @Html.Action("_ShortcutsWidget", "Dashboard") 
      </div> 
    </div> 

만 참조 index.cshtml 그 div의 내부 HTML을 반환합니다 Html.Actions 있습니다.

내 부분보기

#region Partial Views 
     [HttpGet] 
     public ActionResult _NewsWidget() 
     { 
      ViewBag.StartupScript = "initTable();"; 
      return View("~/PartialViews/News/_NewsWidget.cshtml"); 
     } 
     #endregion 

내 스크립트를 초기화하는 자바 스크립트를 주입하는 방법으로 ViewBag를 사용합니다.

부분보기

<script> 
    function getNewsItems(url) { 
     return $.ajax({ 
      type: "GET", 
      url: url, 
      contentType: "application/json; charset=utf-8", 
      success: function (data) { 
      }, 
      error: function (data) { 
      } 
     }); 
    } 

    function bindData(data) { 
     console.log(data); 
     var source = 
     { 
      dataType: "json", 
      dataFields: [ 
       { name: 'title', type: 'string' }, 
       { name: 'text', type: 'string' }, 
       { name: 'id', type: 'int' } 
      ], 
      localData: data, 
     }; 
     var dataAdapter = new $.jqx.dataAdapter(source); 

     $("#dataTable").jqxDataTable(
     { 
      source: dataAdapter, 
      showHeader: true, 
      autoRowHeight: false, 
      columns: [ 
       { text: 'Title', dataField: 'title', width: 300 }, 
       { text: 'Body Text', dataField: 'text', width: 200 }, 
       { text: 'ID', dataField: 'id', width: 200 } 
      ] 
     }); 
    } 

    function initTable() { 
     var url = '@Url.Action("AjaxGetNewsItems", "News")'; 
     getNewsItems(url).done(bindData); 
    } 
</script> 


    <div id="dataTable"> 
    </div> 


<script type="text/javascript" defer="defer"> 
    @Html.Raw(ViewBag.StartupScript) 
</script> 

모든 것이로드되면, 내가 시작 스크립트를 마지막 불.

이것을 사용하면 모든 로직을 부분 뷰 내에 캡슐화 할 수 있습니다.