?
Solved

Ensure radio button is checked in MVC view

Posted on 2010-09-07
14
Medium Priority
?
2,165 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
  • 6
  • 6
  • 2
14 Comments
 
LVL 7

Accepted Solution

by:
jamesbaile earned 1496 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 504 total points
ID: 33617295
set checkedbvalue:
<input name="Value1" type="radio" value="1" checked="checked" />
0
Visualize your virtual and backup environments

Create well-organized and polished visualizations of your virtual and backup environments when planning VMware vSphere, Microsoft Hyper-V or Veeam deployments. It helps you to gain better visibility and valuable business insights.

 

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 1496 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 504 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 1496 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 1496 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 1496 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 1496 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

Restore individual SQL databases with ease

Veeam Explorer for Microsoft SQL Server delivers an easy-to-use, wizard-driven interface for restoring your databases from a backup. No expert SQL background required. Web interface provides a complete view of all available SQL databases to simplify the recovery of lost database

Question has a verified solution.

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

Today I had a very interesting conundrum that had to get solved quickly. Needless to say, it wasn't resolved quickly because when we needed it we were very rushed, but as soon as the conference call was over and I took a step back I saw the correct …
There is a huge demand for CodeIgniter among the PHP web developers due to its dynamic features and benefits these days. It is one of most popular and agile open source PHP framework for creating robust web applications in PHP web development field.…
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…
Whether it be Exchange Server Crash Issues, Dirty Shutdown Errors or Failed to mount error, Stellar Phoenix Mailbox Exchange Recovery has always got your back. With the help of its easy to understand user interface and 3 simple steps recovery proced…
Suggested Courses
Course of the Month14 days, 19 hours left to enroll

840 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