如何在运行时使用 c# 在 ASP.NET MVC 中动态添加行？ [关闭]

Question

我的模型是：

public partial class transaction
{
    public int transaction_id { get; set; }
    public Nullable<int> transaction_req_no { get; set; }
    public Nullable<System.DateTime> transaction_date { get; set; }
    public Nullable<int> transaction_reqst_by { get; set; }
    public Nullable<int> transaction_priority { get; set; }
    public Nullable<int> transaction_item { get; set; }
    public Nullable<int> transaction_site { get; set; }
    public Nullable<int> transaction_dept { get; set; }
    public Nullable<int> transaction_reqst_status { get; set; }

    public virtual department department { get; set; }
    public virtual item item { get; set; }
    public virtual person person { get; set; }
    public virtual priority priority { get; set; }
    public virtual request request { get; set; }
    public virtual site site { get; set; }
    public virtual status status { get; set; }
}

观点：

 <div class="form-horizontal">
        <h4>transaction</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.transaction_req_no, "transaction_req_no", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("transaction_req_no", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.transaction_req_no, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.transaction_date, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.transaction_date, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.transaction_date, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.transaction_reqst_by, "transaction_reqst_by", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("transaction_reqst_by", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.transaction_reqst_by, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.transaction_priority, "transaction_priority", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("transaction_priority", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.transaction_priority, "", new { @class = "text-danger" })
            </div>
        </div>


            <div class="form-group">
                @Html.LabelFor(model => model.transaction_item, "transaction_item", htmlAttributes: new { @class = "control-label col-md-2" })

                <div class="col-md-4">
                    @Html.DropDownList("transaction_item", null, htmlAttributes: new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.transaction_item, "", new { @class = "text-danger" })
                </div>
            </div>




        <div class="form-group">
            @Html.LabelFor(model => model.transaction_site, "transaction_site", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("transaction_site", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.transaction_site, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.transaction_dept, "transaction_dept", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("transaction_dept", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.transaction_dept, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.transaction_reqst_status, "transaction_reqst_status", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("transaction_reqst_status", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.transaction_reqst_status, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>

}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

并且控制器是从脚手架生成的。那里没有添加额外的代码。我想添加多个交易项目。 public Nullable<int> transaction_item { get; set; } 脚手架视图为此生成一个下拉列表。我需要一个能够从前端添加多个项目的工具。

我读过this、this 和this。 first 看起来很有希望，但我仍然无法了解如何将数据添加到数据库中，即使我可以使用 jQuery 在前端添加元素？

Answer 1

至于前端相关，您可以看到answer to this。您可以直接使用 FormCollection 而不是模型。然后您可以将值分配给您的行：

codelen1

codelen2

codelen3

然后您可以创建一个后端方法来接受 formcollection 作为参数。在该方法中，您可以按如下方式循环行数：

[HttpPost]
publict ActionResult DynamicRows(FormCollection f)
{
    int i = Convert.ToInt32(f["level"]); // you will set the number of rows added from JQuery
    for (int a = 0; a <= i; a++)
    {
         ABC lvl = new ABC();
         lvl.S1 = a.ToString();
         lvl.N1 = a;
         lvl.N2 = Convert.ToInt32(f["codelen" + a.ToString()]); // here you are getting back the values as codelen1..codelen2..codelen3

         // your other logic comes here... anything you want to do with the data
         WebDb.ABC.Add(lvl);

    }
    WebDb.SaveChanges();
}

Answer 2

使用JQuery 创建它，然后使用jquery prop InserAfter() 并添加新行。

例如：

var r = $("HTML CODE");
$(r).insertAfter($("#BlaBlaBla"));