How to show JSON data in Jquery DataTables using “Ajax source

User655436493 posted


I have a view in which user will select the dropdown and hits the button to get the data. I need to show this data in Jquery Datatables.

How can i get the data to show it in DataTable. This is my below sample JSON data coming from my request in Controller.

{“Status”:true,”ErrorCode”:0,”TimeStamp”:”/Date(1311951697070)/”,”Messages”:[“Total 2 user(s) returned.”],







Here is my code for Contrioller and View:

        public JsonResult Index(RoleViewModel role)
            var rolecode = role.RoleCode;
            if (rolecode == "all")
                rolecode = string.Empty;
            if (!ModelState.IsValid)
                return Json("Invalid");
            WebRequest request = WebRequest.Create(""+rolecode);
            request.Method = "GET";
            //Basic Http Authentication
            string username = "test";
            string pwd = "CEE589B1-C438-4673-94F6-FB3E6D4634D2";
            string authInfo = username + ":" + pwd;
            authInfo = Convert.ToBase64String(Encoding.Default.GetBytes(authInfo));
            request.Headers["Authorization"] = "Basic " + authInfo;
            WebResponse response = request.GetResponse();
            // Get the stream containing content returned by the server.
            Stream dataStream = response.GetResponseStream();
            // Open the stream using a StreamReader for easy access.
            StreamReader reader = new StreamReader(dataStream);
            // Read the content.
            string responseFromServer = reader.ReadToEnd();
            ViewBag.Response = responseFromServer;
            return Json(responseFromServer, JsonRequestBehavior.AllowGet);


@model DirectAccess.Models.RoleViewModel
    ViewBag.Title = "UserInfo";
@using (Html.BeginForm("Index""UserInfo"FormMethod.Post, new { id="UserInfo"}))
        Get User Information:</h2>
    <br />
    <br />
    <div id="Role">
            Select User Role</h2>
        <br />
        <label id="viewbag">@ViewBag.Response</label>
        <br />
        <br />
        @Html.LabelFor(m => m.RoleCode):
        @Html.DropDownListFor(m => m.RoleCode, new SelectList(new DirectAccess.Models.RoleViewModel().GetRoles(), "Value""RoleCode"), "Select")
        @Html.ValidationMessageFor(m => m.RoleCode)
        <input type="submit" id="GetUserBtn" value="Get Users" />
        <table id="mytable">                   
        <script type="text/javascript">
            $(function () {
                $("#GetUserBtn").click(function (e) {
                    var postUrl = $("#UserInfo").attr("action");
                    var roleCode = $("#RoleCode").val();
                    $.post(postUrl, { "roleCode": roleCode }, function (data) {
                        data = $.parseJSON(data);
                            "aaData": data,
                            "aoColumns": [{ "mDataProp""UserName" }, { "mDataProp""Email"}]
                    return false;



Read more here: Source link