CODEWITHSUNDEEP
asp.net-mvcjquerypartial-views
AliRıza Adıyahşi
AliRıza Adıyahşi

Reputation: 15866

Asp.net Mvc jquery ajax?

I have links like following.

<a href="/Customer/_EditCustomer?CustomerId=2" class="customer_details">Deneme Müşteri 2</a>
<a href="/Customer/_EditCustomer?CustomerId=3" class="customer_details">Deneme Müşteri 2</a>

I want to use jquery ajax post like this:

$(".customer_details").click(function () {
    $.ajax({
        url: $(this).attr("href"),
        type: 'POST',
        beforeSend: function () {

        },
        complete: function () {

        },
        success: function (result) {
            $("#customer_operations_container").html(result);
        },
        error: function (result) {
            alert("Hata!");
        }
    });   //end ajax
});

Or this:

$(".customer_details").click(function () {
    $("#customer_operations_container").load($(this).attr("href"));
});

And Action Method

public ActionResult _EditCustomer(int CustomerId)
{
    // get customer from db by customer id.
    return PartialView(customer);
}

But I cant do what I wanted. When I click to link, PartialView does not load. It is opening as a new page without its parent. I tried prevent.Default but result is the same.

How can I load the partialView to into a div?

Note: If I use link like this <a href="#"> it works.

Thanks.

Upvotes: 1

Views: 1688

Answers (4)

webdeveloper
webdeveloper

Reputation: 17288

Try this

$(function(){
    $(".customer_details").click(function (e) {
        e.preventDefault();
    });
});

Using ready event

Demo: http://jsfiddle.net/hdqDZ/

Upvotes: 1

BjarkeCK
BjarkeCK

Reputation: 5729

Maybe the problem is with the actionresult, try with Content to see if that changes anything.

public ActionResult _EditCustomer(int CustomerId)
{
    // get customer from db by customer id.
    return Content(customer.ToString());
}

Try one of these...

$(".customer_details").click(function (e) {
    e.preventDefault()
    $.ajax({
        url: $(this).attr("href"),
        //I think you want a GET here? Right?
        type: 'GET',
        beforeSend: function () {

        },
        complete: function () {

        },
        success: function (result) {
            $("#customer_operations_container").html(result);
        },
        error: function (result) {
            alert("Hata!");
        }
    });   //end ajax
});

Or

$(".customer_details").click(function (e) {
    e.preventDefault();
    $("#customer_operations_container").load($(this).attr("href"));
});

Or

 $(".customer_details").click(function (e) {
    e.preventDefault();
    $.get($(this).attr("href"), function(data) {
          $("#customer_operations_container").html(data);
    });
});

If none of this works, check if there's any js errors

Upvotes: 1

Abdel Raoof Olakara
Abdel Raoof Olakara

Reputation: 19353

This should help you out:

            $.ajax({
                url: $(this).attr("href"),
                type: 'POST',
                beforeSend: function () {

                },
                complete: function () {

                },
                success: function (result) {
                    $("#customer_operations_container").html(result);
                },
                error: function (result) {
                    alert("Hata!");
                }
            });   //end ajax
            return false;

The only thing you where missing is the prevention of A tag working. By returning false your custom event is called and the default event is not executed.

Upvotes: 1

Zabavsky
Zabavsky

Reputation: 13640

The problem is when you click on the link you already start navigation to it. So just use e.preventDefault() or return false from the click method to prevent the default behavior

$(".customer_details").click(function (e) {
    e.preventDefault();
    ...
}

Upvotes: 1

Related Questions