SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Learning... tahirjadoon's Avatar
    Join Date
    Jan 2003
    Posts
    775
    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...

  2. #2
    Learning... tahirjadoon's Avatar
    Join Date
    Jan 2003
    Posts
    775
    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...

  3. #3
    Learning... tahirjadoon's Avatar
    Join Date
    Jan 2003
    Posts
    775
    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...


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
  •