How to add rows dynamically at runtime in ASP.NET MVC using c#?

Question

My model is:

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; }
}

The view:

 <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>

and controller is generated from scaffolding. No additional code is added there. i would like to add multiple transaction items. public Nullable<int> transaction_item { get; set; } The scaffolded view generates a drop down for this. I need a used to be able to add more than one items from front end.

I read this, this and this. The first one looks promising but still i am not able to get how do i add data into database even if i can add elements in front end by using jQuery?

The image you have shown is a form. The code you have show does not have a form or any form controls. Show the correct code. — , Dec 01 '15 at 13:01
see the answer to this post http://stackoverflow.com/questions/33913905/asp-net-mvc-generate-post-forms/33914889#33914889 — Awais Mahmood, Dec 01 '15 at 13:06
what i am thinking is to achieve this, add elements using jQuery in front end, then somehow keep track how many elements are added, this count will work as loop counter, the loop will add data into database... I am not sure about this, either it is correct way or not... — Gaurav Chauhan, Dec 01 '15 at 13:07
If you want to select multiple `transaction_item`, then use `ListBoxFor()`, not `DropDownListFor()` which is for selecting a single item. — , Dec 01 '15 at 13:09
@AwaisMahmood how do i add the data in to database? Like the question you pointed, if i have 6 text boxes in front end, how do i get data in to database? — Gaurav Chauhan, Dec 01 '15 at 13:10
Do you want to select multiple instances of Transaction_item or pass multiple values? — Vini, Dec 01 '15 at 13:21
@Vini i need multiple Transaction_items. i mean user can select many items and then in database i can see who selected what... — Gaurav Chauhan, Dec 01 '15 at 13:23
So basically in the database u want to store different values of transaction item for a user. Then as @StephenMuecke suggested you should use `ListBoxFor`. — Vini, Dec 01 '15 at 13:25
[this](http://stackoverflow.com/a/28924335/5243291) answer should help.. [this](http://stackoverflow.com/questions/10071927/how-to-save-the-value-of-listbox-in-the-database) can also help. — Vini, Dec 01 '15 at 13:27

score 1 · Answer 1 · edited Dec 14 '15 at 06:25

1

Create it using JQuery, then use the jquery prop InserAfter() and add new row.

ex:

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

edited Dec 14 '15 at 06:25

Sabyasachi Mishra

1,677
2
31
49

answered Dec 01 '15 at 13:10

Danilo Antonietto

101
1
7

Like this ?? http://www.codeproject.com/Articles/781851/Add-Delete-Rows-Dynamically-using-jQuery-in-ASP-NE – Gaurav Chauhan Dec 01 '15 at 13:15
This works too, look at jquery page about insertAfter() function – Danilo Antonietto Dec 01 '15 at 15:23

score 1 · Answer 2 · edited May 23 '17 at 11:51

As far as frontend is related you can see answer to this. You can use FormCollection instead of model directly. Then you can assign the values to your rows as :

codelen1

codelen2

codelen3

then you can create a backend method to accept the formcollection as a parameter. In that method you can loop on the number of rows as follows:

[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();
}

How to add rows dynamically at runtime in ASP.NET MVC using c#?

2 Answers2