Click actionlink on view, controller checks condition, returns JSON, jQuery Ajax doesn't work

Question:

Click ActionLink on view, controller checks condition, returns JSON, JQuery Ajax doesn't work.

Click the "Delete" ActionLink, "Delete" controller if customer's "Orders" property is null, if not null, a message will be popped up. If null, process to "Delete" view.

Here are the codes:

1, on the view, the @Html and <script> are together in a loop which goes through all the customers.

@Html.ActionLink("Delete", "Delete", new { id = item.CustomerId }, htmlAttributes: new { @class = "mergo-actionlink", id = "customer-delete-ajax" })

<script type="text/javascript">
$('#customer-delete-ajax').click(
    function doSomething() {
        $.ajax({
            dataType: "json",
            url: '@Url.Action("Delete", "Controllers", new { id = item.CustomerId })',
            success: function (data) {
                alert(data.message);
            },
            async: false
        });
    }
);
</script>

2, the "Delete" controller

public ActionResult Delete(Guid? id)
{
        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        Customer customer = db.Customers.Find(id);
        if (customer == null)
        {
            return HttpNotFound();
        }

        if (customer.Orders.ToList().Count() != 0)
        {
            return Json(new { message = "This customer has order(s) attached." }, "text/plain", JsonRequestBehavior.AllowGet);
        }
        return View(customer);
}

Your question is anything but easy to interpret, but as for "Ajax doesn't work":

1. You state that "the @Html and <script> are together in a loop which goes through all the customers". This will be the first error, since this would create a lot of elements using the same Id, and Id's must be unique. Try with class name as trigger instead (example below).

2. The JavaScript should not be a part of that loop. There is no need to loop this script - if anything it will be damaging. Move it outside of the loop, and try with class as trigger instead like mentioned above (example below).

3. Both your ActionLink and click event will call the same Action, at the same time, with the same parameter. I'm not sure I understand what your expectation of this is, but I'll assume that the ActionLink is not supposed to call the Action at all.

To solve the above issues, follow those steps and try with this code instead:

// loop begins
@Html.ActionLink("Delete", "Delete", new { id = item.CustomerId }, htmlAttributes: new { @class = "mergo-actionlink", data_value = item.CustomerId })
// loop ends

<script type="text/javascript">
$('.mergo-actionlink').click(function() {
    var clickedId = $(this).attr('data-value');
    $.ajax({
        dataType: "json",
        url: '@Url.Action("Delete", "Controllers")',
        data: { id: clickedId },
        success: function (data) {
            alert(data.message);
        },
        async: false
    });
    return false;
}); 
</script>

4. And in your controller, comment out the return View(customer);. Actually the only thing that Action should return is json, since that's the only thing your Ajax will accept. You can change your return type to JsonResult to be explicit.

Related:

KendoUI Grid - Complex JSON with inconsistent keys

Jquery parsley validate not working

JQuery mutiple post in the same time

String comparison in AngularJS

Use JSON file to insert data in database

php array returns undefined but print_r shows otherwise [duplicate]

Codeigniter Select JSON, Insert JSON

Check for duplicates in JSON

Disable 2 buttons after click of a button

Run AJAX function on form submit button after javascript confirm() cancel

WooCommerce seems to only orderby date and not price

Deserializing Json data to c# for use in GridView - Error Data source is an invalid type

Deserializing JSON into c# class

Response 200 OK but Jquery shows error?

Serializing a java bean into a cookie: Is it bad?

cross domain ajax form post — How is this allowed?

how to use geocoder class to retrieve latitude and longitude through ajax

Nested JSON structure to build side-by-side d3.js charts

How to send current page number in Ajax request

Insert data in collection at Meteor's startup

Sorting in Ruby on rails

Can't save json data to variable (or cache) with angularjs $http.get

do calculation inside JSONArray in Java

Parsing Google Custom Search API for Elasticsearch Documents

Link to another resource in a REST API: by its ID, or by its URL?

Fatal error catched by register_shutdown_function and update json_encode

Uncaught error: Invalid type for google table column

How to return value in Meteor.JS from HTTP.call “GET”

Unable to upload file to Sharepoint @ Office 365 via REST

'utf8' codec can't decode byte 0xf3

convert from json to array

Call function on Server from iOS app - Objective C

Create n:m objects using json and sequelize?

Getting a collection via Ajax to show in view

why i don't get return value javascript

Modal won't close on ajax success

Using $.ajaxStop() to determine when page is finished loading in CasperJS

When is the cookie set by AJAX available in javascript?

Identifier starts immediately after numeric literal

access the json encoded object returned by php in jquery

Making an alert() with PHP and ajax

How to rearrange CSV / JSON keys columns? (Javascript)

Replacing elements in an HTML file with JSON objects

Why i get can not resolve method error in class android?

Parse JSON output from AlamoFire

Automatically calling server side class without

How to calculate values of a drop down menu with PHP/ JS?

Is there a way to fire an event every time an ajax call in made in AngularJS?

Loading external php file in a div with jquery ajax