I am working on a project that involves creating dynamic description textareas based on the value selected from a dropdown list. The dropdown list contains numbers 1 through 5, and for each number chosen, I need to generate corresponding textareas with series numbers increasing accordingly. For example, if the user selects 3 from the dropdown, I should create textareas for 5001, 5002, and 5003. This task is part of an MVC partial view utilizing Html.BeginCollectionItem within an Html.BeginForm on the main page. Below is the HTML snippet for reference:
<label>Amount: </label> @Html.DropDownListFor(x => x.SelectedValue, Model.vCount)
//this needs to be dynamic for how ever many numbers I'm generating
<div class="label-wrapper">
@Html.LabelFor(model => model.Description)
@Html.TextAreaFor(model => model.Description)
Edit:
I have made some progress with adding more descriptions in the view model, but I am facing challenges regarding parent divs and select elements having duplicate IDs or handling individual divs and selects with dynamic IDs. Since the partial view can be duplicated multiple times, it becomes complicated to manage which inputs to show or hide when the selects are identical. Everything works correctly when there's only one dvGenPart, but issues arise when adding another. Here's the current implementation:
<div id="dvGenPart" title="Generate Drawing #" style="height:300px;">
<br />
<br />
<label style="width:120px;">Series:</label> @Html.DropDownListFor(m => m.SeriesNumber_id, Model.vSeries, "-- Select Series --") <label>Amount: </label> @Html.DropDownListFor(x => x.SelectedValue, Model.vCount, new { @id="ddlSelectedValue"})
<br />
<div class="label-wrapper" id="dvDescription1">
@Html.LabelFor(model => model.Description1)
@Html.TextAreaFor(model => model.Description1)
<br />
</div>
<div class="label-wrapper" id="dvDescription2" style="display:none">
@Html.LabelFor(model => model.Description2)
@Html.TextAreaFor(model => model.Description2)
<br />
</div>
<div class="label-wrapper" id="dvDescription3" style="display:none">
@Html.LabelFor(model => model.Description3)
@Html.TextAreaFor(model => model.Description3)
<br />
</div>
<div class="label-wrapper" id="dvDescription4" style="display:none">
@Html.LabelFor(model => model.Description4)
@Html.TextAreaFor(model => model.Description4)
<br />
</div>
<div class="label-wrapper" id="dvDescription5" style="display:none">
@Html.LabelFor(model => model.Description5)
@Html.TextAreaFor(model => model.Description5)
<br />
</div>
My JavaScript code:
$(document).on("change", "#ddlSelectedValue", function () {
var vSelectedVal = parseInt($("select").val());
switch (vSelectedVal) {
case 1:
$("#dvDescription2").hide();
$("#dvDescription3").hide();
$("#dvDescription4").hide();
$("#dvDescription5").hide();
break;
case 2:
$("#dvDescription2").show();
$("#dvDescription3").hide();
$("#dvDescription4").hide();
$("#dvDescription5").hide();
break;
case 3:
$("#dvDescription2").show();
$("#dvDescription3").show();
$("#dvDescription4").hide();
$("#dvDescription5").hide();
break;
case 4:
$("#dvDescription2").show();
$("#dvDescription3").show();
$("#dvDescription4").show();
$("#dvDescription5").hide();
break;
case 5:
$("#dvDescription2").show();
$("#dvDescription3").show();
$("#dvDescription4").show();
$("#dvDescription5").show();
break;
}
});
https://i.sstatic.net/d09ck.png
Here is how the same partial view gets loaded:
<div id="dvDrawNumPost">
@using (Html.BeginForm("NewDrawingNum", "Home", FormMethod.Get, new { id = "genDrawForm", @class = "english-form", enctype = "multipart/form-data" }))
{
<div id="dlgGenDraw">
<div id="dvNewDraw" style="clear:both;">
@for (int i = 0; i < @Model.NewDrawNums.Count(); i++)
{
@Html.EditorFor(model => @Model.NewDrawNums[i])
}
</div>
<br />
@Ajax.ActionLink("Add Drawing #", "CreateNewDrawNum", null, new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.InsertAfter, UpdateTargetId = "dvNewDraw" }, new { @class = "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only AddDrawbtn" })
<br />
<br />
<input type="submit" id="btnSubmitNewDraw" name="submit" value="Save" />
</div>
}