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:

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

Deserializing JSON into c# class

KendoUI Grid - Complex JSON with inconsistent keys

How to send current page number in Ajax request

Modal won't close on ajax success

Codeigniter Select JSON, Insert JSON

Sorting in Ruby on rails

Use JSON file to insert data in database

why i don't get return value javascript

JQuery mutiple post in the same time

Fatal error catched by register_shutdown_function and update json_encode

String comparison in AngularJS

Identifier starts immediately after numeric literal

Uncaught error: Invalid type for google table column

do calculation inside JSONArray in Java

'utf8' codec can't decode byte 0xf3

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

access the json encoded object returned by php in jquery

Automatically calling server side class without

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

convert from json to array

Loading external php file in a div with jquery ajax

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

Jquery parsley validate not working

Unable to upload file to Sharepoint @ Office 365 via REST

Call function on Server from iOS app - Objective C

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

cross domain ajax form post — How is this allowed?

Making an alert() with PHP and ajax

Insert data in collection at Meteor's startup

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

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

Check for duplicates in JSON

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

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

Create n:m objects using json and sequelize?

Parse JSON output from AlamoFire

Response 200 OK but Jquery shows error?

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

Parsing Google Custom Search API for Elasticsearch Documents

Replacing elements in an HTML file with JSON objects

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

WooCommerce seems to only orderby date and not price

Disable 2 buttons after click of a button

Getting a collection via Ajax to show in view

php array returns undefined but print_r shows otherwise [duplicate]

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

When is the cookie set by AJAX available in javascript?

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