SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Mvc3 - Radio Buttons Issue

  1. Jul 24, 2012 09:24 #1
    tahirjadoon
    tahirjadoon is offline
    Learning... tahirjadoon's Avatar
    Join Date
    Jan 2003
    Posts
    770
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mvc3 - Radio Buttons Issue

    Hi,

    1. I have 4 sections on the page
    2. Each section has multiple questions
    3. Each questions has 3 radio buttons.
    4. My radio buttons are getting the same name and id across the 4 sections rather than being unique at the question level. (My Problem)

    How can i fix this issue? Thanks


    View - showing code for section 1 only

    Code:
    @using (Html.BeginForm(ActionNames.Index, ControllerNames.PaperSurveyQualityControl, new { Area = AreaNames.OngoingProjects }, FormMethod.Post, new { @id = "PaperSurveyQualityControlForm" })){     
@Html.HiddenFor(x => x.Header.SurveyValidationId)         
if (Model.PersonalInformation != null && Model.PersonalInformation.Count > 0)    
{        
<div class="distanceBottom">            
<table class="siteTable">                
<thead>                    
<th style="width: 38%;">Description</th>                    
<th style="width: 30%;">Keyed Value</th>                    
<th style="width: 10%;"><center>Correct</center></th>                    
<th style="width: 10%;"><center>Typo</center></th>                    
<th style="width: 12%;"><center>Mismatched</center></th>                
</thead>                
<tbody>                    
@foreach (var item in Model.PersonalInformation)                    
{                        
@Html.HiddenFor(x => item.CategoryCode)                        
<tr>                            
<td>@item.Description</td>                            
<td>@item.KeyedValue</td>                            
<td><center>@Html.RadioButtonFor(model => item.Response, "C")</center></td>                            
<td><center>@Html.RadioButtonFor(model => item.Response, "T")</center></td>                            
<td><center>@Html.RadioButtonFor(model => item.Response, "M")</center></td>                        
</tr>                    
}                
</tbody>            
</table>        
</div>    
}
}

    Source View

    Code:
    <form action="/OngoingProjects/PaperSurveyQualityControl" id="PaperSurveyQualityControlForm" method="post">
<input data-val="true" data-val-number="The field SurveyValidationId must be a number." data-val-required="The SurveyValidationId field is required." id="Header_SurveyValidationId" name="Header.SurveyValidationId" type="hidden" value="1" />        
<div class="distanceBottom">            
<table class="siteTable">                
<thead>                    
<th style="width: 38%;">Description</th>                    
<th style="width: 30%;">Keyed Value</th>                    
<th style="width: 10%;"><center>Correct</center></th>                   
 <th style="width: 10%;"><center>Typo</center></th>                    
<th style="width: 12%;"><center>Mismatched</center></th>                
</thead>                

<tbody><input id="item_CategoryCode" name="item.CategoryCode" type="hidden" value="FN" />                        
<tr>                            
<td>First Name</td>                            
<td>Firstname</td>                            
<td><center><input data-val="true" data-val-required="Message missing!" id="item_Response" name="item.Response" type="radio" value="C" /></center></td>                            
<td><center><input id="item_Response" name="item.Response" type="radio" value="T" /></center></td>                            
<td><center><input id="item_Response" name="item.Response" type="radio" value="M" /></center></td>                        
</tr><input id="item_CategoryCode" name="item.CategoryCode" type="hidden" value="LN" />                       
 <tr>                            
