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:

cross domain ajax form post — How is this allowed?

Sorting in Ruby on rails

Parse JSON output from AlamoFire

WooCommerce seems to only orderby date and not price

Deserializing JSON into c# class

convert from json to array

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

why i don't get return value javascript

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

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

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

Parsing Google Custom Search API for Elasticsearch Documents

Uncaught error: Invalid type for google table column

Making an alert() with PHP and ajax

How to send current page number in Ajax request

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

When is the cookie set by AJAX available in javascript?

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

String comparison in AngularJS

Replacing elements in an HTML file with JSON objects

KendoUI Grid - Complex JSON with inconsistent keys

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

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

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

Automatically calling server side class without

JQuery mutiple post in the same time

Identifier starts immediately after numeric literal

'utf8' codec can't decode byte 0xf3

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

Modal won't close on ajax success

Check for duplicates in JSON

Jquery parsley validate not working

Call function on Server from iOS app - Objective C

do calculation inside JSONArray in Java

Disable 2 buttons after click of a button

Use JSON file to insert data in database

php array returns undefined but print_r shows otherwise [duplicate]

Loading external php file in a div with jquery ajax

Getting a collection via Ajax to show in view

Insert data in collection at Meteor's startup

Unable to upload file to Sharepoint @ Office 365 via REST

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

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

Codeigniter Select JSON, Insert JSON

Fatal error catched by register_shutdown_function and update json_encode

Response 200 OK but Jquery shows error?

Create n:m objects using json and sequelize?

access the json encoded object returned by php in jquery

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