如何使用 C# Razor 为下拉列表和数据选择生成动态表单字段

Question

我正在从事一个项目，该项目专注于从 Razor 页面收集数据以保存到数据库。挑战如下： 1.我正在构建一个用户可以用来选择的页面 2. 不知道用户会提前选择多少个Item 3. 我正在使用 Razor 从 .NET Core Web 应用程序和 JQuery 构建下拉菜单，以填充有关表行中选择的剩余信息。 4.我希望能够解析用户选择并将每条记录保存到数据库中，在用户名和其他个人信息下 5. 我已完成将用户列表和产品列表都放到 Razor 页面。

我需要帮助的是动态字段块，这些字段需要按需生成或通过 Tab 操作生成，以提供用户可用于添加新产品的新行。

这是我现在在 Razor 页面上用来收集第一行的代码：

    -----------   Code Starts Here -------------------------------
    <div style="width:100%;">
    <table>
        <th>Product Code</th>
        <th>Product Description</th>
        <th>Quantity</th>
        <th>Product Price</th>
        <tr>
            <td>
                <select class="form-control" id="ProductCode" name="ProductCode">
                    <option selected>Select Product</option>
                    @foreach (var ulsp in ViewData["prod"] as List<Scafolding.UlslineItemCodes>)
                    {
                        <option value="@ulsp.Id" data-description="@ulsp.DefaultDescription" 
                                data-price="@String.Format("{0:0.00}",ulsp.DefaultUnitPrice)">@ulsp.LineItemCode</option>
                    }
                </select>
            </td>
            <td>
                <input value="" class="form-control" id="ProductDesc" name="ProductDesc" style="width:500px;"/>
            </td>
            <td>
                <input value="0" class="form-control" id="quantity" name="quantity" style="width:50px;" placeholder="0"/>
            </td>
            <td>
                <input value="" class="form-control"  id="ProductPrice" name="ProductPrice" style="width:95px;" placeholder="$0.00" />
            </td>
        </tr>
    </table>
</div>
    <script>
    $(document).ready(function () {

        // wire up the change handler http://api.jquery.com/change/
        $("#ProductCode").change(function () {
            var data = "";
            // get the selected option's data values http://api.jquery.com/data/
            data = $("#ProductCode option:selected").data();

            // set the inputs
            $("#ProductDesc").val(data.description);
            $("#quantity").val(data.quant);
            $("#ProductPrice").val(data.price).toFixed(2);
        });
    });

        $(document).ready(function () {

        $("#quantity").on("change", function () {
            var quant = "";
            var data = "";
            data = $("#ProductCode option:selected").data();
            quant = $("#quantity").val();
            $("#ProductPrice").val(data.price * quant).toFixed(2);

        });
    });
    </script>
    ---------------  Code Ends Here  ---------------------

如何动态生成此代码的新块以允许用户选择新项目？

一旦提交数据，在 C# 中解析数据并将其保存到数据库中进行处理的最佳方法是什么？

感谢您的指导和建议。

Answer 1

在您的 GET 操作中，使用您的 Product 选项创建一个 SelectList 并将其保存在 ViewBag 中，并使用您稍后在 View 中使用的相同元素名称，因此您以后无需使用 ViewBag 进行显式转换即可使用它.看起来像：

行动：

public ActionResult About(){
    List<Product> listProduct = context.Product.ToList();

    // List to populate the Dropdown, "value" parameter for the options, text to display in the options, "null" for not selecting any value (disambiguation)
    ViewBag.products = new SelectList(listProduct, "Id", "LineItemCode", null);
}

然后在你的视野中：

<div class="form-group">
    //If you want a label for your select
    //<label for="products">Products:</label>
    @Html.DropDownList("products", null, null, htmlAttributes: new { @class = "form-control", placeholder = "Select Product" })
</div>

DropDownList 助手会自动为您生成一个选择，其中包含您放入 ViewBag 中的所有选项，只要它有一个与助手同名的 SelectList。