<td>Last Name</td>                            
<td>Lastname</td>                            
<td><center><input id="item_Response" name="item.Response" type="radio" value="C" /></center></td>                            
<td><center><input id="item_Response" name="item.Response" type="radio" value="T" /></center></td>                            
<td><center><input id="item_Response" name="item.Response" type="radio" value="M" /></center></td>                        
</tr><input id="item_CategoryCode" name="item.CategoryCode" type="hidden" value="AD" />
                        <tr>
                            <td>Address</td>
                            <td>123 Test</td> 
                           <td><center><input id="item_Response" name="item.Response" type="radio" value="C" /></center></td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="T" /></center></td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="M" /></center></td>
                        </tr><input id="item_CategoryCode" name="item.CategoryCode" type="hidden" value="CT" /> 
                       <tr>
                            <td>City</td>
                            <td>Marcelius</td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="C" /></center></td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="T" /></center></td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="M" /></center></td>
                        </tr><input id="item_CategoryCode" name="item.CategoryCode" type="hidden" value="ST" />
                        <tr>
                            <td>State</td> 
                           <td>NV</td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="C" /></center></td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="T" /></center></td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="M" /></center></td>
                        </tr><input id="item_CategoryCode" name="item.CategoryCode" type="hidden" value="ZC" />
                        <tr>
                            <td>Zip Code</td>
                            <td>13108</td> 
                           <td><center><input id="item_Response" name="item.Response" type="radio" value="C" /></center></td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="T" /></center></td> 
                           <td><center><input id="item_Response" name="item.Response" type="radio" value="M" /></center></td>
                        </tr><input id="item_CategoryCode" name="item.CategoryCode" type="hidden" value="EM" />
                        <tr> 
                           <td>Email</td> 
                           <td>abc@abc.com</td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="C" /></center></td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="T" /></center></td> 
                           <td><center><input id="item_Response" name="item.Response" type="radio" value="M" /></center></td> 
                       </tr>
                </tbody>
            </table>
        </div>
        <div class="distanceBottom">
            <table class="siteTable">
                <thead> 
                   <th style="width: 38%;">Description</th> 
                   <th style="width: 30%;">Keyed Value</th>
                    <th style="width: 10%;"><center>Correct</center></th>
                    <th style="width: 10%;"><center>Typo</center></th>
                    <th style="width: 12%;"><center>Mismatched</center></th>
                </thead>
                <tbody><input id="item_CategoryCode" name="item.CategoryCode" type="hidden" value="Q1" />
                        <tr>
                            <td>Q1 - blah blah blah</td>
                            <td>A</td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="C" /></center></td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="T" /></center></td> 
                           <td><center><input id="item_Response" name="item.Response" type="radio" value="M" /></center></td>
                        </tr><input id="item_CategoryCode" name="item.CategoryCode" type="hidden" value="Q2" />
                        <tr>
                            <td>Q2 - blah blah blah</td> 
                           <td>ADF</td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="C" /></center></td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="T" /></center></td> 
                           <td><center><input id="item_Response" name="item.Response" type="radio" value="M" /></center></td> 
                       </tr><input id="item_CategoryCode" name="item.CategoryCode" type="hidden" value="Q3" /> 
                       <tr>
                            <td>Q3 - blah blah blah</td>
                            <td>BC</td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="C" /></center></td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="T" /></center></td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="M" /></center></td> 
                       </tr><input id="item_CategoryCode" name="item.CategoryCode" type="hidden" value="Q4" />
                        <tr>
                            <td>Q4 - blah blah blah</td>
                            <td>D</td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="C" /></center></td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="T" /></center></td> 
                           <td><center><input id="item_Response" name="item.Response" type="radio" value="M" /></center></td>
                        </tr>
                </tbody>
            </table>
        </div>
        <div class="distanceBottom">
            <table class="siteTable">
                <thead> 
                   <th style="width: 38%;">Description</th>
                    <th style="width: 30%;">Keyed Value</th> 
                   <th style="width: 10%;"><center>Correct</center></th> 
                   <th style="width: 10%;"><center>Typo</center></th>
                    <th style="width: 12%;"><center>Mismatched</center></th>
               </thead>
                <tbody><input id="item_CategoryCode" name="item.CategoryCode" type="hidden" value="S1" />
                        <tr> 
                           <td>Declared State 1</td> 
                           <td>MO</td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="C" /></center></td>
                           <td><center><input id="item_Response" name="item.Response" type="radio" value="T" /></center></td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="M" /></center></td>
                        </tr><input id="item_CategoryCode" name="item.CategoryCode" type="hidden" value="S2" /> 
                       <tr> 
                           <td>Declared State 2</td> 
                           <td>NY</td>  
                          <td><center><input id="item_Response" name="item.Response" type="radio" value="C" /></center></td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="T" /></center></td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="M" /></center></td> 
                       </tr><input id="item_CategoryCode" name="item.CategoryCode" type="hidden" value="S3" />
                        <tr>
                            <td>Declared State 3</td>
                            <td>AZ</td> 
                           <td><center><input id="item_Response" name="item.Response" type="radio" value="C" /></center></td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="T" /></center></td> 
                           <td><center><input id="item_Response" name="item.Response" type="radio" value="M" /></center></td> 
                       </tr>
                </tbody>
            </table>
       </div>
        <div class="distanceBottom">
            <table class="siteTable">
                <thead>
                    <th style="width: 38%;">Description</th>
                    <th style="width: 30%;">Keyed Value</th>
                    <th style="width: 10%;"><center>Correct</center></th>
                    <th style="width: 10%;"><center>Typo</center></th>
                    <th style="width: 12%;"><center>Mismatched</center></th>
                </thead>
                <tbody><input id="item_CategoryCode" name="item.CategoryCode" type="hidden" value="C1" />
                        <tr>
                          <td>Declared College 1</td>
                            <td>US Naval Academy</td> 
                           <td><center><input id="item_Response" name="item.Response" type="radio" value="C" /></center></td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="T" /></center></td> 
                           <td><center><input id="item_Response" name="item.Response" type="radio" value="M" /></center></td>
                        </tr><input id="item_CategoryCode" name="item.CategoryCode" type="hidden" value="C2" />
                       <tr>
                            <td>Declared College 2</td>
                            <td>Don't know any others</td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="C" /></center></td> 
                           <td><center><input id="item_Response" name="item.Response" type="radio" value="T" /></center></td> 
                           <td><center><input id="item_Response" name="item.Response" type="radio" value="M" /></center></td>
                        </tr><input id="item_CategoryCode" name="item.CategoryCode" type="hidden" value="C3" /> 
                       <tr>
                            <td>Declared College 3</td>
                            <td></td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="C" /></center></td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="T" /></center></td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="M" /></center></td>
                        </tr><input id="item_CategoryCode" name="item.CategoryCode" type="hidden" value="C4" /> 
                       <tr>  
                          <td>Declared College 4</td>
                            <td></td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="C" /></center></td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="T" /></center></td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="M" /></center></td>
                        </tr><input id="item_CategoryCode" name="item.CategoryCode" type="hidden" value="C5" />
                        <tr>
                            <td>Declared College 5</td>
                            <td></td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="C" /></center></td> 
                           <td><center><input id="item_Response" name="item.Response" type="radio" value="T" /></center></td>
                            <td><center><input id="item_Response" name="item.Response" type="radio" value="M" /></center></td>  
                      </tr>
                </tbody>
            </table>
        </div>
    <div class="distanceTop">
        <button type="submit" title="Update Email" id="ButtonUpdate" class="gradientbuttonRight gradientbutton gradientorange">Update</button> 
           <a id="ButtonExit" class="gradientbuttonLeft gradientbutton gradientblue" href="/OngoingProjects/PaperSurveyQualityControl/Exit?badEmailId=1" title="Exit">EXIT</a>
    </div>
