In my project I want to use a datatable in two ways.
The data will be inserted with the data from index.cshtml.
The page will then redirect to the purchaseDetails.cshtml page.
Then the data that will be displayed is based on the invoice number of the index.cahtml(<input type="text" id="invoiceno"/>).
And in the purchaseDetails.cshtml page I have two input dates and a button with
which I can filter the dates and see the previous data.
This work is my solution. But I can't figure out how to display the data using the invoice number as a parameter in the $(document).ready(function() load.
If any experienced help. Thanks in advance Abhiyan
public IActionResult Index()
{
return View();
}
public IActionResult adddata(int IDS, int qty, DateTime idate, string invoiceno)
{
{
var pro = new tbl_purchase();
pro.productID = IDS;
pro.Qty = qty;
pro.PurchaseDate = idate;
pro.InvoiceNO = invoiceno;
_context.tbl_Purchases.Add(pro);
_context.SaveChanges();
}
return RedirectToAction("PurchaseDetails");
}
public IActionResult PurchaseDetails()
{
return View();
}
public JsonResult PurchaseList2(DateTime firstdate, DateTime lastdate)
{
string query = $"Select * from tbl_Purchases where PurchaseDate between '{firstdate}'and '{lastdate}'";
var List = _context.tbl_Purchases.FromSqlRaw(query);
return Json(List);
}
//Models
public class tbl_purchase
{
[Key]
public int purchasesId { get; set; }
public DateTime? PurchaseDate { get; set; }
public String InvoiceNO { get; set; }
[Required]
public int productID { get; set; }
public int Qty { get; set; }
}
@*index.cshtml*@
<div>
Date :
<input type="date" id="clander" />
</div>
<div>
Invoice No :
<input type="text" id="invoiceno" />
</div>
<div>
Product ID:
<input type="text" id="ProdcutId" />
</div>
<div>
Qty:
<input type="text" id="Qty" />
</div>
<div>
<button onclick="addata()" class="btn btn-primary btn-sm">Add New Company</button>
<a class="btn btn-primary" asp-action="PurchaseDetails" asp-controller="Home">PurchaseDetails</a>
</div>
<script>
function addata() {
var objdate = {
'IDS': $('#ProdcutId').val(),
'qty': $('#Qty').val(),
'idate': $('#clander').val(),
'invoiceno': $('#invoiceno').val()
};
$.ajax({
type: 'post',
url: '/Home/adddata',
data: objdate,
success: function () {
alert("Success")
window.location.href = "/Home/PurchaseDetails";
},
Error: function () {
alert("Not Save")
}
})
}
</script>
@*purchaseDetails.cshtml*@
<h1>PurchaseDetails</h1>
First Date:
<input type="date" id="first" />
End Date:
<input type="date" id="last" />
<button onclick="SearchByDate()" class="btn btn-primary btn-sm">Search By Date</button>
<table id="MyDataTable" class="zui-table zui-table-rounded">
<thead>
<tr>
<th>
Date
</th>
<th>
Product ID
</th>
<th>
Qty
</th>
<th>
Invoice No
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function(){
});
function SearchByDate() {
var d1 = $("#first").val()
var d2 = $("#last").val()
var objdate = {
'firstdate': d1,
'lastdate': d2
};
$.ajax({
type: "Get",
url: "/Home/PurchaseList2",
data: objdate,
success: function (response) {
BindDataTable(response);
}
})
}
var BindDataTable = function (response) {
$("#MyDataTable").DataTable({
"bDestroy": true,
"aaData": response,
"aoColumns": [
{"mData": "purchaseDate",},
{ "mData": "productID" },
{ "mData": "qty" },
{ "mData": "invoiceNO" }]
});
}
</script>