radiobutton to display message - asp.net-mvc

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>
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
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
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:
Use $(this).is(':checked') to check current value of radio button group(s).
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.