.net mvc 的动态输入字段答案

【问题标题】：Dynamic Input Field with .net mvc.net mvc 的动态输入字段
【发布时间】：2020-12-15 21:12:54
【问题描述】：

我想像这样在我的网站中添加一个动态输入字段。

表单的初始状态：

添加第一行后的表单状态

添加第二行后的表单状态

我该怎么做？

【问题讨论】：

标签： c# html jquery asp.net asp.net-mvc

【解决方案1】：

我会告诉你我的方法。这将全面地帮助您。请仔细检查。

!!不要被代码的密度吓倒，我在页面中做了很多工作。

我为输入创建了一个局部视图；

<ul class="list-group shadow">
        <li class="list-group-item list-group-item-success">
        <label class="font-weight-bold">Satış Tipi:</label>
        <span class="float-right">
            @Html.DropDownList("NewSaleTypeId", null, new { @class = "form-control select2", placeholder = "...Satış Tipi Seçiniz..." })
        </span>
    </li>
    <li class="list-group-item list-group-item-success" id="row_range">
        <label class="font-weight-bold">Ürün Gamı:</label>
        <span class="float-right">
            @Html.DropDownList("NewProductRangeId", null, new { @class = "form-control select2", placeholder = "...Ürün Gamı..." })
        </span>
    </li>
    <li class="list-group-item list-group-item-success" id="NewProductTypeId_row">
        <label class="font-weight-bold">Çeşit:</label>
        <span class="float-right">
            @Html.DropDownList("NewProductTypeId", null, new { @class = "form-control select2", placeholder = "...Çeşit..." })
        </span>
    </li>
    <li class="list-group list-group-item-success" id="NewProductSizeId_row">
        <div class="list-group-item list-group-item-success">
            <label class="font-weight-bold">Boy:</label>
            <span class="float-right">
                @Html.DropDownList("NewProductSizeId", null, new { @class = "form-control select2", placeholder = "...Boy..." })
            </span>
        </div>
        <div class="list-group-item list-group-item-success">
            <label class="font-weight-bold">İlaç:</label>
            <span class="float-right">
                @Html.DropDownList("NewProductMedicineId", null, new { @class = "form-control select2", placeholder = "...İlaç..." })
            </span>
        </div>

    </li>
    @*<li class="list-group-item list-group-item-success" id="NewProductMedicineId_row">

    </li>*@
    <li class="list-group-item list-group-item-success">
        <label class="font-weight-bold">Açıklama:</label>
        <span class="float-right">
            @Html.TextBox("NewProductDescription", "", new { @class = "form-control" })
        </span>
    </li>
    <li class="list-group-item list-group-item-success">
        <label class="font-weight-bold">Fiyat:</label>
        <span class="float-right">
            @Html.TextBox("NewUnitPrice", "", new { @class = "form-control" , @type = "number", @min = "1" })
        </span>
    </li>
    <li class="list-group-item list-group-item-success">
        <label class="font-weight-bold">Adet:</label>
        <span class="float-right">
            @Html.TextBox("NewQuantity", "", new { @class = "form-control", @type = "number", @min = "1"})
        </span>
    </li>
    <li class="list-group-item">
        <button type="button" class="btn btn-block btn-primary" onclick="addNewProduct()"><i class="fa fa-plus"></i> EKLE</button>
    </li>
</ul>

然后我用这个脚本取值；

