locked
AJAX call to return success or fail RRS feed

  • Question

  • User-173651909 posted

    I have a button which calls a function onClick and passes a couple of parameters. I need to use AJAX to pass these two parameters to the controller and onsuccess do something client-side. Here's the button and the ajax call:

    <button type="button" class="btn btn-default" onclick="addComponent(@item.ID, @item.VendorID)">Add</button>
    function addComponent(componentId, vendorId) {
    $.ajax({ type: 'POST', url: '@Url.Action("WriteSupportComponent")', contentType: false, dataType: 'json', data: { "componentId": componentId, "vendorId": vendorId }, success: function (response) { console.log('returned success'); $('#' + componentId).remove(); console.log('removed tr'); }, error: function (ex) { console.log('returned failed: ' + ex.responseText); } });
    }

    How do I need to structure the controller to do something (write to db in this case) and then return success or failed back to the function?

    Thanks in advance
    Adam

    Friday, April 22, 2016 9:14 AM

Answers

  • User-2057865890 posted

    Hi Adam-M,

    function addComponent(componentId, vendorId) {
    $.ajax({
                    type: 'POST',
                    url: '@Url.Action("WriteSupportComponent")',
                    contentType: false,
                    dataType: 'json',
                    data: { "componentId": componentId, "vendorId": vendorId },
                    success: function (response) {
                        console.log('returned success');
                        $('#' + componentId).remove();
                        console.log('removed tr');
                    },
                    error: function (ex) {
                        console.log('returned failed: ' + ex.responseText);
                    }
                });
    }

    You should comment out contentType: false.

    function addComponent(componentId, vendorId) {
    $.ajax({
                    type: 'POST',
                    url: '@Url.Action("WriteSupportComponent")',
                    //contentType: false,
                    dataType: 'json',
                    data: { "componentId": componentId, "vendorId": vendorId },
                    success: function (response) {
                        console.log('returned success');
                        $('#' + componentId).remove();
                        console.log('removed tr');
                    },
                    error: function (ex) {
                        console.log('returned failed: ' + ex.responseText);
                    }
                });
    }

    Best Regards,

    Chris

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, April 23, 2016 8:44 AM

All replies

  • User-173651909 posted

    My controller looks like this and returns success but is only passing null values:

     public ActionResult WriteSupportComponent(int? componentId, int? vendorId)
            {
                var supportComponents = new supportcomponents();
                System.Diagnostics.Debug.WriteLine("In POST: WriteSupportComponnet");
                System.Diagnostics.Debug.WriteLine("passed componentId: " + componentId);
                System.Diagnostics.Debug.WriteLine("passed vendorId: " + vendorId);
                try
                {               
                //    supportComponents.ComponentID = componentId;
                //    supportComponents.VendorID = vendorId;
                //    db.supportcomponents.Add(supportComponents);
                //    db.SaveChanges();               
                    System.Diagnostics.Debug.WriteLine("DB SavedChanges");
                }
                catch (Exception ex)
                {
                    System.Diagnostics.Debug.WriteLine(ex.StackTrace);
                    return Json(new { success = false, responseText = "fail" }, JsonRequestBehavior.AllowGet);
                }
                return Json(new { success = true, responseText = "did not fail." }, JsonRequestBehavior.AllowGet);
            }

    In the database the two values are int(null) so I'm trying to pass int? so as to write the passed values. How to do this?

    Friday, April 22, 2016 10:43 AM
  • User-2057865890 posted

    Hi Adam-M,

    function addComponent(componentId, vendorId) {
    $.ajax({
                    type: 'POST',
                    url: '@Url.Action("WriteSupportComponent")',
                    contentType: false,
                    dataType: 'json',
                    data: { "componentId": componentId, "vendorId": vendorId },
                    success: function (response) {
                        console.log('returned success');
                        $('#' + componentId).remove();
                        console.log('removed tr');
                    },
                    error: function (ex) {
                        console.log('returned failed: ' + ex.responseText);
                    }
                });
    }

    You should comment out contentType: false.

    function addComponent(componentId, vendorId) {
    $.ajax({
                    type: 'POST',
                    url: '@Url.Action("WriteSupportComponent")',
                    //contentType: false,
                    dataType: 'json',
                    data: { "componentId": componentId, "vendorId": vendorId },
                    success: function (response) {
                        console.log('returned success');
                        $('#' + componentId).remove();
                        console.log('removed tr');
                    },
                    error: function (ex) {
                        console.log('returned failed: ' + ex.responseText);
                    }
                });
    }

    Best Regards,

    Chris

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, April 23, 2016 8:44 AM