Categories
Database Development

Datatable Which is Already Fill from Database add new Record from textbox value on click

@model Desai.Model.Bill_Master
@{
ViewBag.Title = "Bill Details";
if (Session["Date"].ToString() != DateTime.Now.Date.ToString())
{
Response.Redirect("~/Login/Index");
}
}

.marge {
margin-bottom: 6px;
}

.content {
min-height: 0px;
padding: 0px;
padding-top: 10px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}

.input-group {
float: Left !important;
padding-right: 10px !important;
padding-left: 0px;
}

.bill-Total {
float: right !important;
}
.addNew {
margin-bottom: 1em;
float: right;
}

Bill Details

  • Transection
  • Bill Details

    Bill No
    Party Name
    Grand Total
    Action

    @using (Html.BeginForm(“Edit”, “Bill_Master”, FormMethod.Post))
    {

    Party Details

    Bill No

    Date

    Party Name

                            @if (ViewBag.Party != null)
                            {
                                @Html.DropDownListFor(model => model.Party_Name, ViewBag.Party as SelectList, "--Select Account--", new { @class = "form-control" })
                                @Html.ValidationMessageFor(model => model.Party_Name, "", new { @class = "text-danger", })
                            }
                        </div>
                        <div class="form-group col-md-4 input-group ">
                            <label>Contact No</label>
                            <input type="text" class="form-control" id="O_Contact" name="O_Contact" value="" placeholder="Contact Number" readonly />
                        </div>
                        <div class="form-group col-md-4 input-group ">
                            <label>Gst_No</label>
                            <input type="text" class="form-control" id="A_GST" name="A_GST" placeholder="GST No" readonly />
                        </div>
                    </div>
                </div>
                <div class="Row">
                    <div class="col-md-12">
                        <div class="form-group col-md-3 input-group">
                            <label>Order No</label>
                            @Html.DropDownListFor(model => model.OrderNo, new SelectList(" "), "-- Select Order--", new { @class = "form-control" })
                            @Html.ValidationMessageFor(model => model.OrderNo, "", new { @class = "text-danger", })
    
                        </div>
                        <div class="form-group col-md-2 input-group ">
                            <label>Meida Type</label>
                            <input type="text" class="form-control" id="O_Media" name="O_Media" placeholder="Media" readonly />
                        </div>
                        <div class="form-group col-md-2 input-group ">
                            <label>Qnty</label>
                            <input type="text" class="form-control" id="O_SqFeet" name="O_SqFeet" placeholder="SqFeet" readonly />
                        </div>
                        <div class="form-group col-md-2 input-group ">
                            <label>Rate</label>
                            <input type="text" class="form-control" id="O_Rate" name="O_Rate" placeholder="Rate" readonly />
                        </div>
                        <div class="form-group col-md-2 input-group ">
                            <label>Total</label>
                            <input type="text" class="form-control" id="O_Total" name="O_Total" placeholder="Total" readonly />
                        </div>
                        <div class="form-group col-md-1 input-group ">
                            <label>Action</label>
                            <input type="button" value="Add" id="add" class="btn btn-default" />
                        </div>
                    </div>
                </div>
                <div class="Row">
                    <div class="col-md-12">
                        <table id="GT" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Order No</th>
                                    <th>Media</th>
                                    <th>SqFeet</th>
                                    <th>Rate</th>
                                    <th>Total</th>
                                    <th>Delete</th>
    
                                </tr>
                            </thead>
                            
                        </table>
                    </div>
                </div>
                <div class="Row">
                    <div class="col-md-12 marge">
                        <div class="Row">
                            <div class="col-md-1">
                                <label>Remark </label>
                            </div>
                            <div class="col-md-6">
                                <input type="text" class="form-control" id="B_Remarks" name="B_Remarks" placeholder="Remarks" />
                            </div>
                            <div class="col-md-2">
                                <label style="float:right;">Sub Total :</label>
    
                            </div>
                            <div class="col-md-3">
                                <input type="text" class="form-control" id="B_Sub" name="B_Sub" onkeyup="Gst()" placeholder="SubTotal" readonly />
    
                            </div>
                        </div>
                    </div>
                </div>
                <div class="Row">
                    <div class="col-md-12 marge">
                        <div class="Row">
                            <div class="col-md-7">
    
                            </div>
                            <div class="col-md-2">
                                <label style="float:right;">Gst :</label>
    
                            </div>
                            <div class="col-md-1">
    
                                <input type="text" class="form-control" id="B_Gst1" name="B_Gst1" onkeyup="Gst()" placeholder="%" />
                            </div>
                            <div class="col-md-2">
                                <input type="text" class="form-control" id="B_Gst" name="B_Gst" onkeyup="Gst()" placeholder="GST" readonly />
    
                            </div>
                        </div>
                    </div>
                </div>
                <div class="Row">
                    <div class="col-md-12 marge">
                        <div class="Row">
                            <div class="col-md-7">
    
                            </div>
                            <div class="col-md-2">
                                <label style="float:right;">Grand Total :</label>
    
                            </div>
    
                            <div class="col-md-3">
                                <input type="text" class="form-control" id="B_Grand" name="B_Grand" placeholder="Grand Total" readonly />
    
                            </div>
    
                        </div>
                    </div>
                </div>
                <div class="Row">
                    <div class="col-md-12">
                        <div class="form-group bill-Total">
                            <div class="col-md-12">
                                <input type="button" value="Save" id="Save" class="btn btn-default" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    

    }

    Scripts:

    var Popup;
    var t, dataTable;
    jQuery.fn.dataTable.Api.register(‘sum()’, function () {
    return this.flatten().reduce(function (a, b) {
    if (typeof a === ‘string’) {
    a = a.replace(/[^\d.-]/g, ”) * 1;
    }
    if (typeof b === ‘string’) {
    b = b.replace(/[^\d.-]/g, ”) * 1;
    }
    return a + b;
    }, 0);
    });
    $(document).ready(function () {
    dataTable = $(“#GT1”).DataTable({
    “bPaginate”: true,
    “bLengthChange”: false,
    “bFilter”: false,
    “bSort”: true,
    “bInfo”: true,
    “bAutoWidth”: false,
    “ajax”: {
    “url”: “/Bill_Master/Getdata”,
    “type”: “Get”,
    “datatype”: “json”
    },
    “dom”: ‘Bfrtip’,
    “columns”: [
    { “data”: “Bill_No” },
    { “data”: “party” },
    { “data”: “GrandTotal” },
    {
    “data”: “Bill_No”, “render”: function (data) {

    return ” ActionToggle Dropdown

  • Edit
  • Delete

  • },
    “orderable”: false,
    “width”: “200px”
    }
    ],
    “language”: {
    “emptyTable”: “No Data Found,Please click On Add New Record”
    }
    });
    $(‘#GT’).on(“click”, “button”, function () {
    console.log($(this).parent());
    t.row($(this).parents(‘tr’)).remove().draw(false);
    var sum = t.column(4).data().sum();
    $(‘#B_Sub’).val(sum);
    });
    $(‘#Save’).click(function () {
    var plainArray = t.column(0).data().toArray();
    var data = {
    Bill_No: $(‘#Bill_No’).val(),
    BillDateString: $(‘#Bill_Date’).val(),
    DescriptiParty: $(‘#Party_Name’).val(),
    SubTotal: $(‘#B_Sub’).val(),
    Gstp: $(‘#B_Gst1’).val(),
    Gstr: $(‘#B_Gst’).val(),
    GrandTotal: $(‘#B_Grand’).val(),
    Remark : $(‘#B_Remarks’).val(),
    OrderDetails: plainArray
    }
    $.ajax({
    type: ‘POST’,
    url: ‘/Bill_Master/Edit’,
    data: JSON.stringify(data),
    contentType: ‘application/json’,
    success: function (data) {
    if (data.status) {
    alert(‘Update Successfully’);
    //here we will clear the form
    plainArray = [];
    t.clear().draw();
    window.location.href = “/Bill_Master/DisplayOrder”;
    }
    else {
    alert(‘Error’);
    }
    $(‘#submit’).text(‘Save’);
    },
    error: function (error) {
    console.log(error);
    $(‘#submit’).text(‘Save’);
    }
    });
    });
    });
    $(“#Party_Name”).change(function () {
    id = $(‘#Party_Name’).val();

    $.get(“/Order_Detail/GetDropdata”,
    { id: id },
    function (data) {
    $(“#OrderNo”).empty();
    $(“#OrderNo”).append(“—-Select Order No—-“)
    $.each(data, function (index, row) {
    $(“#OrderNo”).append(“” + row.OrderNo + “”)
    });
    });
    });
    function Delete(id) {
    if (confirm(‘Are Yous Sure To Delete Record ?’))
    {
    $.ajax({
    type: “POST”,
    url: ‘@Url.Action(“delete”,”Bill_Master”)/’ + id,
    success: function (data) {
    if (data.success) {
    $(‘#table_data’).dataTable( ).api().ajax.reload();
    dataTable.ajax.reload();
    $.notify(data.message, {
    globalPosition: “top center”,
    className :”Warning”
    });
    }
    }
    });
    }
    }
    function Edit(id) {
    if (confirm(‘Are Yous Sure To Edit Bill ?’))
    {
    $.ajax({
    type: “GET”,
    url: ‘@Url.Action(“Edit”,”Bill_Master”)/’ + id,
    success: function (data) {
    if (data.success) {
    $(‘#Bill_No’).attr(‘value’, data.data.Bill_No);
    $(“#Party_Name”).val(data.data.Party_Name);
    $(‘#B_Sub’).attr(‘value’, data.data.SubTotal);
    $(‘#B_Gst1’).attr(‘value’, data.data.Gstp);
    $(‘#B_Gst’).attr(‘value’, data.data.Gstr);
    $(‘#B_Remarks’).attr(‘value’, data.data.Remark);
    $(‘#B_Grand’).attr(‘value’, data.data.GrandTotal);
    $(‘#O_Contact’).attr(‘value’, data.data.Contact);
    $(‘#A_GST’).attr(‘value’, data.data.A_Gst);
    $(“#Party_Name”).change().trigger(data.data.Party_Name);
    }
    }
    });
    t = $(‘#GT’).DataTable({
    “bPaginate”: false,
    “bLengthChange”: false,
    “bFilter”: false,
    “bSort”: false,
    “bInfo”: false,
    “bAutoWidth”: false,
    ‘columnDefs’: [
    {
    ‘targets’: 5,
    ‘data’: null,
    ‘searchable’: false,
    ‘orderable’: false,
    ‘defaultContent’: ‘ Delete’
    }],
    “columns”: [
    { “data”: “OrderNo” },
    { “data”: “O_Media” },
    { “data”: “O_SqFeet” },
    { “data”: “O_Rate” },
    { “data”: “O_Total” },
    ],
    “ajax”: {
    “url”: “/Bill_Master/GetOrder/”+id,
    “type”: “Get”,
    “datatype”: “json”
    },
    });
    }
    }
    $(‘#add’).click(function () {
    var dataObject = {
    Bill_No: $(“#Bill_No”).val(),
    Order_No: $(“#OrderNo”).val(),
    O_Media: $(“#O_Media”).val(),
    O_SqFeet: $(“#O_SqFeet”).val(),
    O_Rate: $(“#O_Rate”).val(),
    O_Total: $(“#O_Total”).val()
    };
    $.ajax({

    url: “@Url.Action(“TempD”,”Bill_Master”)”,
    type: “POST”,
    data: dataObject,
    dataType: “json”,
    success: function (data) {
    t.add
    }

    });

    var sum = t.column(4).data().sum();
    $(‘#B_Sub’).val(sum);
    });
    function Gst() {
    var Total = document.getElementById(‘B_Sub’).value;
    var Percentage = document.getElementById(‘B_Gst1’).value;
    var result = (Total * Percentage) / 100;
    var result2 = parseFloat(result) + parseInt(Total);
    if (!isNaN(result)) {
    document.getElementById(‘B_Gst’).value = result;
    }
    if (!isNaN(result2)) {
    document.getElementById(‘B_Grand’).value = result2;
    }
    }
    $(“#Party_Name”).change(function () {
    id = $(“#Party_Name”).val(),
    $.ajax({
    type: “GET”,
    url: ‘@Url.Action(“Edit”,”Account_Master”)/’ + id,
    success: function (data) {
    if (data.success) {
    $(“#O_Contact”).empty();
    $(“#A_GST”).empty();
    $(‘#O_Contact’).attr(‘value’, data.data.A_Contact);
    $(‘#A_GST’).attr(‘value’, data.data.A_GST);
    }
    }
    });
    })
    $(“#Party_Name”).change(function () {
    t.clear().draw();
    $(“#O_Media”).empty();
    $(“#O_SqFeet”).empty();
    $(“#O_Rate”).empty();
    $(“#O_Total”).empty();
    })
    $(“#OrderNo”).change(function () {
    id = $(“#OrderNo”).val(),
    $.ajax({
    type: “GET”,
    url: ‘@Url.Action(“Edit”,”Order_Detail”)/’ + id,
    success: function (data) {
    if (data.success) {
    $(“#O_Media”).empty();
    $(“#O_SqFeet”).empty();
    $(“#O_Rate”).empty();
    $(“#O_Total”).empty();
    $(‘#O_Media’).attr(‘value’, data.data.O_Media);
    $(‘#O_SqFeet’).attr(‘value’, data.data.O_SqFeet);
    $(‘#O_Rate’).attr(‘value’, data.data.O_Rate);
    $(‘#O_Total’).attr(‘value’, data.data.O_Total);
    }
    }
    });
    })

    first code for fill table GT from Data Base

    public ActionResult GetOrder(int id)
    {
    DataSet ds = rep3.GETO(id);
    List<Bill_Master> Lbm = new List<Bill_Master>();

            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
            {
                Bill_Master Bm1 = new Bill_Master();
                Bm1.OrderNo = ds.Tables[0].Rows[i]["Oreder_No"].ToString();
                Bm1.O_Media = System.Convert.ToInt32(ds.Tables[0].Rows[i]["O_Media"].ToString());
                Bm1.O_SqFeet = System.Convert.ToDecimal(ds.Tables[0].Rows[i]["O_SqFeet"].ToString());
                Bm1.O_Rate = System.Convert.ToDecimal(ds.Tables[0].Rows[i]["O_Rate"].ToString());
                Bm1.O_Total = System.Convert.ToDecimal(ds.Tables[0].Rows[i]["O_Total"].ToString());
                Lbm.Add(Bm1);
            }
            return Json(new { data = Lbm }, JsonRequestBehavior.AllowGet);
        }
    

    Second Code For add new record In Datatable:

    public ActionResult TempD(int Bill_No,string Order_No, int O_Media, decimal O_SqFeet, int O_Rate, decimal O_Total)
    {
    Bill_Master bm = new Bill_Master();
    bm.Bill_No = Bill_No;
    bm.OrderNo = Order_No;
    bm.O_Media = O_Media;
    bm.O_SqFeet = System.Convert.ToDecimal(O_SqFeet);
    bm.O_Rate = O_Rate;
    bm.O_Total = System.Convert.ToDecimal(O_Total);
    DataSet ds = rep3.Temp(bm);
    List<Bill_Master> Lbm = new List<Bill_Master>();

            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
            {
                Bill_Master Bm1 = new Bill_Master();
                Bm1.OrderNo = ds.Tables[0].Rows[i]["Oreder_No"].ToString();
                Bm1.O_Media = System.Convert.ToInt32(ds.Tables[0].Rows[i]["O_Media"].ToString());
                Bm1.O_SqFeet = System.Convert.ToDecimal(ds.Tables[0].Rows[i]["O_SqFeet"].ToString());
                Bm1.O_Rate = System.Convert.ToDecimal(ds.Tables[0].Rows[i]["O_Rate"].ToString());
                Bm1.O_Total = System.Convert.ToDecimal(ds.Tables[0].Rows[i]["O_Total"].ToString());
                Lbm.Add(Bm1);
            }
            int id = Bill_No;
            return RedirectToAction("GetOrder", id);
    
        }
    

    But Table cant display record which is i stored in Temp Table

    Leave a Reply

    Your email address will not be published. Required fields are marked *