Solved

Ensure radio button is checked in MVC view

Posted on 2010-09-07
14
2,110 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
What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

 

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

What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

Question has a verified solution.

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

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
This article shows how to deploy dynamic backgrounds to computers depending on the aspect ratio of display
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…
Add bar graphs to Access queries using Unicode block characters. Graphs appear on every record in the color you want. Give life to numbers. Hopes this gives you ideas on visualizing your data in new ways ~ Create a calculated field in a query: …

695 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