function addNewProduct() {
    var isExists;
    var newProductId = $("#NewProductId").val();
    var newProductRangeId = $("#NewProductRangeId").val();
    var newProductTypeId = $("#NewProductTypeId").val();
    var newProductSizeId = $("#NewProductSizeId").val();
    var newProductMedicineId = $("#NewProductMedicineId").val();
    var newSaleTypeId = $("#NewSaleTypeId").val();
    var newProductName = $("#NewProductId option:selected").text();
    var newProductRangeName = $("#NewProductRangeId option:selected").text();
    var newProductTypeName = $("#NewProductTypeId option:selected").text();
    var newSaleTypeName = $("#NewSaleTypeId option:selected").text();
    var newProductSizeName = $("#NewProductSizeId option:selected").text();
    var newProductMedicineName = $("#NewProductMedicineId option:selected").text();
    var newUnitPrice = $("#NewUnitPrice").val();
    $("#NewUnitPrice").val("");
    var newQuantity = $("#NewQuantity").val();
    $("#NewQuantity").val("");
    var totalPrice = newQuantity * newUnitPrice;
    var newProductDescription = $("#NewProductDescription").val();
    $("#NewProductDescription").val("");

    if (!newSaleTypeId || !newProductRangeName || totalPrice <= 0 || !newProductTypeName || !newQuantity || !newUnitPrice || (document.getElementById("NewProductSizeId").length > 1 && !newProductSizeName) || document.getElementById("NewProductSizeId").length > 1 && (document.getElementById("NewProductMedicineId").length > 1 && !newProductMedicineName)) {
        alert("Bilgileri eksik veya hatalı girdiniz!");
        return;
    }

    var html = "<div class='col-md-3 mb-2'><ul class='list-group shadow border-success border'>" +
        //"<li class='list-group-item'><input type='hidden' name='NewProductIds' value='" + newProductId + "'>" + newProductName + "</span></li>" +
        "<li class='list-group-item'><input type='hidden' name='NewSaleTypeIds' value='" + newSaleTypeId + "'><label class='font-weight-bold' > Satış Tipi:</label ><span class='float-right'>" + newSaleTypeName + "</span></li>" +
        "<li class='list-group-item'><input type='hidden' name='NewProductRangeIds' value='" + newProductRangeId + "'><label class='font-weight-bold' > Ürün Gamı:</label ><span class='float-right'>" + newProductRangeName + "</span></li>" +
        "<li class='list-group-item'><input type='hidden' name='NewProductTypeIds' value='" + newProductTypeId + "'><label class='font-weight-bold' > Çeşit:</label ><span class='float-right'>" + newProductTypeName + "</span></li>";
    html += newProductSizeId ? "<li class='list-group-item'><input type='hidden' name='NewProductSizeIds' value='" + newProductSizeId + "'><label class='font-weight-bold'> Boy:</label > <span class='float-right'>" + newProductSizeName + "</span></li>" : "<input type='hidden' name='NewProductSizeIds'>";
    html += newProductMedicineId ? "<li class='list-group-item'><input type='hidden' name='NewProductMedicineIds' value='" + newProductMedicineId + "'><label class='font-weight-bold'> İlaç:</label ><span class='float-right'>" + newProductMedicineName + "</span></li>" : "<input type='hidden' name='NewProductMedicineIds'>";

    html+= "<li class='list-group-item'><label class='font-weight-bold' > Açıklama:</label ><span class='float-right'><input type='text' name='NewProductDescriptions' class='form-control' value='" + newProductDescription + "'></span></li>" +
        "<li class='list-group-item'><label class='font-weight-bold' > Fiyat:</label ><span class='float-right'><input type='text' name='NewProductPrices' class='form-control' readonly value='" + newUnitPrice + "'></span></li>" +
        "<li class='list-group-item'><label class='font-weight-bold' > Adet:</label ><span class='float-right'><input type='text' name='NewProductQuantities' class='form-control' readonly value='" + newQuantity + "'></span></li>" +
        "<li class='list-group-item'><label class='font-weight-bold' > Toplam:</label ><span class='float-right'>"+ totalPrice + " TL</span></li>" +
        "<li class='list-group-item'><button type='button' class='btn btn-sm btn-danger' onclick='removeRow(this)'><i class='fa fa-trash'></i> Sil</button></li>" +
        "</ul></div>";
    $("#salesProducList").append($(html));

    $("#NewProductRangeId").val(null).trigger('change');
    $("#NewProductTypeId").html("").val(null).trigger('change');
    $("#NewProductSizeId").html("").val(null).trigger('change');
    $("#NewProductMedicineId").html("").val(null).trigger('change');
}

然后我附加代码这部分脚本$("#salesProducList").append($(html));

这里是salesProductlist PartialView；

<div class="row">
    <div class="col-md-3 mb-2">
        @Html.Partial("_SaleProductCE")
    </div>
    <div class="col-md-9">
        @Html.Partial("_SaleProductList")
    </div>
</div>

使用$(id).remove(); 删除添加的行。

【讨论】：

【解决方案2】：

您可以使用 jQuery append 方法将行添加到表体中。但您应该在行中遵循元素的名称，例如

var index = 1 // i assume "0" is used in your first row.
var newRow ="<tr> <td> <input type="text" name="MyListItem[indx].FirstProperty" /><td></tr>";
index++;
$('#tblBody').append(newRow);

这将有助于您的模型绑定正常工作

【讨论】：