</form>
    View Model

    Code:
    
using Sqc.BusinessEntities; namespace Sqc.ViewModels.OngoingProject{
    public partial class PaperSurveyQualityControlVideoModel    {
                 public PaperSurveyQualityControlHeader Header { get; set; }
         public List<PaperSurveyQualityControlItem> PersonalInformation { get; set; }
         public List<PaperSurveyQualityControlItem> QuestionAnswers { get; set; }
         public List<PaperSurveyQualityControlItem> DeclaredStates { get; set; }
         public List<PaperSurveyQualityControlItem> DeclaredColleges { get; set; }
       }
}

    Business Entities:

    Header

    Code:
    namespace Sqc.BusinessEntities{    public partial class PaperSurveyQualityControlHeader    {
        public int SurveyValidationId { get; set; }
        public string ImageFront { get; set; }
       public string ImageBack { get; set; }
    }
}
    Item

    Code:
    namespace Sqc.BusinessEntities{    public partial class PaperSurveyQualityControlItem    {
        public string CategoryCode { get; set; }
        public string Description { get; set; }
        public string KeyedValue { get; set; }
          public string Response { get; set; } //C=Correct, T=Typo, M=Mismatch  REQUIRED - radio button response
    }
}
    Item Validation

    Code:
    using System.ComponentModel.DataAnnotations;using DataAnnotationsExtensions;using System.Web.Mvc; namespace Sqc.BusinessEntities{
    [MetadataType(typeof(PaperSurveyQualityControlItem.PaperSurveyQualityControlItemMetaData))]
    public partial class PaperSurveyQualityControlItem    {
        public class PaperSurveyQualityControlItemMetaData        {
            [Required(ErrorMessage = ValidationMessageConstants.MessageRequired)]
            public string Response { get; set; }
        }
    }
}
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...
    Reply With Quote Reply With Quote
  2. Jul 24, 2012 09:26 #2
    tahirjadoon
    tahirjadoon is offline
    Learning... tahirjadoon's Avatar
    Join Date
    Jan 2003
    Posts
    770
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Clicking post, took out all the formatting. I am going to fix this...
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...
    Reply With Quote Reply With Quote
  3. Jul 26, 2012 09:59 #3
    tahirjadoon
    tahirjadoon is offline
    Learning... tahirjadoon's Avatar
    Join Date
    Jan 2003
    Posts
    770
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I followed following article and it worked. I still need to do cleanup but it is working as is.

    http://haacked.com/archive/2008/10/2...to-a-list.aspx

    Code:
    
