Question

我有一个1到5的下拉列表作为值，我需要为每个数字创建描述textareas，这些数字将属于从下拉列表中选择的数量上升的系列。例如，如果用户从下拉列表中选择3，我需要为5001,5002,5003设置textarea。如何根据下拉列表中的值动态创建textarea字段，并使用序列号5001保存textarea 1，等等？这是在我的主页上的Html.BeginForm内使用Html.BeginCollectionItem的MVC局部视图内部。如果它有帮助，这就是html的样子：

<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)

编辑：

我已经解决了一些问题。我在视图模型中添加了更多描述，但我遇到了父div的问题，并且选择了具有相同ID，或者不确定如何使用单个div并选择动态ID。由于我的部分视图可以反复复制，如何在选择相同时知道要隐藏或显示的输入？当只有一个dvGenPart时它工作正常，但是当我添加另一个时，下拉列表更改不会触发任何内容。以下是我到目前为止的情况：

<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>

我的javascript：

$(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;
    }

});

以下是如何加载相同的局部视图：

<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>
}

Answer 1

选择字段数的用户发生在客户端，因此必须在那里生成相关的textareas，除非您想要介入的帖子。换句话说，您可以让用户选择一个号码并提交。然后，从服务器返回一个具有该textareas数量的新页面。但是，我不认为这就是你想要的。

因此，由于这需要在客户端发生，这意味着您需要绑定到下拉列表的更改事件，并以某种方式通过JavaScript生成textareas：

$('#SelectedValue').on('change', function () {
    var numberOfTextareas = $(this).val();
    // generate textareas
});

您希望如何生成textareas完全由您决定。您可以简单地使用JavaScript手动创建元素并将它们插入到DOM中。您可以向传递数字的某个端点发出AJAX请求，并返回呈现许多textareas的部分视图。或者，您可以使用Knockout或Angular等基于模板为您生成它。

将动态textarea数组保存到相应的数字

1 个答案: