how to save multiple data in database from dynamic added textbox in mvc

Question

How do I save multiple data from dynamically added textbox via javascript? I have done the dynamically added textbox for product list and payment terms. What should I do for the controller and View

I have test This but didn't work

here is my controller

 public ActionResult Create([Bind(Include = "PurchaseInvoiceTable,PurchaseInvoiceDetailsTable,PaymentTerm")]InvoiceWrapper model)            
{
    try
    {

        if (ModelState.IsValid)
        {

            db.PurchaseInvoiceTables.Add(model.PurchaseInvoiceTable);                    
            db.SaveChanges();

            var PID = model.PurchaseInvoiceTable.PurchaseInvoiceID;
            model.PurchaseInvoiceDetailsTable.InvoiceID = PID;
            model.PaymentTerm.InvoiceID = PID;

            db.PurchaseInvoiceDetailsTables.Add(model.PurchaseInvoiceDetailsTable);
            db.PaymentTerms.Add(model.PaymentTerm);
            db.SaveChanges();

            return RedirectToAction("Index");
        }

        ViewBag.InvoiceID = new SelectList(db.PurchaseInvoiceTables, "PurchaseInvoiceID", "PurID", model.PurchaseInvoiceDetailsTable.InvoiceID);
        ViewBag.InvoiceID = new SelectList(db.PurchaseInvoiceTables, "PurchaseInvoiceID", "PurID", model.PaymentTerm.InvoiceID);             
        return View(model);
    }
    catch (DbEntityValidationException e)
    {
        //catch validation here
    }

}

Here is my invoiceWrapper

using System;
using System.Collections.Generic;

namespace OnlineInvoiceSystem.Models
{
    public class InvoiceWrapper
    {
        public PurchaseInvoiceTable PurchaseInvoiceTable { get; set; }
        public PurchaseInvoiceDetailsTable PurchaseInvoiceDetailsTable { get; set; }
        public PaymentTerm PaymentTerm { get; set; }
    }
}

here is my javascript You can test it on Jsfiddle

my view is this

@model OnlineInvoiceSystem.Models.InvoiceWrapper 

@{ Layout = null; Layout = "~/Views/Shared/_Layout.cshtml"; } 

@using (Html.BeginForm()) { 

@Html.AntiForgeryToken()

<form>

  @Html.ValidationSummary(true, "", new { @class = "text-danger" })

  <h2>Product List</h2>

  <div class="panel panel-default product_wrapper">

    //dynamic added textbox will appear here

  </div>



  <button class="add_field_button btn btn-primary pull-right">Add More Fields</button>

  <div class="wrapper-payment-details">

    <tr style="background-color:black; color:white;" class="payment_term_wrapper">

      // here is the dynamic added payment terms textbox

    </tr>

  </div>

  <div class="form-group">
    <div>
      <input type="submit" value="Create" class="btn btn-primary pull-right" /> @Html.ActionLink("Back", "Index", null, new { @class = "btn btn-small btn-danger pull-right", @style = "margin-right:2%;" })
    </div>
  </div>

</form>
  }

Refer [this answer](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) for some options — , Dec 07 '16 at 08:55
@StephenMuecke The [The Begin Collection is suitable for all MVC version? ] (https://github.com/danludwig/BeginCollectionItem) currently i was using MVC 5 — nonstop328, Dec 07 '16 at 09:35

score 0 · Answer 1 · answered Dec 07 '16 at 11:33

0

You should Model @Html.TextBoxFor(m => m.PurchaseInvoiceID, new {id="PurchaseInvoiceID" ,@class = "form-control" })
@Html.TextBoxFor(m => m.InvoiceID , new {id="InvoiceID " ,@class = "form-control" })
then pass this variable through ajax or post json

answered Dec 07 '16 at 11:33

Prashant Gosai

41
1
7

can be more specific? i no understand – nonstop328 Dec 08 '16 at 05:58
For refrence This is my Model class – Prashant Gosai Dec 14 '16 at 12:08
public partial class Student { public int Id { get; set; } public string Name { get; set; } public Nullable Standard { get; set; } public Nullable Marks { get; set; } public Nullable Dob { get; set; } public int Age { get; set; } } – Prashant Gosai Dec 14 '16 at 12:08
This is my Controller – Prashant Gosai Dec 14 '16 at 12:09
public JsonResult GetStudent() { var res1 = db.Students.ToList(); var x = from d in res1 select new { Id=d.Id,Name=d.Name,Marks=d.Marks,Standard=d.Standard,Dob=d.Dob, Age = (today - d.Dob.Value.Year) }; JsonResult res = new JsonResult(); res.JsonRequestBehavior = JsonRequestBehavior.AllowGet; res.Data = Newtonsoft.Json.JsonConvert.SerializeObject(x); return res; – Prashant Gosai Dec 14 '16 at 12:10
Sorry For adding student controller is here – Prashant Gosai Dec 14 '16 at 12:11
public JsonResult AddStudent(Student st) { Student s = new Student() { Name = st.Name, Standard = st.Standard, Marks = st.Marks, Dob=st.Dob }; db.Students.Add(s); db.SaveChanges(); } – Prashant Gosai Dec 14 '16 at 12:13
This is my Add View – Prashant Gosai Dec 14 '16 at 12:13
@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } }) – Prashant Gosai Dec 14 '16 at 12:18
This is my save.js file with ajax – Prashant Gosai Dec 14 '16 at 12:19
$('#Save').click(function (e) { var student = { Name: $("#Name").val(), Standard: $("#Standard").val(), Marks: $("#Marks").val(),Dob:$("#Dob").val() }; $.ajax({ url: "/Result/AddStudent", type: 'POST', dataType: 'json', success: function (data) { loadStudentList(); }, data: student }); }); – Prashant Gosai Dec 14 '16 at 12:19

score -1 · Answer 2 · answered Dec 07 '16 at 08:58

-1

You should use a javascript ajax (POST call), with a json containing all of your dynamic added fields (as a list maybe of item value objects), and on server side you need an action method that can process the list, you can't do it directly from MVC.

answered Dec 07 '16 at 08:58

Andrei Filimon

1,138
8
12

Post a solution then – Andrei Filimon Dec 07 '16 at 09:07
I have given a link in the comments to the question:) – Dec 07 '16 at 09:07
It requires a special Helper which is not in the MVC package:) – Andrei Filimon Dec 07 '16 at 09:09
There are 2 options in the answer – Dec 07 '16 at 09:10

how to save multiple data in database from dynamic added textbox in mvc

2 Answers2