Ajax zurückgegebene Daten nicht verbindlich mit Jquery Datatable-Plugin

Question

Ich habe eine Jquery Database UT, die ich mit meinen Daten mit einem AJAX-Aufruf zurückgegeben werden soll. Die Ansicht, auf der ich anzeigen möchte, verwendet eine Teilansicht. Auf meinem Controller gebe ich einen JSON-Typ zurück. Ich kann die Daten vom Ajax-Aufruf erhalten, aber IE lädt sie herunter, um die Daten mit der Jquery-Datatable-Benutzeroberfläche zu binden.

Ich habe versucht, das Jquery-Skript sowohl in der Hauptansicht als auch in der Teilansicht hinzuzufügen, aber keine funktioniert.

Hier ist mein Code auf meinem 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); 
     } 

hier The Script auf meiner Index-Seite ist:

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

hier ist meine Teilansicht:

<div class="col-md-12"> 
     <h4>Search Results</h4> 
    </div> 
    <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> 

Answer 1

Ich habe erstellt eine Teilansicht, die beim Klicken auf eine Schaltfläche auf der Startseite geöffnet wird. Ich habe Datentabelle in Teilansicht hinzugefügt. Bitte überprüfen Sie den folgenden Code.

Index.cshtml

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
    <script src="http://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 

    <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
    <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"> 
    <script type="text/javascript"> 
     $(function() { 
      $('#showDatatable').click(function() { 
       $("#partialViewDiv").html(''); 
       var request = $.ajax({ 
        url: "Learner/GetPartialView", 
        method: "POST", 
        dataType: "html" 
       }); 
       request.done(function (msg) { 
        $("#partialViewDiv").html(msg); 
        $("#partialViewDiv").dialog({ 
         height: 400, 
         resizable: false, 
         width: 800, 
         title: "Search" 
        }); 
        createDatatableGrid(); 
       }); 
      }); 

      function createDatatableGrid() { 
       $('#searchResults').dataTable({ 
        bFilter: false, 
        bLengthChange: false, 
        "sDom": 'lfrtip', 
        pagingType: 'full', 
        "oLanguage": { 
         "oPaginate": { 
          "sFirst": "<b><<</b>", 
          "sLast": "<b>>></b>", 
          "sNext": "<b>></b>", 
          "sPrevious": "<b><</b>" 
         } 
        } 
       }); 
      } 
      createDatatableGrid(); 
     }); 
    </script> 

</head> 
<body> 
    <button id="showDatatable" type="button">Show Datatable</button> 
    <div id="partialViewDiv"></div> 
</body> 
</html> 

LearnerController

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using MvcApplication1.Models; 

namespace MvcApplication1.Controllers 
{ 
    public class LearnerController : Controller 
    { 
     // 
     // GET: /Learner/ 

     public ActionResult GetPartialView() 
     { 
      return PartialView("Partial1"); 
     } 

     public JsonResult Index() 
     { 
      List<User> user = new List<User>(); 
      user.Add(new User() 
      { 
       Username = "User1", 
       Email ="user1@u.com", 
       FirstName = "FirstName1", 
       MI = "MI1", 
       LastName = "LastName1", 
       Address = "Address1", 
       City = "City1", 
       State = "State1", 
       Zip = "Zip1", 
       Phone = "Phone1", 
      }); 

      return Json(user, JsonRequestBehavior.AllowGet); 
     } 

    } 
} 

Partial1.cshtml

<script type="text/javascript"> 
     $(document).ready(function() { 
      $.ajax({ 
       type: "POST", 
       url: "Learner/Index", 
       dataType: "json", 
       success: function (values) { 
        $('#searchResults').dataTable().fnClearTable(); 
        for (var i = 0; i < values.length; i++) { 
         var user = values[0]; 
         $('#searchResults').dataTable().fnAddData([ 
           user.Username, 
           user.Email, 
           user.FirstName, 
           user.MI, 
           user.LastName, 
           user.Address, 
           user.City, 
           user.State, 
           user.Zip, 
           user.Phone, 
           "" 
         ]); 
        } 
       }, 
       error: function (err) { 
        console.log(err); 
       } 
      }); 
     }); 
    </script> 
    <div class="col-md-12"> 
     <h4>Search Results</h4> 
    </div> 
    <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> 
       </tr> 
      </thead> 
      <tbody> 
      </tbody> 
     </table> 
    </div> 

**User Model** 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 

namespace MvcApplication1.Models 
{ 
    public class User 
    { 
     public string Username { get; set; } 
     public string Email { get; set; } 
     public string FirstName { get; set; } 
     public string MI { get; set; } 
     public string LastName { get; set; } 
     public string City { get; set; } 
     public string State { get; set; } 
     public string Zip { get; set; } 
     public string Phone { get; set; } 
     public string Address { get; set; } 
    } 
} 

I ha Dieses Beispiel wurde in der MVC4-Anwendung erstellt.