How to save dynamically added rows in MVC
This article shows How to add dynamically rows on button
click event and save all the data into database using asp.net mvc
Here we are performing this problem using below example with
detailed description.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Time In
|
Time Out
|
|
|
|
|
|
__________
|
___________
|
Add New
|
|
|
|
|
__________
|
___________
|
Add New
|
|
|
|
|
|
|
|
|
|
|
|
Save
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
In
|
Out
|
Duration
|
Action
|
|
|
|
09:30
|
12:30
|
03:00
|
Delete
|
|
|
|
13:00
|
16:30
|
03:30
|
Delete
|
|
|
|
16:45
|
19:00
|
02:15
|
Delete
|
|
|
|
|
|
|
|
|
|
|
In Hours
|
Out Hours
|
First In
|
Last Out
|
|
|
|
08:45
|
00:45
|
09:30
|
19:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Here is the problem statement.
When you click on the “Add New” Button, it should generate a
new row for the time entry below the existing one. Users should be able to add
as many entries he/she wants to add.
Clicking on Save, all those entries should be saved in the database and should
be displayed in the below grid with proper Duration, In Hours, Out Hours, First
In & Last Out values.
Clicking on Delete should ask for confirmation “Are you sure
you want to delete?”. If the user says Yes, that entry should be deleted and
update all calculated fields.
Please find Below steps :
1. Create Database Table :
CREATE TABLE [dbo].[TimeEntryDetail](
[TimeEntryId] [int] IDENTITY(1,1) NOT NULL,
[InTime] [time](7) NOT NULL,
[OutTime] [time](7) NOT NULL,
[Duration] [time](7) NOT NULL,
2. Add Using Database First Approach Data model in your application.
namespace Test.Models
{
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
public partial class TimeEntryDetail
{
public int TimeEntryId { get; set; }
[Display(Name ="In")]
public System.TimeSpan InTime { get; set; }
[Display(Name = "Out")]
public System.TimeSpan OutTime { get; set; }
public System.TimeSpan Duration { get; set; }
}
}
3. Add following code to view to add dynamic rows using jquery.
@model IEnumerable<Test.Models.TimeEntryDetail>
@using Test.Models
@{
ViewBag.Title = "Create";
}
<table id="tblTimeEntry" class="table" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th style="width:150px">Time In</th>
<th style="width:150px">Time Out</th>
<th></th>
</tr>
</thead>
<tbody>
@*@foreach (TimeEntryDetail timedetail in Model)
{
<tr>
<td>@timedetail.InTime</td>
<td>@timedetail.OutTime</td>
</tr>
}*@
</tbody>
<tfoot>
<tr>
<td><input type="time" id="txtInTime" /></td>
<td><input type="time" id="txtOutTime" /></td>
<td><input type="button" id="btnAdd" value="Add New" class="btn btn-primary" /></td>
</tr>
</tfoot>
</table>
<br />
<input type="button" id="btnSave" value="Save" class="btn btn-success" />
<br /><br />
@Html.ActionLink("Go to Time Entries", "Detail")
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script type="text/javascript">
function validEntry()
{
var In = $("#txtInTime").val();
var Out = $("#txtOutTime").val();
if (In == "" || Out == "") {
alert("Please valid In and Out Entry both");
return false;
}
else { return true;}
}
$("body").on("click", "#btnAdd", function () {
if (validEntry() == true) {
var txtInTime = $("#txtInTime");
var txtOutTime = $("#txtOutTime");
var tBody = $("#tblTimeEntry > TBODY")[0];
var row = tBody.insertRow(-1);
var cell = $(row.insertCell(-1));
cell.html(txtInTime.val());
cell = $(row.insertCell(-1));
cell.html(txtOutTime.val());
txtInTime.val("");
txtOutTime.val("");
}
});
$("body").on("click", "#btnSave", function () {
var timeDetails = new Array();
$("#tblTimeEntry TBODY TR").each(function () {
var row = $(this);
var timedetail = {};
timedetail.InTime = row.find("TD").eq(0).html();
timedetail.OutTime = row.find("TD").eq(1).html();
timedetail.duration = (new Date(timedetail.OutTime) - new Date(timedetail.InTime));
timeDetails.push(timedetail);
});
//Send the JSON array to Controller using AJAX.
$.ajax({
type: "POST",
url: "/TimeEntry/Create",
data: JSON.stringify(timeDetails),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
alert(r + " Entry(s) Added into Timesheet");
}
});
});
</script>
4. Add below following code to Controller.
[HttpPost]
public JsonResult Create(List<TimeEntryDetail> timeentrydetails)
{
using (DB_TechAvidusEntities db = new DB_TechAvidusEntities())
{
if (timeentrydetails == null)
{
timeentrydetails = new List<TimeEntryDetail>();
}
foreach (TimeEntryDetail detail in timeentrydetails)
{
db.TimeEntryDetails.Add(detail);
}
int insertedRecords = db.SaveChanges();
return Json(insertedRecords,JsonRequestBehavior.AllowGet);
}
}