@using (Html.BeginForm(ActionNames.Index, ControllerNames.PaperSurveyQualityControl, new { Area = AreaNames.OngoingProjects }, FormMethod.Post, new { @id = "PaperSurveyQualityControlForm" }))
{

    @Html.HiddenFor(x => x.Header.SurveyValidationId)

    
    if (Model.PersonalInformation != null && Model.PersonalInformation.Count > 0)
    {
        <div class="distanceBottom">
            <table class="siteTable">
                <thead>
                    <th style="width: 38%;">Description</th>
                    <th style="width: 30%;">Keyed Value</th>
                    <th style="width: 10%;"><center>Correct</center></th>
                    <th style="width: 10%;"><center>Typo</center></th>
                    <th style="width: 12%;"><center>Mismatched</center></th>
                </thead>
                <tbody>
                    
                    @for (var i = 0; i < Model.PersonalInformation.Count; i++)
                    {
                        @Html.HiddenFor(x => Model.PersonalInformation[i].CategoryCode)
                        <tr>
                            <td>
                                @Html.ValidationMessageFor(x => Model.PersonalInformation[i].Response)
                                @Model.PersonalInformation[i].Description
                            </td>
                            <td>@Model.PersonalInformation[i].KeyedValue</td>
                            <td><center>@Html.RadioButtonFor(model => Model.PersonalInformation[i].Response, "C")</center></td>
                            <td><center>@Html.RadioButtonFor(model => Model.PersonalInformation[i].Response, "T")</center></td>
                            <td><center>@Html.RadioButtonFor(model => Model.PersonalInformation[i].Response, "M")</center></td>
                        </tr>
                    }
      
                </tbody>
            </table>
        </div>
    }

    if (Model.QuestionAnswers != null && Model.QuestionAnswers.Count > 0)
    {
        <div class="distanceBottom">
            <table class="siteTable">
                <thead>
                    <th style="width: 38%;">Description</th>
                    <th style="width: 30%;">Keyed Value</th>
                    <th style="width: 10%;"><center>Correct</center></th>
                    <th style="width: 10%;"><center>Typo</center></th>
                    <th style="width: 12%;"><center>Mismatched</center></th>
                </thead>
                <tbody>
                    @for (var i = 0; i < Model.QuestionAnswers.Count; i++)
                    {
                        @Html.HiddenFor(x => Model.QuestionAnswers[i].CategoryCode)
                        <tr>
                            <td>
                                @Html.ValidationMessageFor(x => Model.QuestionAnswers[i].Response)
                                @Model.QuestionAnswers[i].Description
                            </td>
                            <td>@Model.QuestionAnswers[i].KeyedValue</td>
                            <td><center>@Html.RadioButtonFor(model => Model.QuestionAnswers[i].Response, "C")</center></td>
                            <td><center>@Html.RadioButtonFor(model => Model.QuestionAnswers[i].Response, "T")</center></td>
                            <td><center>@Html.RadioButtonFor(model => Model.QuestionAnswers[i].Response, "M")</center></td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    }


    if (Model.DeclaredStates != null && Model.DeclaredStates.Count > 0)
    {
        <div class="distanceBottom">
            <table class="siteTable">
                <thead>
                    <th style="width: 38%;">Description</th>
                    <th style="width: 30%;">Keyed Value</th>
                    <th style="width: 10%;"><center>Correct</center></th>
                    <th style="width: 10%;"><center>Typo</center></th>
                    <th style="width: 12%;"><center>Mismatched</center></th>
                </thead>
                <tbody>
                    @for (var i = 0; i < Model.DeclaredStates.Count; i++)
                    {
                        @Html.HiddenFor(x => Model.DeclaredStates[i].CategoryCode)
                        <tr>
                            <td>
                                @Html.ValidationMessageFor(x => Model.DeclaredStates[i].Response)
                                @Model.DeclaredStates[i].Description
                            </td>
                            <td>@Model.DeclaredStates[i].KeyedValue</td>
                            <td><center>@Html.RadioButtonFor(model => Model.DeclaredStates[i].Response, "C")</center></td>
                            <td><center>@Html.RadioButtonFor(model => Model.DeclaredStates[i].Response, "T")</center></td>
                            <td><center>@Html.RadioButtonFor(model => Model.DeclaredStates[i].Response, "M")</center></td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    }

    if (Model.DeclaredColleges != null && Model.DeclaredColleges.Count > 0)
    {
        <div class="distanceBottom">
            <table class="siteTable">
                <thead>
                    <th style="width: 38%;">Description</th>
                    <th style="width: 30%;">Keyed Value</th>
                    <th style="width: 10%;"><center>Correct</center></th>
                    <th style="width: 10%;"><center>Typo</center></th>
                    <th style="width: 12%;"><center>Mismatched</center></th>
                </thead>
                <tbody>
                   @for (var i = 0; i < Model.DeclaredColleges.Count; i++)
                    {
                        @Html.HiddenFor(x => Model.DeclaredColleges[i].CategoryCode)
                        <tr>
                            <td>
                                @Html.ValidationMessageFor(x => Model.DeclaredColleges[i].Response)
                                @Model.DeclaredColleges[i].Description
                            </td>
                            <td>@Model.DeclaredColleges[i].KeyedValue</td>
                            <td><center>@Html.RadioButtonFor(model => Model.DeclaredColleges[i].Response, "C")</center></td>
                            <td><center>@Html.RadioButtonFor(model => Model.DeclaredColleges[i].Response, "T")</center></td>
                            <td><center>@Html.RadioButtonFor(model => Model.DeclaredColleges[i].Response, "M")</center></td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    }
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules