How To Build Dropdown

Question

@if (Model.Competencies != null && Model.Competencies.Any())
{
for (int i = 0; i < Model.Competencies.Count(); i++)
{
<tr class="competencyRow">
<td width="25%">
@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 "})
</td>
<td width="700px">
@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"})

</td>
<td>
@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",})
</td>
<td><input type="button" value="Remove" onclick="Remove(this)" /></td>
</tr>
}
}

How do I make it so that when I click the radio button yes he is disabled, but when I click no the data row is deleted all and there is an add button to add a new data row and dropdownlist according to the model and submit button

pavina · Answer

Razor Code for Dropdowns and Radio Buttons @if (Model.Competencies != null && Model.Competencies.Any()) { for (int i = 0; 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!

yash patel · Answer

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 { @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(); }

Aman Gupta · Answer

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 Competency Group Competency Required Score Actions @if (Model.Competencies != null && Model.Competencies.Any()) { for (int i = 0; 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" }) @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); } 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. Add New Row : The addRow function clones the last row, clears its values, and appends it to the table. 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.