Best way to display a group/selection of radiobuttons from the choice of a single radiobutton?

I have a form which for some questions would ask if something was included and if it isn't to supply a reason.

So I need a radio button which records to the database it's value like normal which I have setup with a RadioButtonFor and if "No"(false) is selected then a group/list of other radiobuttons will display.

Ofc this is just the ideal solution if this method i开发者_开发百科sn't feasible then another solution would be to maybe a if statement in the controller so that if that main radiobutton has a value of "Yes"(true) then it would set the values of x, y and z radiobuttons to "No"(false) when it records the form to the database.

These are the 2 ideas I have on how to get the same end result but for the 1st idea I think the easiest way to perform it's function would be in jquery which I'm fairly new at so would struggle to come up with how to do it

For the 2nd idea it's 1 not ideal and 2 I'm not sure how I would then reference those radiobuttons/code the if statement to do said task.

Any other ideas would also be welcome but hopefully with help on how to implement them.

Well, this may sound overkill, but I would go with both solutions. You need the javascript script side code to do it right from a presentation standpoint - and you need the server-side code to do the validation right too.

If you implement only the client-side validation, how the system will behave if a browser has no support to javascript, or if it is just disabled? You cannot take javascript support for granted...

OTOH, you would offer a best user experience if you added that client-side functionality you're talking about...

And about your doubt of how to do the server-side validation: that's easy with ASP.NET MVC - on load, just set the same ViewData entry/ViewModel property that you have read during post.

Edit So let's talk about a complete solution.

Again, I'm not sure I understood what you need here. You're talking about radiobuttons, but you also seem to think you'll be able to control them individually (many radios binding to many fields). That's not usually the case - a group of radiobuttons is normally bound to the same field, with each radiobutton meaning a different value (so exactly like a single dropdown list). Of course, that does not mean your database must behave in the same way...

See this example:

<% using(Html.BeginForm("HandleForm", "Home")) { %>
    Select your favorite color:<br />
    <%= Html.RadioButton("favColor", "Blue", true, new { id = "rbColorBlue", class = "favColor" }) %> Blue <br />
    <%= Html.RadioButton("favColor", "Purple", false, new { id = "rbColorPurple", class = "favColor" })%> Purple <br />
    <%= Html.RadioButton("favColor", "Red", false, new { id = "rbColorRed", class = "favColor" })%> Red <br />
    <%= Html.RadioButton("favColor", "Orange", false, new { id = "rbColorOrange", class = "favColor" })%> Orange <br />
    <%= Html.RadioButton("favColor", "Yellow", false, new { id = "rbColorYellow", class = "favColor" })%> Yellow <br />
    <%= Html.RadioButton("favColor", "Brown", false, new { id = "rbColorBrown", class = "favColor" })%> Brown <br />
    <%= Html.RadioButton("favColor", "Green", false, new { id = "rbColorGreen", class = "favColor" })%> Green
    <%= Html.RadioButton("favColor", "Other", false, new { id = "rbColorOther", class = "favColor" })%> Other
    <div id="divOtherColorText" style="display: block">
         Describe the color you want here:<br />
         <%=Html.TextArea("otherColorText", new { id = "taOtherColor" }) %><br />
    </div>
<% } %>

This will bound to a single controller parameter, favColor, with a default value of "Blue". See that, for convenience, we're assigning a distinct client-side id for each radiobutton (rbColorBlue, rbColorGreen and so forth). That means that you'll be able to treat each radiobutton individually in your jQuery code, even if they represent a single value to the server-side controller.

Talking about the server-side code, that's how the action will look like:

public class HomeController : Controller
{
    public ActionResult HandleForm(string favColor, string otherColorText)
    {
        // Add action logic here
        // If you want to have a separated field for your database,
        // just do something like that:
        MyDbFacade.BlueColorField = (favColor == "Blue");
        MyDbFacade.GreenColorField = (favColor == "Green");
        ...

        return View();
    }

}

(Of course, you could also work with a ViewModel, but I'll not talk about that option here.)

Back to client-side. Let's suppose you don't want to show taOtherColor, unless the user selects the rbColorOther radiobutton. The jQuery code would be something like this:

$(document).ready(function() {
    // If user selects any radiobutton:
    if ( $('#rbColorOther:checked').length > 0) {
        $("#divOtherColorText").show();
    } else {
        $("#divOtherColorText").hide();
    }
});

I guess that would be it. Let me know if I have missed something... :-)

I would go with your first solution. Render both groups of radio buttons on the page but hide the second group with css. Then set some onclick events on the radio buttons in your first group to show/hide the second group depending on which one is clicked.

I think it is easier to just write the html for the radio buttons by hand because of the onclick handlers you are writing, but you could probably manage it using RadioButtonFor as well.

So your yes/no would look like this:

<input type="radio" name="yesNo" id="yes" onlclick="$('#other-options').hide();' value='true' <%: Model.YesNo ? "checked='checked'" : "" %>/><label for='yes'>Yes</label>
<input type="radio" name="yesNo" id="no" onlclick="$('#other-options').show();' value='false'<%: !Model.YesNo ? "checked='checked'" : "" %>/><label for='no'>No</label>

Your other options would look like this:

<div id='otherOptions' <%: Model.YesNo ? "style='display: none;'" : "" %>>
    <input type="radio" name="XYesNo" id="xyes" value='true'/><label for='xyes'>X Yes</label>
    <input type="radio" name="XYesNo" id="xno" value='false'/><label for='xno'>X No</label>
    <input type="radio" name="YYesNo" id="yyes" value='true'/><label for='yyes'>Y Yes</label>
    <input type="radio" name="YYesNo" id="yno" value='false'/><label for='yno'>Y No</label>
    <input type="radio" name="ZYesNo" id="zyes" value='true'/><label for='zyes'>Z Yes</label>
    <input type="radio" name="ZYesNo" id="zno" value='false'/><label for='zno'>Z No</label>
</div>

In your action method ignore any x,y,z values if the first YesNo was true :

if(model.YesNo){
    //persist false values for x,y,z
} else {
    //check model for values of x,y,z
}

Well I figured out the simpliest way to get the controller to sort out the validation which was if (wd.AppTher == true) { wd.AppTherRea = 0; } this is the example for a drop down and for another radiobutton it would be instead of "0" or whatever value u want for the drop down for it to be "false" or if you want/have multiple options with int at the db field type then you just set your N/A or w/e value as the = too, for multiple RB or DDL then just add more in between { and }, wd was the value assigned to represent the table and otherwise a viewmodel value could be used.