Création de plusieurs divisions masquées dans ASP.Net | Ajax | JQuery

Question

Je suis un peu nouveau dans la programmation Web,
Je suis en train de concevoir une page de recherche. Je veux créer quelques boutons radio où chaque clic sur un bouton radio montrera un div contient les divs de recherche connexes. et à partir de là pour faire la requête à la base de données (non liée à la poste)

comment puis-je faire cela? essayé de le chercher, et n'a pas obtenu de bonne réponse. Je veux que le changement de la page sera du côté serveur et non du côté client. p.s. J'ai travaillé avec le kit de contrôle ajax jusqu'à présent ..

merci pour l'aide.

Answer 1

Vous avez juste besoin d'un UpdatePanel, de boutons radio et d'un contrôle MultiView.

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
<ContentTemplate> 
<div> 
<asp:RadioButton ... 
<asp:RadioButton ... 
</div> 
<asp:MultiView ID="mvAll" runat="server" ActiveViewIndex="-1"> 
<asp:View ID="vwFirst" runat="server"> 
</asp:View> 
<asp:View ID="vwSecond" runat="server"> 
</asp:View> 
... 
</asp:MultiView> 
</ContentTemplate> 
</asp:UpdatePanel> 

Lorsque le bouton radio sélectionné vous a changé juste la vue de définir lié à être actif,

mvAll.SetActiveView(ViewIDYouNeed); 

Answer 2

Vous pouvez y arriver avec des panneaux et un panneau de mise à jour.

<asp:RadioButton ID="rdo1" AutoPostBack="true" GroupName="radios" runat="server" OnCheckedChanged="ShowDivs" /> 
<asp:RadioButton ID="rdo2" AutoPostBack="true" GroupName="radio2" runat="server" OnCheckedChanged="ShowDivs" /> 

<asp:UpdatePanel runat="server" UpdateMode="Conditional"> 
<ContentTemplate> 
    <asp:Panel ID="pnl1" runat="server" Visible="false"></asp:Panel> 
    <asp:Panel ID="pnl2" runat="server" Visible="false"></asp:Panel> 
</ContentTemplate> 
<Triggers> 
    <asp:AsyncPostBackTrigger ControlID="rdo1" /> 
    <asp:AsyncPostBackTrigger ControlID="rdo2" /> 
</Triggers> 
</asp:UpdatePanel> 

Vous devez ensuite gérer la définition de la propriété Visible des panneaux de votre méthode ShowDivs dans votre code.

Ou, vous pouvez utiliser jquery/javascript pour accomplir ceci.

<input type="radio" onClick="ShowDiv(1)" /> 

function ShowDiv(id) { 
HideDivs(); 
$(id).show('slow'); 
}