I am trying to add a record into table by using jQuery. The sample code is below.
@section scripts
{
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
type="text/css" />
<script>
//Date Picker
$(function ()
{
$('#orderDate').datepicker({ dateFormat: 'mm-dd-yy' })
});
$(document).ready(function () {
var orderItems = [];
// Add Button Click Function
$('#add').click(function () {
//Check Validation Of OrderItems
var isValidItem =false;
if ($('#itemName').val().trim()=='')
{
$('#itemName').siblings('span.error').css('visibility','visible');
isValidItem=false;
}
else
{
$('#itemName').siblings('span.error').css('visibility','hidden');
}
if(! ($('#quantity').val().trim() != '' && ! isNaN($('#quantity').val().trim())))
{
$('#quantity').siblings('span.error').css('visibility','visible');
isValidItem=false;
}
else {
$('#quantity').siblings('span.error').css('visibility','hidden');
}
if(! ($('#rate').val().trim() != '' && ! isNaN($('#rate').val().trim())))
{
$('#rate').siblings('span.error').css('visibility','visible');
isValidItem=false;
}
else {
$('#rate').siblings('span.error').css('visibility','hidden');
}
//add Item To List If Valid
If(isValidItem)
{
OrderItems.push(
{
ItemName: $('#itemName').val().trim(),
Quantity: parseInt($('#quantity').val().trim()),
Rate : parseFloat($('rate').val().trim()),
Total : parseInt($('#quantity').val().trim()) * parseFloat($('rate').val().trim())
});
$('#itemName').val('').focus();
$('#quantity').val('');
$('#rate').val('');
}
GenratedItemTable();
});
// Save Button Click Function
$('#submit').click(function() {
//Validation of Order
var IsAllValid=true;
if (OrderItems.length == 0)
{
$ ('#orderItems').html('<span type="color:red;"> please add order items </span>');
isAllVaild=false;
}
if( $('#orderNo').val().trim() == '')
{
$('#orderNo').siblings('span.error').css('Visibility','visible');
isAllVaild=false;
}
else
{
$('#orderDate').siblings('span.error').css('Visibility','hidden');
}
if( $('#orderDate').val().trim() == '')
{
$('#orderDate').siblings('span.error').css('Visibility','visible');
isAllVaild=false;
}
else
{
$('#orderDate').siblings('span.error').css('Visibility','hidden');
}
// Save If Valid
if (isAllVaild)
{
var data={ OrderNo : $('#orderNo').val().trim(),
OrderDate: $('#orderDate').val().trim(),
Description :$('#description').val().trim(),
OrderItems : orderItems
}
}
$(this).val('Please Wait....');
$.ajax({
url :' /Home/SaveOrder/',
type:"POST",
data:JSON.stringify(data),
datatype:"JSON",
ContentType:"application/json",
success :function (d)
{
//check is successfully save to database
if (d.status == true)
{
alert('SuccessFully Done');
// Clear Form
orderItems=[];
$('# orderNo').val('');
$('# orderDate').val('');
$('# orderItems').empty();
}
else
{
alert('Failed to Save Data');
}
},
error :function()
{
alert('Error. Please Try Again');
}
});
});
// Function For Show Added Items in Table
function GenratedItemTable()
{
If(orderItems.length > 0)
{
var $table = $('<table/>');
$table.append('<thead><tr><th>Item</th><th>Quantity</th><th>Rate</th><th>Total</th></tr></thead>');
var $tbody = $('<tbody/>');
$each(orderItems,function(i,val)
{
var $row=$('<tr/>');
$row.append($('<td/>').html(val.ItemName));
$row.append($('<td/>').html(val.Quantity));
$row.append($('<td/>').html(val.Rate));
$row.append($('<td/>').html(val.Total));
$tbody.append($row);
});
$table.append($tbody);
$('#OrderItems').html($table);
}
}
});
</script><style>
/* Adding some Css For good Looks*/
span.error
{
display:block;
visibility:hidden;
color:red;
font-size:90%;
}
/* Css For Table*/
.container td
{
vertical-align:top;
}
.tablecontainer table
{
width:100%;
border-collapse:collapse;
border-top:1px solid red;
border-right:1px solid red;
}
.tablecontainer th
{
border-bottom:2px solid red ! important;
}
.tablecontainer th, .tablecontainer td
{
text-align:left;
border-left:1px solid red;
padding : 5px;
border-bottom: 1px solid red;
}
.ui.widget
{
font-size: 12px !important;
}
</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Master Details Entry</h2>
<div class ="container" style ="max-width:600px">
<div class ="master">
<h4>Order Details</h4>
</div>
<table>
<tr>
<td> Order No </td>
<td>
<input type="text" id="orderNo" />
<span class="error">Order No Required</span>
</td>
<td>Order Date</td>
<td>
<input type="text" id="orderDate" />
<span class="error">Order Valid OrderDate Required(Ex: MM-DD-YY)</span>
</td>
</tr>
<tr>
<td>Description</td>
<td colspan="3">
<textarea id="description" style="width:100%"></textarea>
</td>
</tr>
</table>
<div class="Details">
<h4>Order Items</h4>
<table width="100%">
<tr>
<td>ItemName</td>
<td>Quantity</td>
<td>Rate</td>
<td> </td>
</tr>
<tr>
<td>
<input type="text" id="itemName" />
<span class="error">ItemName Required</span>
</td>
<td>
<input type="text" id="quantity" />
<span class ="error ">Valid quantity required</span>
</td>
<td>
<input type="text" id="rate" />
<span class="error">Valid Rate Required</span>
</td>
<td>
<input type="button" id="add" value="add" />
</td>
</tr>
</table>
<div id="OrderItems" class="tablecontainer">
</div>
<div style="padding:10px 0px";text-align="right">
<input type="submit" type="button" value="save" style="padding:10px 20px" />
</div>
</div>
</div>
In my order form I have two categories Order Details and Order Items. which is mentioned in the above image.
Under Order Details i have fields like Order No, OrderDate, Description
Under Order Items i have fields like Item Name Quantity Rate And Finally I have Add Button in the Form
If I click the Add button it can't save the data into table in DB. Now what I want is if I click the add button it want to add the data into table and also it want to show in Form as like Grid View . For that which technology I have to use jQuery, JavaScript or any other technology?
I tried using jQuery:
@section scripts
{
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<
<script>
//Date Picker
$(function ()
{
$('#orderDate').datepicker({ dateFormat: 'mm-dd-yy' })
});
$(document).ready(function () {
var orderItems = [];
// Add Button Click Function
$('#add').click(function () {
//Check Validation Of OrderItems
var isValidItem =false;
if ($('#itemName').val().trim()=='')
{
$('#itemName').siblings('span.error').css('visibility','visible');
isValidItem=false;
}
else
{
$('#itemName').siblings('span.error').css('visibility','hidden');
}
if(! ($('#quantity').val().trim() != '' && ! isNaN($('#quantity').val().trim())))
{
$('#quantity').siblings('span.error').css('visibility','visible');
isValidItem=false;
}
else {
$('#quantity').siblings('span.error').css('visibility','hidden');
}
if(! ($('#rate').val().trim() != '' && ! isNaN($('#rate').val().trim())))
{
$('#rate').siblings('span.error').css('visibility','visible');
isValidItem=false;
}
else {
$('#rate').siblings('span.error').css('visibility','hidden');
}
//add Item To List If Valid
If(isValidItem)
{
OrderItems.push(
{
ItemName: $('#itemName').val().trim(),
Quantity: parseInt($('#quantity').val().trim()),
Rate : parseFloat($('rate').val().trim()),
Total : parseInt($('#quantity').val().trim()) * parseFloat($('rate').val().trim())
});
$('#itemName').val('').focus();
$('#quantity').val('');
$('#rate').val('');
}
GenratedItemTable(); });// Save Button Click Function
$('#submit').click(function() {
//Validation of Order
var IsAllValid=true;
if (OrderItems.length == 0)
{
$ ('#orderItems').html('<span type="color:red;"> please add order items </span>');
isAllVaild=false;
}
if( $('#orderNo').val().trim() == '')
{
$('#orderNo').siblings('span.error').css('Visibility','visible');
isAllVaild=false;
}
else
{
$('#orderDate').siblings('span.error').css('Visibility','hidden');
}
if( $('#orderDate').val().trim() == '')
{
$('#orderDate').siblings('span.error').css('Visibility','visible');
isAllVaild=false;
}
else
{
$('#orderDate').siblings('span.error').css('Visibility','hidden');
}
// Save If Valid
if (isAllVaild)
{
var data={ OrderNo : $('#orderNo').val().trim(),
OrderDate: $('#orderDate').val().trim(),
Description :$('#description').val().trim(),
OrderItems : orderItems
}
}
$(this).val('Please Wait....');
$.ajax({
url :' /Home/SaveOrder/',
type:"POST",
data:JSON.stringify(data),
datatype:"JSON",
ContentType:"application/json",
success :function (d)
{
//check is successfully save to database
if (d.status == true)
{
alert('SuccessFully Done');
// Clear Form
orderItems=[];
$('# orderNo').val('');
$('# orderDate').val('');
$('# orderItems').empty();
}strong text
else
{
alert('Failed to Save Data');
}
},
error :function()
{
alert('Error. Please Try Again');
}
});
});
// Function For Show Added Items in Table
function GenratedItemTable()
{
If(orderItems.length > 0)
{
var $table = $('<table/>');
$table.append('<thead><tr><th>Item</th><th>Quantity</th><th>Rate</th><th>Total</th></tr></thead>');
var $tbody = $('<tbody/>');
$each(orderItems,function(i,val)
{
var $row=$('<tr/>');
$row.append($('<td/>').html(val.ItemName));
$row.append($('<td/>').html(val.Quantity));
$row.append($('<td/>').html(val.Rate));
$row.append($('<td/>').html(val.Total));
$tbody.append($row);
});
$table.append($tbody);
$('#OrderItems').html($table);
}
}
});
</script> 
