Jquery function is not working for inserting data using view in ASP MVC 5

Question

0.00/5 (No votes)

See more:

, +

I have two tables, Sale and SDetail, which is 1 to many relationship. I am trying to add values to both tables in single view using Ajax JQuery.

even though view is generated perfectly, button click is not triggering when i click add button.
I foung this ajax code from other website as I am new to this.
so Please somebody help me out with this to solve this asap.

here are my controller class create action method,

 private SchoolContext db = new SchoolContext();

public ActionResult Create()
        {
            ViewBag.CustomerID = new SelectList(db.Customers, "ID", "FullName");
            ViewBag.UserID = new SelectList(db.Users, "ID", "FName");
            return View();
        }

        // POST: /Sale/Create
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public JsonResult Create( Sale sale)
        {
            try {

                ViewBag.CustomerID = new SelectList(db.Customers, "ID", "FullName", sale.CustomerID);
                ViewBag.UserID = new SelectList(db.Users, "ID", "FName", sale.UserID);

            if (ModelState.IsValid)
            {
                // If sales main has SalesID then we can understand we have existing sales Information 
                    // So we need to Perform Update Operation 
                     
                    // Perform Update 
                    if (sale.ID > 0) 
                    {
                        var CurrentSDetail = db.SDetails.Where(p => p.SaleID == sale.ID);

                        foreach (SDetail ss in CurrentSDetail)
                            db.SDetails.Remove(ss);

                        foreach (SDetail ss in sale.SDetails)
                            db.SDetails.Add(ss);

                        db.Entry(sale).State = EntityState.Modified;
                    }
                    //Perform Save 
                    else
                    {
                        db.Sales.Add(sale);
                    } 

        
                db.SaveChanges();
                // If Sucess== 1 then Save/Update Successfull else there it has Exception 
                return Json(new { Success = 1, SalesID = sale.ID, ex = "" });

            }
            }
            catch (Exception ex)
            {
                // If Sucess== 0 then Unable to perform Save/Update Operation and send Exception to View as JSON 
                return Json(new { Success = 0, ex = ex.Message.ToString() });
            }

            return Json(new { Success = 0, ex = new Exception("Unable to save").Message.ToString() });
        }

And my Create view file as follows,

@model ICSTIASHJ.Models.Sale

@*This is for jquery*@
<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
@*This is for jquery UI, for Calender control*@
<script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>

@*This is for JSON*@
<script src="../../Scripts/json2.js" type="text/javascript"></script>

@*These are for DataTables*@
<script src="../../Scripts/DataTables-1.8.1/media/js/jquery.dataTables.js" type="text/javascript"></script>
<script src="../../Scripts/DataTables-1.8.1/extras/TableTools/media/js/TableTools.js" type="text/javascript"></script>
<script src="../../Scripts/DataTables-1.8.1/extras/TableTools/media/js/ZeroClipboard.js" type="text/javascript"></script>

@*These are for styling Control*@
<link href="../../Content/DataTables-1.8.1/extras/TableTools/media/css/TableTools.css" rel="stylesheet" type="text/css" />
<link href="../../Content/DataTables-1.8.1/extras/TableTools/media/css/TableTools_JUI.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" /> 

