ASP.NET MVC3 Jquery/Ajax Problem

Question

With ASP.NET MVC3 I'm using Jquery/Ajax to post data from a form to a function in my controller. The problem I am having is that when I put this code into my Index view it works fine, but when I put the same code into my CreatePost view I doesn't work. I can tell its working or not based on the alert and by setting a break point on the funciton in the controller.

My Controller is called BlogController and this is what the function looks like: (its a dummy function for now)

    [AcceptVerbs(HttpVerbs.Post)]
    public JsonResult CreateEntry(string title, string body)
    {
        return Json(false);
    }

The code in my view looks like this:

<script type="text/javascript">
$(function () {
    $(".error").hide();

});

function SubmitEntryPostForm() {
    var blogEntry = {
        'title': $('#EntryTitle').val(),
        'body': $('#EntryBody').val()
    };
    $.ajax({
        type: "POST",
        url: "blog/CreateEntry",
        data: blogEntry,
        success: function () {
            alert("it worked");
        }

    });
    return false;
}

function ValidateCreateEntry() {
    $(".error").hide();
    var title = $("#EntryTitle").val();
    if (title == "") {
        $("#title_error").show();
        $("#EntryTitle").focus();
        return false;
    }
    var body = $("#EntryBody").val();
    if (body == "") {
        $("#body_error").show();
        $("#BodyTitle").focus();
        return false;
    }
    return SubmitEntryPostForm();
}

<div id="CreateEntry">
<form action="">
    <fieldset>
        <label for="title" id="title_label">Title</label>
        <input type="text" name="title" id="EntryTitle" size="30" />
        <label class="error" for="title" id="title_error">This field is required.</label>
        <br />
        <label for="body" id="body_label">Content</label>
        <input type="text" name="body" id="EntryBody" size="30" />
        <label class="error" for="boby" id="body_error">This field is required.</label>
        <br />
        <input type="submit" name="submit" class="button" id="CreateEntryButton" value="Send" onclick="return ValidateCreateEntry();" />
    </fieldset>
</form>

Are you getting any errors in the console? What is the response? — Rory McCrossan
– Rory McCrossan, Commented Apr 28, 2011 at 14:10
Index and Create Post are identical in that they both contain the javascript and same form. — MaxGeek
– MaxGeek, Commented Apr 28, 2011 at 14:12
Daniel may have sourced your problem: CreateEntry != CreatePost. Are your routes correct in your Global.asax? — jimyshock
– jimyshock, Commented Apr 28, 2011 at 14:12
I found the problem. Rory was right to check the console. I haven't used firebug in a while and was just using the script tab without any success. The problem is the javascript should be calling "CreateEntry" on the CreatePost view not "blog/CreateEntry" The result is Blog/blog/CreateEntry which is wrong. — MaxGeek
– MaxGeek, Commented Apr 28, 2011 at 14:19

Volkan Ceylan · Accepted Answer · 2011-04-28 14:24:14Z

3

You probably have actions Index and CreateEntry in your BlogController right, and its probably the default controller? If so, when you call CreatePost action, your url in browser is like

localhost/blog/CreatePost

and when you call Index action, your url in browser is like

localhost/blog/

(as you don't write /index explicitly). So, in first case, relative ajax URL in javascript code

url: "blog/CreateEntry"

is posting to

localhost/blog/blog/CreateEntry/

while the second one is calling to

localhost/blog/CreateEntry/

and thats why it works. So you need to use absolute URL's in your AJAX calls with help from some function like Url.Content, VirtualPathUtility.ToAbsolute etc. Rule of thumb: never use relative URL's unless absolutely necessary.

answered Apr 28, 2011 at 14:24

Volkan Ceylan

1,49613 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

ASP.NET MVC3 Jquery/Ajax Problem

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related