radiobutton to display message

Question

I have this model

    public partial class PRB
{
    public long PRB_ID { get; set; }
    public string MEMBERSHIP_NUMBER { get; set; }
    public Nullable<int> MEMBERSHIP_TYPE { get; set; }
    public string REEGISTERED_BUSINESS_NAME { get; set; }
}

I want to make MEMBERSHIP_TYPE to be a radiobutton

                                                    <div class="form-group">
                                                    <div class="radio">
                                                        @Html.RadioButtonFor(m => m.MEMBERSHIP_TYPE, 1, new { id = "", @checked = "checked" }) Foreign Company
                                                    </div>
                                                    <div class="radio">
                                                        @Html.RadioButtonFor(m => m.MEMBERSHIP_TYPE, 2, new { id = "" }) Foreign Owned Nigerian Company
                                                    </div>
                                                    <div class="radio">
                                                        @Html.RadioButtonFor(m => m.MEMBERSHIP_TYPE, 3, new { id = "" }) Nigerian Company
                                                    </div>
                       </div>

1. If radiobutton MEMBERSHIP_TYPE that is clicked is 1, the message box displayed will be "You are a Grade A member". Then OK button will be clicked
2. If radiobutton MEMBERSHIP_TYPE that is clicked is 2, the message box displayed will be "You are a Grade B member". Then OK button will be clicked
3. If radiobutton MEMBERSHIP_TYPE that is clicked is 3, the message box displayed will be "You are a Grade C member". Then OK button will be clicked

Then, after the click of OK button for the message box, it will diplay what is shown below.

        <div class="form-group">
        @Html.LabelFor(model => model.REGISTERED_BUSINESS_NAME, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.REGISTERED_BUSINESS_NAME)
            @Html.ValidationMessageFor(model => model.REGISTERED_BUSINESS_NAME)
        </div>
    </div>

Then the user will enter the Business name textbox.

Please help.

Answer 1

If your project includes jQuery, you can show message box when changing radio button selection using this simple code:

$('input[type=radio]').change(function () {
    // radio button selection part
    var value = parseInt($(this).val());

    switch (value) {
        case 1:
           alert("You are a Grade A member");
           break;
        case 2:
           alert("You are a Grade B member");
           break;
        case 3:
           alert("You are a Grade C member");
           break;
        default:
           // do something else
           break;
    }

    // code to show/hide div or using modal popup here
});

Tips:

1. Use $(this).is(':checked') to check current value of radio button group(s).

2. If your radio button controls is more than given above, consider assign a class for corresponding radio buttons e.g. @Html.RadioButtonFor(m => m.MEMBERSHIP_TYPE, 1, new { id = "", @class = "classname" }) and set jQuery selector pointed to that CSS class such as $('.classname').change(function () { ... }).

Depending on what you need, EditorFor part can be presented as simple div wrapper or modal popup. If the former has used, give a value for id attribute to that div element and use hide()/show() method as toggle, like this example:

HTML

<div id="regname" class="form-group">
    @Html.LabelFor(model => model.REGISTERED_BUSINESS_NAME, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.REGISTERED_BUSINESS_NAME)
        @Html.ValidationMessageFor(model => model.REGISTERED_BUSINESS_NAME)
    </div>
</div>

JS

$(document).ready(function () {
     $('#regname').hide();

     $('input[type=radio]').change(function () { 
         // see radio button selection code above

         // show target div
         $('#regname').show();
     });
});

If the latter one is used, follow same procedure to give id attribute on div element (see also: "When creating a dialog with jquery, how do I hide the dialog div?"), then use dialog method like this example instead:

$(document).ready(function () {
    $('#regname').dialog({
        autoOpen: false, 
        modal: true
        // other property settings here
    });

    $('input[type=radio]').change(function () { 
         // see radio button selection code above

         // show target modal popup
         $('#regname').dialog("open");
    });
});

This is not a perfect explanation, but at least explain what should you do to show message box & displaying other part of view when changing radio button selection.