How to make jQuery request path concatenate with its root url on ASP.NET MVC?

Question

I have a jQuery script like below.

$.ajax({
    type: "post",
    url: "/TestPage/Parameter",
    data: JSON.stringify(formData),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',

    success: function (data, textStatus, jqXHR) {
        alert('created!');
    },
    error: function (xhr, status, p3, p4) {
        var err = "Error " + " " + status + " " + p3;
        if (xhr.responseText && xhr.responseText[0] == "{")
            err = JSON.parse(xhr.responseText).message;
        alert(err);
    }
});

My website has a default page www.example.com which is the same as www.example.com/Home/Index.

When I go to www.example.com and trigger the jQuery it works fine. The website sends a request to www.example.com/TestPage/Parameter but when I go to www.example.com/Home/Index and trigger the script, it makes a request to www.example.com/Home/Index/TestPage/Parameter which does not exist.

Is there a way to fix this problem?

Use the @Url.Action helper in your markup, then parse the form attributes in your jquery. Doing this can make your jquery for posting more generic and reusable too. — Lotok
– Lotok, Commented Oct 17, 2013 at 11:48
When working with AJAX calls in ASP.NET MVC I usually have a hidden field with the ID of urlroot with the value of Url.Content("~/"). This way I always have a safe URL root reference. — Andre Calil
– Andre Calil, Commented Oct 17, 2013 at 11:49
Eh? Your URL is absolute, it should be relative to the root of your website. I don't see how it should be targeting a URL relative to your page. — Mister Epic
– Mister Epic, Commented Oct 17, 2013 at 13:10

Lotok · Accepted Answer · 2013-10-17 12:02:18Z

2

Let the ASP.NET MVC helpers do the work for you. In your markup for the form use the @Url.Action helper. See this document

<form action="@Url.Action("Parameter", "TestPage")" method="POST">

In your JQuery you can then parse the form attributes.

var postForm = function (item) {
    var $form = $(item).parents('form:first');
    var options = {
        url: $form.attr("action"),
        type: $form.attr("method"),
        data: $form.serialize()
    };

    $.ajax(options);
}

call the function on submit, button click whatever and pass in this

$('body').on('click','#create', function () {
    postForm(this);
});

answered Oct 17, 2013 at 12:02

Lotok

4,6151 gold badge37 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Devesh Over a year ago

If the jquery is inside the ASPX page we can use the Url.Action in the javascript directly

Lotok Over a year ago

I didn't know that, I usually have the JQuery in a seperate file. Might come in handy one day thanks :)

Collectives™ on Stack Overflow

How to make jQuery request path concatenate with its root url on ASP.NET MVC?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related