JQuery autocomplete + Asp.net MVC

Question

J'utilise le plugin JQuery Autocomplete dans mon projet Asp.net MVC. Jusqu'à présent, je renvoie une liste de chaînes à partir de ma méthode de recherche et ces chaînes sont affichées correctement.

À mon avis:

<script type="text/javascript"> 
    $(function() { 
    $("#search").autocomplete({ 
    source: '<%: Url.Action("Search") %>', 
    minLength: 1 
    }); 
    }); 
</script> 

Controller:

public JsonResult Search(string term) 
{ 
    //search Code here ... 
    var dt = ....; 
    var result = new List<string>(); 
    //search Code returns a DataTable, which I convert into a List<string> 

    for (int i = 0; i < dt.Rows.Count; i++) 
    { 
     result.Add(...); 
    } 

    //return List<string> to the autocomplete plugin 
    return Json(result, JsonRequestBehavior.AllowGet); 
} 

Je me demande s'il est possible de retourner un objet DataTable et afficher le DataTable dans un tableau HTML. Ou est-il possible de retourner un tableau HTML? Est-ce que quelqu'un a essayé quelque chose comme ça?

Merci beaucoup

Jaspis

Answer 1

Vous pourriez jeter un oeil à l'échantillon custom data and display.

Answer 2

Étape 1: Obtenir Web Api Prêt

permet de créer d'abord une méthode api web qui renverra une liste d'article (Artistes) en utilisant le terme de recherche requête envoyé par la zone de texte de saisie semi-automatique. Dans ce post, je n'utilise pas de base de données, mais je vais utiliser List pour garder cet exemple aussi simple que possible.

est en dessous de la façon dont j'ai défini ma classe d'artiste

public class Artist 
{ 
    public int Id { get; set; } 
    public int Name { get; set; } 
}  

Ensuite, j'ai créé une méthode Web Api GET qui utilisera le terme de recherche est entré dans la zone de texte de saisie semi-automatique et avec un peu d'aide de LINQ sera renvoie une liste de résultats correspondants.

using System.Collections.Generic; 
using System.Linq; 
using System.Web.Http; 

namespace Autocomplete.Controllers 
{ 
    public class ArtistApiController : ApiController 
    { 

     public List<Artist> ArtistList = new List<Artist> 
     { 
      new Artist{Id = 1, Name = "Sonu Nigam"}, 
      new Artist{Id = 2, Name = "Sunidhi Chauhan"}, 
      new Artist{Id = 3, Name = "Shreya Goshal"}, 
      new Artist{Id = 4, Name = "Mohit Chauhan"}, 
      new Artist{Id = 5, Name = "Nihkil Dsouza"}, 
      new Artist{Id = 6, Name = "Kailash Kher"}, 
      new Artist{Id = 7, Name = "Atif Aslam"}, 
      new Artist{Id = 8, Name = "Ali Zafar"}, 
      new Artist{Id = 9, Name = "Shafaqat Ali"}, 
      new Artist{Id = 10, Name = "Shankar Madahevan"} 
     }; 


     // GET api/values 
     public IEnumerable<Artist> Get(string query) 
     { 
      return ArtistList.Where(m => m.Name.Contains(query)).ToList(); 
     } 
    } 
} 

Notre code côté serveur est prêt! Il est temps de le tester.

Étape 2: code côté client

Inclure jquery-ui.js et jquery.ui.css dans votre html

<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js" ></script> 
<script type="text/javascript" src="~/Scripts/jquery-ui-1.8.20.min.js" ></script> 
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" /> 

<div id="body"> 
    <label for="autocomplete-textbox">Search : </label> 
    <input type="text" id="autocomplete-textbox" /> 
</div> 

<script type="text/javascript"> 
$(document).ready(function(){ 
$('#autocomplete-textbox').autocomplete({ 
    source: function (request, response) { 
     // prepare url : for example '/api/artistapi?query=sonu 
     var autocompleteUrl = '/api/artistapi' + '?query=' + request.term; 
     $.ajax({ 
      url: autocompleteUrl, 
      type: 'GET', 
      cache: false, 
      dataType: 'json', 
      success: function (json) { 
       // call autocomplete callback method with results 
       response($.map(json, function (data, id) { 
        return { 
         label: data.Name, 
         value: data.Id 
        }; 
       })); 
      }, 
      error: function (xmlHttpRequest, textStatus, errorThrown) { 
       console.log('some error occured', textStatus, errorThrown); 
      } 
     }); 
    }, 
    minLength: 2, 
    select: function (event, ui) { 
     alert('you have selected ' + ui.item.label + ' ID: ' + ui.item.value); 
     $('#autocomplete-textbox').val(ui.item.label); 
     return false; 
    } 
}); 
}); 
</script> 

Une chose à noter ici est que à l'intérieur de la méthode de succès, j'ai utilisé le code suivant:

response($.map(json, function (data, id) { 
    return { 
     label: data.Name, 
     value: data.Id 
    }; 
})); 

data.ID et data.Name est utilisé parce que dans la réponse ajax (comme indiqué ci-dessous) les données sont retournées dans ce format.

Etape 3: Test & Sortie:

Taken de here