JQuery: RadioButton GroupBox s použitím objektu Repeater

V klasickém ASP.Net je objekt RadioButtonList. Možnosti tohoto objektu jsou však omezené. Mým cílem bylo zobrazení seznamu voleb spolu se zobrazením obrázku, textu a to vše plně formátovatelné pomocí css.

Možným řešením je použití asp.net objektu Repeater, pokud ovšem nepoužíváte něco z placených balíčků. I tady to má háček, jelikož při použití Repeater a RadioButton dochází k modifikaci id jednotlivých RadioButton a tím nefunguje grupování. Tedy zaručení výběru jedné volby. Toto se dá však obejít implementací javascriptu, který lze nalézt zde a to včetně detailního popisu implementace. Ale touto cestou jsem se nevydal, zvolil jsem trochu jiné řešení.

V Repeater jsem namísto serverového objektu RadioButton použil prímo Html tag INPUT s nastavením typu na Radio.

<input type="radio" name="rbPaymentMethods" value="<%# DataBinder.Eval(Container.DataItem,"Id")%>" />

Tímto jsem si však zamezil možnost čtení hodnoty o právě zvolené volbě, jelikož se nejedná o serverový objekt. A proto jsem si na stránku přidal skrytý element. Jedná se o serverový element, takže jeho hodnota jde přečíst po postbaku.

<asp:Repeater ID="rptProviders" runat="server">
<ItemTemplate>
<div class="providerBox">
<div class="providerSelector">
<input type="radio" name="rbPaymentMethods" value="<%# DataBinder.Eval(Container.DataItem,"Id")%>" />
</div>
<div class="providerLogo">
<img src="<%=Page.ResolveUrl("~/Controls/ImageHandler.ashx") %>?Id=<%# DataBinder.Eval(Container.DataItem, "Id")%>&Source=Payment&Type=jpeg"
width="100px" height="40px" alt="<%# DataBinder.Eval(Container.DataItem, "ProviderName")%>" />
</div>
<div class="providerName">
<a href="<%# DataBinder.Eval(Container.DataItem, "Url")%>" title="<%# DataBinder.Eval(Container.DataItem, "Description") %>">
<%#DataBinder.Eval(Container.DataItem, "ProviderName")%>
</a> - <%#DataBinder.Eval(Container.DataItem, "Description")%>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
<asp:HiddenField ID="hdnSelectedProvider" Value="1" runat="server" />

Do tohoto elementu pomocí javascriptu, přesněji pomocí JQuery ukládám uživatelem vybranou volbu.

var providerChecked = "input[name='rbPaymentMethods']:checked";
var hiddenSelected = "input[id*='hdnSelectedProvider']";

$(provider).click(function(){
var var_name = $(providerChecked).val();
SetSelected(var_name);
});

function SetSelected(selected){
$(hiddenSelected).val(selected);
}

A tady je to v reálu na obrázku.

A jeden tip na rámeček kolem vašeho nového objektu pomocí použití html elementu Fieldset.

<fieldset class="box">
<legend class="providerBoxLegend">
<asp:Literal ID="Literal1" runat="server">Please select payment provider you want to use</asp:Literal>
</legend>
<asp:Repeater ID="rptProviders" runat="server">
...
</asp:Repeater>
</fieldset>