Question

我正在开发一个专注于从Razor页面收集数据以保存到数据库的项目。挑战如下： 1.我正在构建一个用户可以用来选择的页面 2.我不知道用户会提前选择多少项 3.我正在使用来自.NET Core Web App和JQuery的Razor构建一个Drop-Down，以在表行中填充有关选择的剩余信息。 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操作中，使用您的产品选项创建一个SelectList并将其保存在ViewBag中，该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。

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

1 个答案: