MVC 4 Ajax.Action link won t work

Question

I am trying to make a MVC website with Ajax call. I have no problem using directly jquery, but when i use @Ajax.ActionLink, i don't get the result i want. Here is my view:

    <script type="text/javascript">
        function deleteComment(id) {
            $.post(
                "/Role/AjaxTest",
                //{ id: id }, 

                function (data) {
                    $("#testtarget").html(data);               
                });
         }
    </script>


    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
    <h2>TITLE</h2>
    <p>
 @Ajax.ActionLink("Ajax Test", "AjaxTest", "Role", new AjaxOptions{UpdateTargetId="testtarget",HttpMethod = "Get" , InsertionMode = InsertionMode.Replace }) 
    </p>
    <table>    
    @foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.RoleName)
            </td>
            <td>
              <a onclick="deleteComment('@item.RoleId'); return false;" href="#">Delete</a>
                @Html.ActionLink("Delete", "Delete", new { id=item.RoleId })

            </td>
        </tr>
    }
    </table>
    <div id="testtarget">Test Div</div>

and here is my Controler data:

public string AjaxTest()
{
    return "Some random text";
}

My Call on Jquery works perfectly and text appears in the div, but my actionlink just redirects me to : localhost/Role/AjaxTest so i just have the message in a bank browser.

Any idea what's wrong here?

Thanks a lot in advance!

Clemens

Are you sure that the jquery.unobtrusive-ajax.min.js file is being loaded? – Crashaw

Yes, when i click link in my webpage source: <script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script> it opens it. – Clemens

Answer 1

Make sure you have added the jquery.unobtrusive-ajax.js script to your page:

<script type="text/javascript" src="~/scripts/jquery.unobtrusive-ajax.js"></script>

or if you are using bundles (which is the recommended approach) make sure that you have included a bundle containing this script. For example when you create a new ASP.NET MVC 4 project using the Internet Template that would be the ~/bundles/jqueryval bundle:

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
    "~/Scripts/jquery.unobtrusive*",
    "~/Scripts/jquery.validate*")
);

So make sure it is included in your view after the jquery bundle:

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")

Or just combine them into a single bundle. It will all depend on your requirements and whether you need unobtrusive jquery validation support or not.

I would also recommend you to have your controller action return ActionResult and not string:

public ActionResult AjaxTest()
{
    return Content("Some random text");
}

Tureen

Perfect, thanks very much, everything u said was in my project, I just didn't have the @Scripts.Render("~/bundles/jqueryval"). So i added it to my page and it did the trick, is it 'wise', to put this in the layout 'master page?' I would guess as it 's gonna be used in a lot of pages. Thanks a lot for your help! Was stuck on this for like 4 hours... – Clemens

Answer 2

try using F12 in your browser and checking if you get any scripting errors in your console. Fiddler will also help with identifying if any of your libraries aren't correctly referenced or loaded.

Paraguay

Thanks! That was part of my problem, it jquery was not defined for it so i did what the next post suggested. – Clemens