ajax returned data not binding with jquery datatable pluging

Reogo

I have a jquery datatable UI that I want to bind with my data returned using an ajax call. The view on which I want to display uses a partial view. On my controller the I return a json type. I can get the data from the ajax call but IE downloads it, intead of binding the data with the jquery datatable UI.

I tried to add the jquery script on both the main view and the partial view but none is working. Any input is much appreciated.

Here is my code on my controller:

[HttpPost]
        public ActionResult Index(LShViewModel model, string Command)
        {
            if (Command == "Search")
            {
                //model.CountryIdSelected = model.CountryID;
                //model.CountryIdSelected = null;
                var results = helper.SearchUsers(model.UserName, model.EmailAddress, model.FirstName, model.LastName,  model.CountryID);
                if (model.SearchRecords == null)
                {
                    model.SearchRecords = new List<SearchUserResult>();
                }

                foreach (var result in results)
                {
                    model.SearchRecords.Add(result);
                }
                //model.SearchRecords = results;

            }
            model.States = new SelectList(helper.ListStates(model.CountryID), "ID", "Name");
            model.Countries = new SelectList(helper.ListCountries(), "ID", "Name");
            model.CountryIdSelected = model.CountryID;

           // jsonResult.maxJsonLength = int.MaxValue;
            return Json(model);


        }

here is the scrip on my index page:

<script>
    $('#search').click(function () {
        $('#searchResults').dataTable({
            "ajax": {
                "url": "/Learner/Index",
                "dataSrc": "",
                "dataType": "json",
                "success": function (data) {
                    $('#searchResults').dataTable({

                        data: data,
                        columns: [

                            { 'data': 'UserName' },
                            { 'data': 'Email' },
                            { 'data': 'FirstName' },
                            { 'data': 'MiddleName' },
                             { 'data': 'LastName' },
                            { 'data': 'Address' },
                            { 'data': 'City' },
                            { 'data': 'StateID' },
                              { 'data': 'PostalCode' },
                            { 'data': 'Phone' },
                             { 'data': '' },


                        ]
                    })
                }
            }
        });

        var table = $('#searchResults').dataTable();
        table.fnClearTable();
        table.fnDraw();
        $.ajax({

            url: '/Learner/Index',
            method: 'post',
            dataType: 'json',
            dataSrc: "",
            success: function (data) {
                $('#searchResults1').dataTable({

                    data: data,
                    columns: [

                        { 'data': 'UserName' },
                        { 'data': 'Email' },
                        { 'data': 'FirstName' },
                        { 'data': 'MiddleName' },
                         { 'data': 'LastName' },
                        { 'data': 'Address' },
                        { 'data': 'City' },
                        { 'data': 'StateID' },
                          { 'data': 'PostalCode' },
                        { 'data': 'Phone' },
                         { 'data': '' },


                    ]

                });
            }


        });



    })
</script>

here is my partial view:

```

Search Results

<div class="col-md-12">
    <table id="searchResults" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            @*<th> Select</th>*@
            <th>Username</th>
            <th>Email</th>
            <th>First Name</th>
            <th>MI</th>
            <th>Last Name</th>
            <th>Address</th>
            <th>City</th>
            <th>State</th>
            <th>Zip</th>
            <th>Phone</th>
            <th></th>
            @*<th>CE Type</th>*@
        </tr>
    </thead>
    <tbody>
        @{
            for (var i=0; i < Model.SearchRecords.Count; i++)
            {
                <tr>
                    <td>
                        @*@Html.CheckBox("Select")*@
                        @Model.SearchRecords[i].UserName
                        @Html.HiddenFor(modelItem => Model.SearchRecords[i].CountryID)
                        @Html.HiddenFor(modelItem => Model.SearchRecords[i].CountryCode)
                        @Html.HiddenFor(modelItem => Model.SearchRecords[i].PersonID)
                        @Html.HiddenFor(modelItem => Model.SearchRecords[i].Email)
                        @Html.HiddenFor(modelItem => Model.SearchRecords[i].FirstName)
                        @Html.HiddenFor(modelItem => Model.SearchRecords[i].MiddleName)
                        @Html.HiddenFor(modelItem => Model.SearchRecords[i].LastName)
                        @Html.HiddenFor(modelItem => Model.SearchRecords[i].Address)
                        @Html.HiddenFor(modelItem => Model.SearchRecords[i].City)
                        @Html.HiddenFor(modelItem => Model.SearchRecords[i].UserName)
                        @Html.HiddenFor(modelItem => Model.SearchRecords[i].PostalCode)
                        @Html.HiddenFor(modelItem => Model.SearchRecords[i].Phone) 
                        @*@Html.HiddenFor(modelItem => Model.SearchRecords[i].ACPEID)
                        @Html.HiddenFor(modelItem => Model.SearchRecords[i].AAVSBID)*@
                        @*@Html.HiddenFor(modelItem => Model.SearchRecords[i].CH)*@




                        @*@Html.HiddenFor(modelItem => Model.SearchRecords[i].PhysicianTypeID)*@
                    </td>
                    <td>@Model.SearchRecords[i].Email</td>
                    <td>@Model.SearchRecords[i].FirstName</td>
                    <td>@Model.SearchRecords[i].MiddleName</td>
                    <td>@Model.SearchRecords[i].LastName</td>
                    <td>@Model.SearchRecords[i].Address</td>
                    <td>@Model.SearchRecords[i].City</td>
                    <td>@Model.SearchRecords[i].StateCode</td>
                    <td>@Model.SearchRecords[i].PostalCode</td>

                    @if (Model.SearchRecords[i].Phone != "INVALID")
                    {
                         <td>@Model.SearchRecords[i].Phone</td>
                    }

                     @if (Model.SearchRecords[i].Phone == "INVALID")
                    {
                         <td> <text></text></td>
                    }

                    <td>
                        <div class="dropdown">
                            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
                                Manage

                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="@Url.Action("ViewProfile1", "Learner", new { personid=Model.SearchRecords[i].PersonID})">View Profile</a></li>                                        

                            </ul>
                        </div>
                    </td>
                </tr>
            }
        }
    </tbody>
    </table>
</div>

```