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

C# 如何使用C语言为下拉列表和数据选择生成动态表单字段,c#,jquery,asp.net-mvc,razor,C#,Jquery,Asp.net Mvc,Razor,我正在做一个项目,重点是从Razor页面收集数据并保存到数据库。挑战如下: 1.我正在构建一个用户可以用来选择的页面 2.我不知道用户会提前选择多少项 3.我正在使用Razor从.NET核心Web应用程序和JQuery中构建一个下拉列表,以填充表行中关于所选内容的剩余信息。 4.我希望能够通过用户选择进行解析,并将每个记录保存到数据库中,保存在用户名和其他个人信息下 5.我已经把用户列表和产品列表都放到Razor页面上了 我需要帮助的是需要根据需要或通过选项卡操作生成的字段动态块,以提供一个新行

我正在做一个项目,重点是从Razor页面收集数据并保存到数据库。挑战如下: 1.我正在构建一个用户可以用来选择的页面 2.我不知道用户会提前选择多少项 3.我正在使用Razor从.NET核心Web应用程序和JQuery中构建一个下拉列表,以填充表行中关于所选内容的剩余信息。 4.我希望能够通过用户选择进行解析,并将每个记录保存到数据库中,保存在用户名和其他个人信息下 5.我已经把用户列表和产品列表都放到Razor页面上了

我需要帮助的是需要根据需要或通过选项卡操作生成的字段动态块,以提供一个新行,供用户用于添加新产品

下面是我现在在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解析数据并将其保存到数据库进行处理的最佳方法是什么

感谢您的指导和建议


在“获取”操作中,使用产品选项创建一个SelectList,并将其保存在一个ViewBag中,该ViewBag的元素名称与您以后在视图中使用的元素名称相同,因此您以后无需对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中的所有选项的选择列表,只要它有一个与帮助器同名的选择列表。

参考答案和一些选项编写一个新选项并在选中时将其重定向到创建视图将非常容易。然后在创建帖子之后,使操作返回到原始视图。