MVC: Get URL of Method When Using Routing

Question

I found this tutorial on how to build cascading dropdowns in MVC with Razor syntax. I followed the tutorial and got it working perfectly in it's own project. But now that I am trying to port it over to my actual project, I am getting an error when the first dropdown is changed. As per the script, an alert pops up that says:

Failed to retrieve states: [object Object]

I have no idea what [object Object] means. My guess is that the error has something to do with the Url:

url: '@Url.Action("GetStates")

But that's just a guess. The major difference between the example project and the real project is that the real project uses routing for the URL Here's the entire script:

<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"</script>
<script type="text/javascript">
$(document).ready(function () {
    //Dropdownlist Selectedchange event
    $("#Country").change(function () {
        $("#State").empty();
        $.ajax({
            type: 'POST',
            url: '@Url.Action("GetStates")', // we are calling json method

            dataType: 'json',

            data: { id: $("#Country").val() },
           // here we are get value of selected country and passing same value as input to json method GetStates.

            success: function (states) {
                // states contains the JSON formatted list
                // of states passed from the controller

                $.each(states, function (i, state) {
                $("#State").append('<option value="' + state.Value + '">' +
                     state.Text + '</option>');
                // here we are adding option for States

                });
            },
            error: function (ex) {
                alert('Failed to retrieve states: ' + ex);
            }
        });
        return false;
    })
});

EDIT AFTER:

While watching the network traffic in Chrome's developer tools, I did this in the stand-alone project that works, and saw this entry with the title "GetStates" and this URL: http://localhost:50266/CustomerFeedback/GetStates.

I did it again in my actual project, and this time I see an entry that says "45/" with this URL: http://localhost:65303/PatientSatisfactionSurvey/45/.

I think this confirms my suspicion that the URL is the problem. I'm going to have to play around with figuring out how to make this URL valid.

Another Edit:

On the project that works, if I go to: http://localhost:50266/CustomerFeedback/GetStates

I get this:

Server Error in '/' Application.

This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet.

This is expected as I am trying to hit that actual method. Meaning, I can go to the URL of the method. But when I try and do the same thing in my project: http://localhost:65303/PatientSatisfactionSurvey/GetStates, it just loads the page. That's because it thinks that "GetStates" is a parameter, and not a method.

I CAN NOT figure out what the URL of the method would be!! The dang routing is getting in the way....

        routes.MapRoute(
            "PatientSatisfactionSurvey",
            "PatientSatisfactionSurvey/{ApptID}/{*LanguageCode}",
            new { controller = "Forms", action = "PatientSatisfactionSurvey" },
            namespaces: new[] { "GEDC.Controllers" }
        );

Have you looked at what is inside the object ex using a debugger or console.dir() or something? — Brad C, Jun 03 '15 at 18:30
I would love to know how to do that! It's javascript so it won't hit a standard break point. I'm too knew to MVC and jquery to know how to debug this, or what console.dir() means. I'll start looking, but if you have any quick pointers, I'd be grateful. — Casey Crookston, Jun 03 '15 at 18:33
If you open your web browser's development tools and go to the Network section and run the code you'll see the actual request being sent to the server. Look at the response there and it should tell you why it is failing. — Brad C, Jun 03 '15 at 18:41
As an aside, most browsers developer tools can be accessed using ``. — War10ck, Jun 03 '15 at 19:44

score 0 · Answer 1 · answered Jun 03 '15 at 20:03

0

Try changing @Url.Action("GetStates") to:

@Url.Action("ControllerName", "ActionName")

Probbaly something like @Url.Action("PatientSatisfactionSurvey", "GetStates") which will generate a URL like ~/PatientSatisfactionSurvey/GetStates/5 where 5 is the ID that it is grabbing from the html element with the ID of Country.

answered Jun 03 '15 at 20:03

Brad C

2,868
22
33

brd4, I REALL appreciate your help. Unfortunately, I get the same results. I have learned a few things. Going to update the original question. Refresh in 5. – Casey Crookston Jun 03 '15 at 20:12

score 0 · Accepted Answer · edited May 23 '17 at 11:51

Finally worked this out. My problem was three fold. First, when I looked at the HTML source, it turned out this:

url: '@Url.Action("GetStates")', // we are calling json method

was rendering as this:

url: ''

Once I took out the razor syntax, it at least rendered properly in HTML. However, it was still getting the wrong URL. Because the route map I was using had parameters in it, I ended up just creating a whole new route map for this one method:

        routes.MapRoute(
            "GetStates",
            "GetStates",
            new { controller = "Forms", action = "GetStates" },
            namespaces: new[] { "xyz.Controllers" }
        );

Then I changed the URL line in the javascript to look like this:

url: 'GetStates'

But the problem with this was that it was just appending /GetStates to the end of whatever URL I happened to be on. If put the entire fully qualified URL in there, like this...

url: 'http://localhost:65303/GetStates'

That worked. But for obvious reasons, that URL is not a long term solution. So, using this thread, I finally found the answer. I was able to get the fully qualified URL of this method GetStates() as follows:

// Get the fully qualifed URL of the FollowUpOptions() method for use in building the cascading dropdown
UrlHelper Url = new UrlHelper(System.Web.HttpContext.Current.Request.RequestContext);
myModel.ullDropdownUrl = Url.Action("GetStates", "Forms", new { }, this.Request.Url.Scheme);

Then I was able to do this in the javascript, which FINALLY got it all working:

url: '@Model.fullDropdownUrl'

MVC: Get URL of Method When Using Routing

2 Answers2