<script type="text/javascript">



    $(document).ready(function () {

        //here i have used datatables.js (jQuery Data Table)
        $('.tbl').dataTable({
            "sDom": 'T<"clear">lfrtip',
            "oTableTools": {
                "aButtons": [],
                "sRowSelect": "single"
            },
            "bLengthChange": false,
            "bFilter": false,
            "bSort": false,
            "bInfo": false
        });
        $('#SDate').datepicker();
        var oTable = $('.tbl').dataTable();
    });

    //  Adding new row to Table
    //  The following code shows how to read from text boxes and then add them to a DataTable.

    function Add() {
        // Adding item to table
        $('.tbl').dataTable().fnAddData([$('#ProductID').val(), $('#Size').val(), $('#Quantity').val(), $('#UnitPrice').val(), $('#Total').val()]);

        // Making Editable text empty
        $('#ProductID').val("")
        $('#Size').val("")
        $('#Quantity').val("")
        $('#UnitPrice').val("")
        $('#Total').val("")


    }


    //  Delete selected row from Table
    //  Following code shows how to remove a selected item from a DataTable.

    // This function is used fro
    // delete selected row from Detail Table|
    // set deleted item to Edit text Boxes
    function DeleteRow() {

        // Here I have used DataTables.TableTools plugin for getting selected row items
        var oTT = TableTools.fnGetInstance('tbl'); // Get Table instance
        var sRow = oTT.fnGetSelected(); // Get Selected Item From Table


        // Set deleted row item to editable text boxes
        $('#ProductID').val($.trim(sRow[0].cells[0].innerHTML.toString()));
        $('#Size').val(jQuery.trim(sRow[0].cells[1].innerHTML.toString()));
        $('#Quantity').val($.trim(sRow[0].cells[2].innerHTML.toString()));
        $('#UnitPrice').val($.trim(sRow[0].cells[2].innerHTML.toString()));
        $('#Total').val($.trim(sRow[0].cells[2].innerHTML.toString()));

        $('.tbl').dataTable().fnDeleteRow(sRow[0]);

    }

    //   Save/Posting Data to sales Controller

    //  Here we have two steps:
    //  Read view data and create JSON object
    //  Ajax post

    function Sales_save() {
        // Step 1: Read View Data and Create JSON Object

        // Creating SalesSub Json Object
        var SDetail = { "SaleID": "", "ProductID": "", "Size": "", "Quantity": "", "UnitPrice": "", "Total": "" };


        // Creating SalesMain Json Object
        var Sale = { "ID": "", "SaleInvoiceNo": "", "AccntInvoiceNo": "", "SDate": "", "SubTotal": "", "Discount": "", "NetAmount": "", "PaymentID": "", "CustomerID": "", "UserID": "", "SalesSubs": [] };

        // Set Sales Main Value
        Sale.ID = $("ID").val();
        Sale.SaleInvoiceNo = $("#SaleInvoiceNo").val();
        Sale.AccntInvoiceNo = $("#AccntInvoiceNo").val();
        Sale.SDate = $("#SDate").val();
        Sale.SubTotal = $("SubTotal").val();
        Sale.Discount = $("#Discount").val();
        Sale.NetAmount = $("#NetAmount").val();
        Sale.PaymentID = $("#PaymentID").val();
        Sale.CustomerID = $("#CustomerID").val();
        Sale.UserID = $("#UserID").val();


        // Getting Table Data from where we will fetch Sales Sub Record
        var oTable = $('.tbl').dataTable().fnGetData();



        for (var i = 0; i < oTable.length; i++) {

            // IF This view is for edit then it will read SalesId from Hidden field
            if ($('h2').text() == "Edit") {
                SDetail.SaleID = $('#ID').val();
            }
            else {
                SDetail.SaleID = 0;
            }

            // Set SalesSub individual Value
            SDetail.ProductID = oTable[i][0];
            SDetail.Size = oTable[i][1];
            SDetail.Quantity = oTable[i][2];
            SDetail.UnitPrice = oTable[i][3];
            SDetail.Total = oTable[i][4];

            // adding to SalesMain.SalesSub List Item
            Sale.SDetail.push(SDetail);
            SDetail = { "SaleID": "", "ProductID": "", "Size": "", "Quantity": "", "UnitPrice": "", "Total": "" };

        }
        // Step 1: Ends Here


        // Set 2: Ajax Post
        // Here i have used ajax post for saving/updating information
        $.ajax({
            url: '/Sale/Create',
            data: JSON.stringify(Sale),
            type: 'POST',
            contentType: 'application/json;',
            dataType: 'json',
            success: function (result) {

                if (result.Success == "1") {
                    window.location.href = "/Sale/index";
                }
                else {
                    alert(result.ex);
                }
            }
        });


    }


</script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>


@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>SalesMain</legend>
        @if (Model != null)
        {

            <input type="hidden" id="ID" name="SalesId" value="@Model.ID" />
        }


        <div class="form-horizontal">
            <h4>Sale</h4>
            <hr />
            @Html.ValidationSummary(true)

            <div class="form-group">
                @Html.LabelFor(model => model.SaleInvoiceNo, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.SaleInvoiceNo)
                    @Html.ValidationMessageFor(model => model.SaleInvoiceNo)
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.AccntInvoiceNo, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.AccntInvoiceNo)
                    @Html.ValidationMessageFor(model => model.AccntInvoiceNo)
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.SDate, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.SDate)
                    @Html.ValidationMessageFor(model => model.SDate)
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.SubTotal, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.SubTotal)
                    @Html.ValidationMessageFor(model => model.SubTotal)
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Discount, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Discount)
                    @Html.ValidationMessageFor(model => model.Discount)
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.NetAmount, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.NetAmount)
                    @Html.ValidationMessageFor(model => model.NetAmount)
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.CustomerID, "CustomerID", new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("CustomerID", String.Empty)
                    @Html.ValidationMessageFor(model => model.CustomerID)
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.UserID, "UserID", new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("UserID", String.Empty)
                    @Html.ValidationMessageFor(model => model.UserID)
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>
        </div>
    </fieldset>
    
     <br />

    <fieldset>
        <legend>Add Item</legend>

        <div class="row">
            <div class="form-group">
                <div class="col-md-2"> <label>Product Name :</label> </div>
                <div class="col-md-2"> @Html.TextBox("ProductID") </div>
            </div>

            <div class="form-group">
                <div class="col-md-2"> <label>Size :</label> </div>
                <div class="col-md-2"> @Html.TextBox("Size") </div>
            </div>

            <div class="form-group">
                <div class="col-md-2"> <label>Quantity :</label> </div>
                <div class="col-md-2"> @Html.TextBox("Quantity") </div>
            </div>
        </div>
        <div class="row">

            <div class="form-group">
                <div class="col-md-2"> <label>UnitPrice :</label> </div>
                <div class="col-md-2"> @Html.TextBox("UnitPrice") </div>
            </div>


            <div class="form-group">
                <div class="col-md-2"> <label>Total :</label> </div>
                <div class="col-md-2"> @Html.TextBox("Total") </div>
            </div>

            <div class="col-md-2 col-md-offset-2">
                <input type="button" value="Add" onclick="Add()" />
            </div>
        </div>
        <br />
        <br />

        <table class=" table table-striped" id="tbl">

            <thead>
                <tr>
                    <th> Product Name</th>
                    <th> size</th>
                    <th> Quantity</th>
                    <th> Unit Price</th>
                    <th> Total</th>
                </tr>

            </thead>

            <tbody>
                @if (Model != null)
                {
                    foreach (var item in Model.SDetails)
                    {
                        <tr>
                            <td> @Html.EditorFor(i => item.product)</td>
                            <td> @Html.DisplayTextFor(i => item.Size)</td>
                            <td> @Html.DisplayTextFor(i => item.Quantity)</td>
                            <td> @Html.DisplayTextFor(i => item.UnitPrice)</td>
                            <td> @Html.DisplayTextFor(i => item.Total)</td>
                        </tr>
                    }

                }


            </tbody>

        </table>

        <br />
        <div>
            <input type="button" value="Delete Selected Row" onclick="DeleteRow()" />
        </div>
    </fieldset>
    <br />
    <div>
        <input type="button" value="Sales Save" onclick="Sales_save()" />
    </div>

    
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Posted 16-Aug-15 21:06pm

