Problem with jQuery, asp.net-MVC-controller

Question

I'm having a (I think stupid) problem.

I have a controller, an Index method, and its presentation has some jQuery functions.

It works great, and jQuery methods work fine.

used link

http://localhost:54209/TestInput/ 

but if I put

 http://localhost:54209/TestInput/Index 

jQuery functions do not work. From what I know, they should act in exactly the same way.

This is the only thing I'm changing

I really appreciate your help. It made me go crazy for the last two 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 a warning, but in the second link I cannot call the controller.

It does not call the listTestCases method of my controller.

Update:

So, I tried to use the parameters instead of the exact reference, I still have a problem, I have both sources, and I got 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 believe has nothing to do with jQuery.

I still see laert in both cases. but jQuery works in ~ / TestInput, not with ~ / TestInput / Index.

Answer 1

This is why you should not hardcode URLs in an asp.net mvc application. 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 turns out to be something like http://example.com/TestInput/TestInput/listTestCases or possibly http: // example. com / TestInput / listTestCases

When you use the URL http://example.com/TestInput/Index , your ajax url will turn out to be http://example.com/TestInput/Index/TestInput/listTestCases

In Insetead, you should use one of the Html helpers to declare your ajax url as follows. (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 viewer:

If you are using the ASPX viewer installed by 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 the Firebug or F12 development tools to double-check the desired URL.