3

I have this specific situation.I have a database first project being developed in Visual Studio 2013 community. I have views and controllers generated from scaffolding. Now i have one specific view in which i am adding HTML elements dynamically using jQuery. The view and jQuery is working as expected, but how do i pass data to controller from this dynamically generated rows?

How to add dynamically generated content?

My view (index.cshtml)

 <div class="form-group" id="transitem">
        <div class="col-md-11" id="tritem">
                @Html.LabelFor(model => model.transaction_item_id, "transaction_item_id", htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-3">
                    <div name="">@Html.DropDownList("transaction_item_id", null, htmlAttributes: new { @class = "form-control" })</div>
                    @Html.ValidationMessageFor(model => model.transaction_item_id, "", new { @class = "text-danger" })
                </div>


            <div >
                @Html.LabelFor(model => model.transaction_itmQty, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-3">
                    @Html.EditorFor(model => model.transaction_itmQty, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.transaction_itmQty, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="col-md-2"><input type="button" class="btnPlus" value="+" /></div>
        </div>
     </div>

This view has trasitem in which i append tritem via jQuery. The jQuery is as follows.

jQuery in same view

<script type="text/javascript">
var itm_cnt = 1;
$(document).ready(function () {
    $(document).on("click", ".btnPlus", function () {
        $("#transitem").append($('#tritem').clone());
        itm_cnt = itm_cnt + 1;
        window.alert(itm_cnt);
    });
});
</script>

<script type="text/javascript">
$(document).ready(function () {
    $(document).on("click", ".btnsub", function () {
        var itm = $("#tritem").length;

    });
});
</script>

here is the create method from controller. It saves only first row of my dynamically generated html elements. How do i change this method so i can save all my data, not only first row.

// POST: trans_junction/Create
    // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
    // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "transaction_id,transaction_req_id,transaction_date,transaction_person_id,transaction_priority_id,transaction_item_id,transaction_site_id,transaction_dept_id,transaction_item_status,transaction_itmQty")] trans_junction trans_junction)
    {
        if (ModelState.IsValid)
        {
            db.trans_junction.Add(trans_junction);
            var test = trans_junction.transaction_item_id;
            db.SaveChanges();

            return RedirectToAction("Index");
        }

        ViewBag.transaction_dept_id = new SelectList(db.departments, "department_id", "department_name", trans_junction.transaction_dept_id);
        ViewBag.transaction_item_id = new SelectList(db.items, "item_id", "item_name", trans_junction.transaction_item_id);
        ViewBag.transaction_person_id = new SelectList(db.people, "person_id", "person_name", trans_junction.transaction_person_id);
        ViewBag.transaction_priority_id = new SelectList(db.priorities, "priority_id", "priority_name", trans_junction.transaction_priority_id);
        ViewBag.transaction_req_id = new SelectList(db.requests, "request_id", "request_id", trans_junction.transaction_req_id);
        ViewBag.transaction_site_id = new SelectList(db.sites, "site_id", "site_name", trans_junction.transaction_site_id);
        ViewBag.transaction_item_status = new SelectList(db.status, "status_id", "status_name", trans_junction.transaction_item_status);
        return View(trans_junction);
    }

This is my model, found under edmx file.

public partial class trans_junction
{
    public int transaction_id { get; set; }
    public Nullable<int> transaction_req_id { get; set; }
    public Nullable<System.DateTime> transaction_date { get; set; }
    public Nullable<int> transaction_person_id { get; set; }
    public Nullable<int> transaction_priority_id { get; set; }
    public Nullable<int> transaction_item_id { get; set; }
    public Nullable<int> transaction_site_id { get; set; }
    public Nullable<int> transaction_dept_id { get; set; }
    public Nullable<int> transaction_item_status { get; set; }
    public Nullable<int> transaction_itmQty { 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; }
}
  • 1
    Binding system in Mvc works with the `name` attribute of the elements. – Farhad Jabiyev Jan 25 '16 at 13:18
  • Refer some other options [here](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) and [here](http://stackoverflow.com/questions/29837547/set-class-validation-for-dynamic-textbox-in-a-table/29838689#29838689) –  Jan 26 '16 at 08:26

0 Answers0