json - Encapsulate JavaScript completely in partial view (jQuery Widgets/ASP.NET MVC example) -

json - Encapsulate JavaScript completely in partial view (jQuery Widgets/ASP.NET MVC example) -

i've started using jquery widgets , want populate datatable json data. code:

<script type="text/javascript"> $(document).ready(function () { // prepare info 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>

this json looks like:

[ { "title": "tree fungus id: inonotus dryadeus", "text": "ref: 204201/252874\r\nthe fruiting bodies of fungus called inonotus dryadeus. oak mutual host of fungus, can cause decay of inner parts of root scheme , base of operations of trunk.\r\n\r\nwhilst fungus can cause extensive decay, effect on tree can variable. trees survive many years or indefinitely - although central roots , wood may decay hollow tree remains live , standing on 'stilts' of buttress roots. however, if decay affects these roots there risk of tree falling. in case such recommend having tree examined in situ arboricultural consultant, particularly if there risk of injury or harm property should tree fall. consultant able check location , extent of decay, , recommend appropriate remedial action (such crown reduction).\r\n\r\nthe link below takes our web profile on bracket fungi. not mention inonotus dryadeus specifically, gives contact details arboricultural association able provide list of suitably-qualified consultants operating in area. \r\n\r\nhttp://apps.rhs.org.uk/advicesearch/profile.aspx?pid=98\r\ni hope info helpful.\r\nyours sincerely, \r\njohn scrace\r\nplant pathologist", "id": 6 } ]

finally console window of dataadapter:

what doing wrong?

this reply running problems using kind of jquery library partial views in asp.net mvc.

my problem has been want encapsulate widget logic in partial view. don't want write javascript in parent view write html in partial view.

my parent view - index.cshtml

@{ 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>

only reference partial views html.actions homecoming html within divs.

my partial view

#region partial views [httpget] public actionresult _newswidget() { viewbag.startupscript = "inittable();"; homecoming view("~/partialviews/news/_newswidget.cshtml"); } #endregion

i utilize viewbag way of injecting javascript initialise script.

partial view

<script> function getnewsitems(url) { homecoming $.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>

once has loaded, fire start script last.

using can encapsulate logic within partial view.

jquery json asp.net-mvc-5 jquery-widgets