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:

String comparison in AngularJS

Loading external php file in a div with jquery ajax

KendoUI Grid - Complex JSON with inconsistent keys

Check for duplicates in JSON

Identifier starts immediately after numeric literal

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

cross domain ajax form post — How is this allowed?

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

When is the cookie set by AJAX available in javascript?

php array returns undefined but print_r shows otherwise [duplicate]

Call function on Server from iOS app - Objective C

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

Parsing Google Custom Search API for Elasticsearch Documents

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

Disable 2 buttons after click of a button

Response 200 OK but Jquery shows error?

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

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

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

Create n:m objects using json and sequelize?

convert from json to array

WooCommerce seems to only orderby date and not price

Making an alert() with PHP and ajax

Sorting in Ruby on rails

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

Jquery parsley validate not working

Fatal error catched by register_shutdown_function and update json_encode

JQuery mutiple post in the same time

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

Getting a collection via Ajax to show in view

Codeigniter Select JSON, Insert JSON

access the json encoded object returned by php in jquery

'utf8' codec can't decode byte 0xf3

why i don't get return value javascript

How to send current page number in Ajax request

Use JSON file to insert data in database

Insert data in collection at Meteor's startup

Deserializing JSON into c# class

Automatically calling server side class without

Parse JSON output from AlamoFire

Modal won't close on ajax success

Uncaught error: Invalid type for google table column

Replacing elements in an HTML file with JSON objects

Unable to upload file to Sharepoint @ Office 365 via REST

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

do calculation inside JSONArray in Java

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

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

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