2009-10-18 9 views
8

J'ai 3 listes déroulantes pour le pays, l'état et le métro. Je veux lorsque l'utilisateur seclect Pays puis État dropdownlist remplir Jquery et quand sélectionnez Sate puis Metro dropdownlist remplissage (comme en cascade dropdownlist de ajax) .Ces processus que je veux faire avec JQuery.Lier DropDownlists avec JQuery dans Asp.Net

Répondre

10

Je vais le décrire dans ASP.NET MVC, mais la même chose peut être réalisée si vous écrivez un service web ASP.NET ou juste mettez quelques méthodes de page dans votre code pour faire la même chose - vous ' ll aura aussi besoin d'un sérialiseur JSON, soit une solution tierce soit celle de WCF.

En utilisant MVC, d'abord, nous allons avoir trois actions de contrôleur - un pour afficher la page, les pays seront statiques, et deux pour les Etats et les metros respectivement:

public ActionResult Index() 
{ 
    ViewData["Countries"] = _countryRepository.GetList(); 
    return View(); 
} 

public ActionResult States(string countryCode) 
{ 
    var states = _stateRepository.GetList(countryCode); 
    return Json(states); 
} 

public ActionResult Metros(string countryCode, string state) 
{ 
    var metros = _metroRepository.GetList(countryCode, state); 
    return Json(metros); 
} 

Dans la vue, vous avez trois DropDownLists, on est lié à la ViewData [ « pays »] objet, que c'est nommé pays, vous pouvez obtenir les états dans jQuery avec un appel Ajax comme celui-ci:

$('#Countries').change(function() { 
    var val = $(this).val(); 
    $states = $('#States'); 
    $.ajax({ 
     url: '<%= Url.Action('States') %>', 
     dataType: 'json', 
     data: { countryCode: val }, 
     success: function(states) { 
      $.each(states, function(i, state) { 
       $states.append('<option value="' + state.Abbr+ '">' + state.Name + '</option>'); 
      }); 
     }, 
     error: function() { 
      alert('Failed to retrieve states.'); 
     } 
    }); 
}); 

le métros baisse serait bas remplir analogiquement, passer à la fois le pays et la sélection de l'état au serveur un d récupérer un objet JSON avec un tableau de zones métropolitaines.

J'ai omis les détails de l'implémentation du référentiel, il suffit de remplir la variable de résultat sur le serveur avec une collection d'états/zones métropolitaines d'une manière ou d'une autre. J'ai également fait l'hypothèse que la classe d'état aurait deux propriétés - Abbr (par exemple, 'CA') et Name (par exemple, Californie). J'espère que cela vous aide de quelque façon que ce soit, ou du moins vous dirige vers la solution.

+1

merci beaucoup, travaille pour moi aussi! a dû mettre un Michel

+0

Oh, je ne l'ai pas remarqué! Merci, j'ai édité ma réponse. –

+0

Une note, sinon l'analyse de 'json' et le retour de quelque chose comme' List ', j'ai dû utiliser' states.d' sinon les propriétés étaient toujours indéfinies. – atconway

Questions connexes