How To Build Dropdown

Hi DZTM,

To achieve the functionality you're describing in an MVC Razor view, we can break it down into several steps:

Radio Button Logic: You want to enable or disable the row based on the radio button selection.
Row Deletion: If the "No" radio button is selected, delete the row.
Add New Data Row: Have an "Add" button to dynamically add new rows with the dropdown lists.
Submit Button: Ensure there's a button to submit the form data.
Below is an example of how you can implement this using JavaScript and Razor:

1. Radio Button Logic
You need radio buttons for "Yes" and "No" for each competency row, which will either disable the row or delete it.

2. Row Deletion:
When the "No" radio button is selected, remove the row using JavaScript.

3. Add New Row Logic:
Create a button that dynamically adds a new row with dropdowns.

Updated Code Example:

@model HRCompentencyTools.Models.YourViewModel


    
            @if (Model.Competencies != null && Model.Competencies.Any())
            {
                for (int i = 0; i < Model.Competencies.Count(); i++)
                {
                    
                }
            }
        

        

            

                
Competency Group
                
Competency
                
Required Score
                
Actions
            
        
        

                        

                            @Html.DropDownListFor(model => Model.Competencies[i].Compentency_Group, new SelectList(HRCompentencyTools.Models.ModelCompentencyAssessment.GetCompetencyGroups(), "Value", "Text", Model.Competencies[i].Compentency_Group),
                           new { @class = "form-control competency-edit" })
                        
                        

                            @Html.DropDownListFor(model => Model.Competencies[i].Competency, new SelectList(HRCompentencyTools.Models.ModelCompentencyAssessment.GetBankCompetencies(), "Value", "Text", Model.Competencies[i].Competency),
                           new { @class = "select js-example-basic-single form-control competency-edit" })
                        
                        

                            @Html.DropDownListFor(model => model.Competencies[i].Required_Score, new SelectList(Enumerable.Range(1, 5).Select(x => new SelectListItem { Value = x.ToString(), Text = x.ToString() }), "Value", "Text"), Model.Competencies[i].Required_Score,
                           new { @class = "form-control competency-edit" })
                        
                        

                             Yes
                             No
                        
                    
    

    Add New Row
    Submit

4. JavaScript for Row Logic:
 

// Function to disable or enable a row
function disableRow(radio, disable) {
    var row = $(radio).closest('tr');
    row.find('select, input').prop('disabled', disable);
}

// Function to remove a row
function removeRow(radio) {
    $(radio).closest('tr').remove();
}

// Function to add a new row
function addRow() {
    // Clone the last row
    var lastRow = $('#competencyRows tr:last');
    var newRow = lastRow.clone();
    
    // Clear the values of the cloned row
    newRow.find('select').val('');
    newRow.find('input[type="radio"]').prop('checked', false);
    
    // Append the new row
    $('#competencyRows').append(newRow);
}

1. Radio Buttons:

   • When you click the "Yes" button, it triggers the disableRow function, which disables the dropdowns and input elements in that row.
   • When you click the "No" button, it triggers the removeRow function, which removes the entire row.

2. Add New Row:

   • The addRow function clones the last row, clears its values, and appends it to the table.

3. Submit Button:

   • The form will submit the current state of the rows, including any that were dynamically added or modified.

Adjusting for Model Binding:

Make sure your model binding works correctly for dynamic rows. You may need to adjust the name attributes or indexes dynamically in JavaScript if the number of rows is variable, to ensure the model binder in MVC can correctly bind the submitted data to your Model.Competencies.

This solution dynamically handles adding and removing rows, as well as enabling/disabling them based on radio button clicks.

Razor Code for Dropdowns and Radio Buttons

