Solved

Ensure radio button is checked in MVC view

Posted on 2010-09-07
14
2,106 Views
Last Modified: 2013-12-17
I have an MVC view with three mutually exclusive radio buttons.   How can I ensure that at least one of them is selected when submitting to actionresult?

Here is code snippet of view below
<input name="Value1" type="radio" value="1"  />
<input name="Value2" type="radio" value="2"  />
<input name="Value1" type="radio" value="3"  />

Open in new window

0
Comment
Question by:ToString1
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
  • 2
14 Comments
 
LVL 7

Accepted Solution

by:
jamesbaile earned 374 total points
ID: 33616926
If you use the Html helpers then you may find things easier.

Html.RadiobuttonFor
or

Html.RadioButton

therefore if I have a model like this

public enum RadioOption {FirstOption, SecondOption, ThirdOption}
public class MyModel
{
    public RadioOption SelectedOption {get; set;}
}

I can do the following in my view

<%= Html.RadioButtonFor(c => c.SelectedOption, RadioOption.FirstOption) %> Option 1
<%= Html.RadioButtonFor(c => c.SelectedOption, RadioOption.SecondOption) %> Option 2
<%= Html.RadioButtonFor(c => c.SelectedOption, RadioOption.ThirdOption) %> Option 3


0
 

Author Comment

by:ToString1
ID: 33617275
Thanks

It is a jquery implemementation of a radio button that has an image effect on it.

So I need the code

<input name="Value1" type="radio" value="1"  />
<input name="Value2" type="radio" value="2"  />
<input name="Value1" type="radio" value="3"  />

So really I want to handle in in my controller.

        [Authorize]
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult SubmitForm(int ID, List<Foo> FOOs)
       {
           if FOOs.value1 == null
           {
              //HOW CAN I RETURN TO THE SAME VIEW WITH ERROR MESSAGE ?
           }

       

       }

0
 
LVL 4

Assisted Solution

by:ronan1979
ronan1979 earned 126 total points
ID: 33617295
set checkedbvalue:
<input name="Value1" type="radio" value="1" checked="checked" />
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:ToString1
ID: 33617361
Hi thanks but I need to validate the radio button
0
 
LVL 7

Assisted Solution

by:jamesbaile
jamesbaile earned 374 total points
ID: 33617554
Whether you are using JQuery or not should not effect the way you code your view.  You can still use <%= Html.RadioButtonFor(c => c.SelectedOption, RadioOption.FirstOption) %> along with Jquery.

I'd also get the controller to accept the model in the action

So

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult SubmitForm(MyModel model)
{
    if (model.Value1 == null)
    {
        ViewData.ModelState.AddModelError("Value1","Value1 is null");
        return View("MyView",model);
    }

........

........
     RedirectToAction("MyModelUpdated");

}

0
 

Author Comment

by:ToString1
ID: 33617648
OK thanks

i am passing a strongly typed list of responses to the action result so in my view I have

        <% i = i + 1; %>        
        <input name="[<%=i%>].celue" type="radio" value="1"  />
        <input name="[<%=i%>].celue" type="radio" value="2"  />
        <input name="[<%=i%>].celue" type="radio" value="3"  />  

So how would I use HTML Helper in this case?


0
 
LVL 4

Assisted Solution

by:ronan1979
ronan1979 earned 126 total points
ID: 33617970
if you add checked="checked" to one input
then one of them will be set by default
(they need part of the same form/group)

        <% i = i + 1; %>        
        <input name="[<%=i%>].celue" type="radio" value="1"  checked="checked"  />
        <input name="[<%=i%>].celue" type="radio" value="2"  />
        <input name="[<%=i%>].celue" type="radio" value="3"  />  

(A) what do you mean by "validate the radio button" ?
(B) what do you mean by "HTML Helper" ?
0
 
LVL 7

Assisted Solution

by:jamesbaile
jamesbaile earned 374 total points
ID: 33618030
Can you explain is it that you have a group of three options you want the user to select from, but that there may 1 or more of these groups of options?
0
 

Author Comment

by:ToString1
ID: 33625763
Hi

Yes there are a group of options and I need to ensure ove option from each radio button set is clicked
0
 

Author Comment

by:ToString1
ID: 33634560
You can ignore the HTML Helper option.  Essentially if I have



        <% i = i + 1; %>        
        <input name="[<%=i%>].celue" type="radio" value="1"    />
        <input name="[<%=i%>].celue" type="radio" value="2"  />
        <input name="[<%=i%>].celue" type="radio" value="3"  />

I need to ensure one is checked.   I cannot force one to be checked when loading the view.

So in my controller post actionresult

I need a way of saying

public ActionResult SubmitForm(int ID, List<Foo> FOOs)
       {
         foreach thisFoo in FOO
           {
              if  foo == NULL then
              //HOW CAN I RETURN TO THE SAME VIEW WITH ERROR MESSAGE ?
           }

       

       }

0
 
LVL 7

Assisted Solution

by:jamesbaile
jamesbaile earned 374 total points
ID: 33634582
If you are using ASP.NET MVC 2 you can use the model validators

Create the following simple model

public enum RadioOption {FirstOption, SecondOption, ThirdOption}
public class MyModel
{
    [Required]
    public RadioOption? SelectedOption {get; set;}
}

and then an action which looks like

public ActionResult SubmitForm(int ID, List<MyModel> options)
{
  if (!ViewData.ModelState.IsValid)
{
}

0
 
LVL 7

Assisted Solution

by:jamesbaile
jamesbaile earned 374 total points
ID: 33634590
Sorry I saved the response before I'd finished writing

The action rfesult should look something like

public ActionResult SubmitForm(int ID, List<MyModel> options)
{
      if (!ViewData.ModelState.IsValid)
     {
            return View("MyView"); // you may wish to pass back the view model with the options set
     }
.......
     RedirectToAction("Complete");

}

0
 
LVL 7

Assisted Solution

by:jamesbaile
jamesbaile earned 374 total points
ID: 33634605
Also you will need to make sure that your radio buttons are named correctly in the view.

<input name="options[<%=i%>]" type="radio" value="1"    />

The name needs to match up with the variable/property name for the default model binder to bind properly.
0
 

Author Comment

by:ToString1
ID: 33635064
Thanks

Yes because I have a list of survey results that can vary between question so I have

 <% i = i + 1; %>        
        <input name="[<%=i%>].celue" type="radio" value="1"    />
        <input name="[<%=i%>].celue" type="radio" value="2"  />
        <input name="[<%=i%>].celue" type="radio" value="3"  />

But this could be one two or 10 radio buttons depending on the question.   Also my model binding works fine because I have a property "celue" in my model so when I have

1.celue
2.celue
3.celue

It persists to database no problem when I call actionresult

//post
public ActionResult SubmitForm(int ID, List<Foo> FOOs)

So could you explain again from here what I need to do.  

You see " Foo" is a table within linq to sql model so should I partial class that?   If I do could you give an example  please?

Thanks for your commets


0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
The purpose of this video is to demonstrate how to set up the WordPress backend so that each page automatically generates a Mailchimp signup form in the sidebar. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome…
I've attached the XLSM Excel spreadsheet I used in the video and also text files containing the macros used below. https://filedb.experts-exchange.com/incoming/2017/03_w12/1151775/Permutations.txt https://filedb.experts-exchange.com/incoming/201…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question