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

Question

I've started using jQuery Widgets and I want to populate a DataTable with JSON data. This is my code:

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

This is what my JSON looks like:

[
    {
        "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
    }
]

Finally my console window of dataAdapter:

What am I doing wrong?

Answer 1

This is my answer for anybody who is running into problems with using any kind of jQuery library with Partial Views in asp.net mvc.

My problem has been that I want to encapsulate all my widget logic in a partial view. I don't want to write my JavaScript for it in the parent view but then write the HTML in the 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 to partial views are the Html.Actions that will return HTML inside those divs.

My partial view

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

I use ViewBag as a way of injecting javascript to initialise my script.

Partial view

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

Once everything has loaded, I fire up the start up script last.

Using this you can encapsulate all your logic within a partial view.