Issue with JQuery, asp.net-MVC controller

Question

I am having a (I think stupid) problem.

I have a controller, Index method, and its view has some JQuery functions.

It works fine, and the JQuery methods work perfectly.

the link I use is

http://localhost:54209/TestInput/

but if I put

http://localhost:54209/TestInput/Index

the JQuery functions do not work. From what I know they should act exactly the same.

That is the only thing that I change

I really appreciate your help. This has been driving me crazy during the last couple of hours!

For example, This is my script

<script>
  $(document).ready(function() {
    $('select#testCategoriesUniqueId').change(function() {
        var testCategory = $(this).val();
        $.ajaxSetup({ cache: false });
         alert ("AAA");
        $.ajax({
            url: "TestInput/listTestCases/" + testCategory,
            dataType: "json",
            type: 'post',
            success: function(data) {
                $("#testCasesUniqueId").removeOption(/./);
                for (var i = 0; i < data.length; i++) {
                    var val = data[i].Value;
                    var text = data[i].Text;
                    $("#testCasesUniqueId").addOption(val, text, false);
                }
            }
        });
    });
});

In both cases, I get an alert, but In the second link, I can not call the controller.

It doesn't call the listTestCases method of my controller.

Update:

So I tried to use parameters instead of the exact link, I still have the problem, I got both sources, and got a diff, the only difference is

<form name="aspnetForm" method="post" action="Index" id="aspnetForm">

vs.

<form name="aspnetForm" method="post" action="TestInput" id="aspnetForm">

and

<form action="/TestInput/Index" method="post">

vs.

<form action="/TestInput" method="post">

Which I beleive has nothing to do with the jQuery.

I still see the laert in both cases. but the JQuery works in ~/TestInput and not with the ~/TestInput/Index.

Answer 1

this is why you shouldn't hardcode urls in an asp.net mvc app. your problem is that your ajax url is a relative url. when you load the page using url http://example.com/TestInput/ the ajax url ends up being something like http://example.com/TestInput/TestInput/listTestCases or maybe http://example.com/TestInput/listTestCases

When you use the url http://example.com/TestInput/Index your ajax url ends up being http://example.com/TestInput/Index/TestInput/listTestCases

Insetead you should use one of the Html helpers to declare your ajax url like this. (using razor syntax)

<script>
  $(document).ready(function() {
    $('select#testCategoriesUniqueId').change(function() {
        var testCategory = $(this).val();
        $.ajaxSetup({ cache: false });
         alert ("AAA");
        $.ajax({
            url: "@Url.Action("listTestCases")"+ "/" + testCategory,
            dataType: "json",
            type: 'post',
            success: function(data) {
                $("#testCasesUniqueId").removeOption(/./);
                for (var i = 0; i < data.length; i++) {
                    var val = data[i].Value;
                    var text = data[i].Text;
                    $("#testCasesUniqueId").addOption(val, text, false);
                }
            }
        });
    });
});
</script>

Update for ASPX View Engine:

If you are using the ASPX view engine insted of Razor use this syntax.

<script>
  $(document).ready(function() {
    $('select#testCategoriesUniqueId').change(function() {
        var testCategory = $(this).val();
        $.ajaxSetup({ cache: false });
         alert ("AAA");
        $.ajax({
            url: "<%=Url.Action("listTestCases")%>"+ "/" + testCategory,
            dataType: "json",
            type: 'post',
            success: function(data) {
                $("#testCasesUniqueId").removeOption(/./);
                for (var i = 0; i < data.length; i++) {
                    var val = data[i].Value;
                    var text = data[i].Text;
                    $("#testCasesUniqueId").addOption(val, text, false);
                }
            }
        });
    });
});
</script>

Be sure to use Firebug or F12 dev tools to double check the exact url you need.