@if (Model.Competencies != null && Model.Competencies.Any())
{
    for (int i = 0; i < Model.Competencies.Count(); i++)
    {
        
            
                @Html.DropDownListFor(model => Model.Competencies[i].Compentency_Group, 
                    new SelectList(HRCompentencyTools.Models.ModelCompentencyAssessment.GetCompetencyGroups(), "Value", "Text", 
                    Model.Competencies[i].Compentency_Group),
                    new { @class = "form-control competency-edit", disabled = "disabled" })
            
            
                @Html.DropDownListFor(model => Model.Competencies[i].Competency, 
                    new SelectList(HRCompentencyTools.Models.ModelCompentencyAssessment.GetBankCompetencies(), "Value", "Text", 
                    Model.Competencies[i].Competency),
                    new { @class = "select js-example-basic-single form-control competency-edit", disabled = "disabled" })
            
            
                @Html.DropDownListFor(model => model.Competencies[i].Required_Score, 
                    new SelectList(Enumerable.Range(1, 5).Select(x => new SelectListItem { Value = x.ToString(), Text = x.ToString(), }), 
                    "Value", "Text"), 
                    Model.Competencies[i].Required_Score,
                    new { @class = "form-control competency-edit", disabled = "disabled" })
            
            
                 Yes
                 No
            
            
        
    }
}


    
        
    



    
        
    

JavaScript for Managing Rows

function toggleRow(radioBtn, isYes) {
    var row = $(radioBtn).closest('tr');

    if (isYes) {
        // Disable all inputs in this row
        row.find('select').prop('disabled', true);
    } else {
        // Remove the row if "No" is clicked
        row.remove();
    }
}

function addRow() {
    // Clone the last competency row and reset its inputs
    var lastRow = $('.competencyRow:last');
    var newRow = lastRow.clone();

    // Clear the values and enable the new row's inputs
    newRow.find('select').val('');
    newRow.find('input[type="radio"]').prop('checked', false);
    newRow.find('select').prop('disabled', false);

    // Append the new row to the table
    lastRow.after(newRow);
}

function RemoveRow(button) {
    // Remove the row on "Remove" button click
    $(button).closest('tr').remove();
}

Each row has dropdowns for competency details and radio buttons for interaction. If you click "Yes," the dropdowns are disabled; if "No," the whole row gets removed. Clicking "Add Competency" duplicates the last row, clears the inputs, and makes them ready for new entries. Each row also has a "Remove" button to delete it. This setup keeps everything organized and lets users easily manage competencies. Let me know if you need any tweaks!

use the below code for creating dropdown, raido button and add new row

 

@if (Model.Competencies != null && Model.Competencies.Any())
{
    for (int i = 0; i < Model.Competencies.Count(); i++)
    {
       
           
                @Html.DropDownListFor(model => Model.Competencies[i].Compentency_Group, 
                    new SelectList(HRCompentencyTools.Models.ModelCompentencyAssessment.GetCompetencyGroups(), "Value", "Text", 
                    Model.Competencies[i].Compentency_Group),
                    new { @class = "form-control competency-edit", disabled = "disabled" })
           
           
                @Html.DropDownListFor(model => Model.Competencies[i].Competency, 
                    new SelectList(HRCompentencyTools.Models.ModelCompentencyAssessment.GetBankCompetencies(), "Value", "Text", 
                    Model.Competencies[i].Competency),
                    new { @class = "select js-example-basic-single form-control competency-edit", disabled = "disabled" })
           
           
                @Html.DropDownListFor(model => model.Competencies[i].Required_Score, 
                    new SelectList(Enumerable.Range(1, 5).Select(x => new SelectListItem { Value = x.ToString(), Text = x.ToString(), }), 
                    "Value", "Text"), 
                    Model.Competencies[i].Required_Score,
                    new { @class = "form-control competency-edit", disabled = "disabled" })
           
           
               
                Yes
                No
           
           
       
    }
}

   
       
   

   
       
   



js code for add row , delete row

 

function toggleRow(radioBtn, isYes) {
    var row = $(radioBtn).closest('tr');
    
    if (isYes) {
        // Disable all inputs in this row
        row.find('select').prop('disabled', true);
    } else {
        // Remove the row if "No" is clicked
        row.remove();
    }
}

function addRow() {
    // Clone the last row and clear its values
    var lastRow = $('.competencyRow:last');
    var newRow = lastRow.clone();

    // Reset the inputs in the cloned row
    newRow.find('select').val('');
    newRow.find('input[type="radio"]').prop('checked', false);
    newRow.find('select').prop('disabled', false);

    // Append the new row to the table
    lastRow.after(newRow);
}

function Remove(button) {
    // Remove the row on "Remove" button click
    $(button).closest('tr').remove();
}