How to Save form values using Json
- First create this index,cshtml
@using GridMvc.Html;
@using Test.Models;
@model
IEnumerable<Test.Models.GridTest>
@{
ViewBag.Title = "Home Page";
}
<div class="well">
<h1>ASP.NET</h1>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<div class="panel-danger">
<div class="row" style="margin-top:5px;">
<div class="col-lg-3">Invoice No</div>
<div class="col-lg-3"><input type="text" id="InvoiceNO" /></div>
</div>
<div class="row" style="margin-top:5px;">
<div class="col-lg-3">Invoice Date</div>
<div class="col-lg-3"><input type="text" id="InvDate" /></div>
</div>
<div class="row" style="margin-top:5px;">
<div class="col-lg-3">Customer</div>
<div class="col-lg-3">
@Html.DropDownList("Customer", null, "Select
Customer", htmlAttributes: new { id = "custId", @class = "form-control", style = "width:137px;Height:30px" })
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row" style="margin-top:5px;">
<div class="col-lg-3">Gross Amount</div>
<div class="col-lg-3"><input type="text" id="GrossAmount" /></div>
</div>
<div class="row" style="margin-top:5px;">
<div class="col-lg-3">Paid Amount</div>
<div class="col-lg-3"><input type="text" id="PaidAmount" /></div>
</div>
<div class="row" style="margin-top:5px;">
<div class="col-md-offset-3">
<input type="button" name="Item" value="Item" id="Item" style="width:200px;" />
</div>
</div>
</div>
</div>
<br />
<div class="col-md-12" style="margin-top:100px;">
<div class="row">
<div class="col-md-offset-8">
<input type="button" name="Save" value="Save" id="Save" />
<input type="button" name="Cancel" value="Cancel" id="Cancel" />
</div>
</div>
</div>
</div>
<div id="DivToAppendPartialVoew" style="display:none;">
</div>
<div class="table-responsive" id="tblPanel">
<table class="table" id="DetailGrid">
<tr>
<th>Item Code</th>
<th>Item Code</th>
<th>Order Qty</th>
</tr>
</table>
</div>
<link href="@Url.Content("~/Content/jquery-ui.css")" rel="stylesheet" />
<link href="@Url.Content("~/Content/jquery-ui.theme.css")" rel="stylesheet" />
<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" />
<script src="@Url.Content("~/Scripts/jquery-1.10.2.js")"></script>
<script src="@Url.Content("~/Content/Invoice.js")"></script>
- Next Create this Mainform.js
$(document).ready(function () {
////////////////Table
Row Delete/////////////////////
$('#DetailGrid').on('click', '#btnLineDel', function () {
$(this).parent().parent().remove();
});
$('#Save').click(function () {
//alert('');
var InvHeader = [];
var InvDetail = [];
var invNo = $('#InvoiceNO').val();
var invDate = $('#InvDate').val();
var cusID = $('#custId').val();
var grossAmount = $('#GrossAmount').val();
var paidAmount = $('#PaidAmount').val();
var trDate = new Date();
//Validate
if (invNo == "")
{ $('#InvoiceNO').css('border', '1px solid red'); return false; }
//this blue background ones names must equal in to entity names
InvHeader = {
InvoiceNo: invNo,
CustomerCode: cusID,
InvoiceDate: invDate,
GrossAmount: grossAmount,
PayiedAmount: paidAmount,
TrDate: trDate
};
var gridTbl =
document.getElementById('DetailGrid');//Get Eliment
var tblRowCount = $('#DetailGrid tr').length;//Get Table Row Count
(#DetailGrid is Table Name)
//Featch
and Push data to array
for (c = 0; c <
tblRowCount; c++) {
if (c == 0)
continue;
var itemCode =
gridTbl.rows[c].cells[0].innerHTML;
var itemname =
gridTbl.rows[c].cells[1].innerHTML;
var qty = gridTbl.rows[c].cells[2].innerHTML;
var unit = 0;
InvDetail.push({
ItemID: itemCode,
Qty: qty,
UnitPrice: unit
});
}
//To
Check Cercular referances
//var
cache = [];
//var
invDetailx = JSON.stringify(InvDetail, function (key, value) {
// if (typeof value === 'object' &&
value !== null) {
// if (cache.indexOf(value) !== -1) {
// // Circular reference found,
discard key
// return;
// }
// // Store value in our collection
// cache.push(value);
// }
// return value;
//});
//cache
= null;
//
Ajax Call
$.ajax({
url: '/Home/Save',
data: JSON.stringify({ 'oInvHeader': InvHeader, 'oInvDetail': InvDetail }),
type: 'POST',
contentType: 'application/json;charset=utf-8',
dataType: 'json',
success: function (data) {
},
error: function (result) {
alert(result.toString());
}
});
});
});
-------------------------------------------------------------------------------------------------------------------
- Now add this Home Controler
[HttpPost]
public ActionResult Save(tbl_InvoiceHeader oInvHeader, List<tbl_InvoiceDetail> oInvDetail)
{
MangoEntities mog = new MangoEntities();// Entity Object
using (DbContextTransaction dbTr =
mog.Database.BeginTransaction())
{
try
{
mog.tbl_InvoiceHeader.Add(oInvHeader);
mog.SaveChanges();
foreach (tbl_InvoiceDetail oDetail in oInvDetail)
{
mog.tbl_InvoiceDetail.Add(oDetail);
mog.SaveChanges();
}
dbTr.Commit();
}
catch (Exception ex)
{
dbTr.Rollback();
}
}
return Json("", JsonRequestBehavior.AllowGet);
}
Comments
Post a Comment