Member 11883599

Add a Solution

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

xszaboj · Answer 1 · 2015-08-16T22:29:00

Solution 1

I think problem might be, that you expect AntiForgeryToken ([ValidateAntiForgeryToken]), but you are not sending one. Try to remove it for a while if your controller will be called.

Posted 16-Aug-15 22:29pm

xszaboj

Comments

Member 11883599 17-Aug-15 8:00am

Thanx for quick reply, but i tried removing @Html.AntiForgeryToken() from view and [ValidateAntiForgeryToken] from controller class. but problem stil exists. please try to help me again

xszaboj 17-Aug-15 8:07am

Ok, What exactly is not working? Add() function or Sales_save() ?

Member 11883599 17-Aug-15 8:37am

Right now i am worrying about Add() method, once i finish that has to take care of Sales_save().

xszaboj 17-Aug-15 8:42am

In that case do you know how to debug javascript code in a browser? Try to debug if your Add function is called. And if so what about that method inside? I cannot see source in your examples? If add function is not call just add on click event on add buton using jquery

Member 11883599 21-Aug-15 12:00pm

before i try to debug, i put a break on function, run the page and click ADD button in IE,then this message has appeared.
"Unhandled exception at line 97, column 9 in http://localhost:52992/Sale/Create

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'dataTable'"

and in page source, this has got highlighted,
$('.tbl').dataTable().fnAddData([$('#ProductID').val(), $('#Size').val(), $('#Quantity').val(), $('#UnitPrice').val(), $('#Total').val()]);

is this enough u to troubleshoot ??

xszaboj 21-Aug-15 14:47pm

well that error basically tells you what is wrong. There is no method called dataTable(), so I guess that you forgot to add some library that will provide you this method or you are calling it wrong.

Member 11883599 22-Aug-15 3:35am

i reinstalled jquery version and tried. now im getting same error but highlighting DataTble method.
$('.tbl').dataTable({
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"aButtons": [],
"sRowSelect": "single"
},
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false
});
can you check for any syntax mistake or it can be else ?

xszaboj 23-Aug-15 8:06am

I guess you are using this library right? https://www.datatables.net/
check their documentation ;) that might help. i've never used it before so I am not able to help you sorry.

Member 11883599 24-Aug-15 8:44am

ohh really ?? i will try that also. thank you very much helping me so far, if you have any link that i can follow to achive same thing in different way, please mention it. thanks again

Sanket Saxena · Answer 2 · 2015-08-16T23:17:00

Solution 2

Could you please check your method should call under $(document).ready() function. Its seems its outside of that.

Hope it helps :)

Posted 16-Aug-15 23:17pm

Sanket Saxena

Comments

Member 11883599 17-Aug-15 8:04am

thanx for quick reply. Im sorry can you explain/specify it little more. which method i shuld call under $(document).ready() function ??
it is outside of what ??
should all method be inside function inclusing ajax function ??
please b kind enough to reply

Sanket Saxena 17-Aug-15 8:37am

Could you please debug your javascript Sales_save() method and tell me where it stuck?

Member 11883599 21-Aug-15 12:01pm

before i try to debug, i put a break on function, run the page and click ADD button in IE,then this message has appeared.
"Unhandled exception at line 97, column 9 in http://localhost:52992/Sale/Create

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'dataTable'"

and in page source, this has got highlighted,
$('.tbl').dataTable().fnAddData([$('#ProductID').val(), $('#Size').val(), $('#Quantity').val(), $('#UnitPrice').val(), $('#Total').val()]);

is this enough u to troubleshoot ??

Jquery function is not working for inserting data using view in ASP MVC 5

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Jquery function is not working for inserting data using view in ASP MVC 5

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us