How should I call a cshtml file from javascript/jquery?

Question

I'm trying to add cascading dropdown lists to a page on my site. I've followed the example presented at http://www.mikesdotnetting.com/article/196/webmatrix-jquery-cascading-dropdown-lists The only changes being that I've changed the variable names to suit my app and, as I only want the functionality to exist in certain situations (i.e. creation of a new record), there's an if statement around the relevant code.

Although my 2nd dropdown list is disabled on page load (as expected), it does not become enabled when one of the 1st dropdown list items gets selected.

My suspicion is that I'm not calling GetClients.cshtml (my variation of Mike's GetProducts.cshtml) correctly, probably due to the line:

$.getJSON('/GetClients/' + ActivityID, function (clients) {

not looking in the correct folder.

In an ideal world, I could use the Razor tilde (~) to force a full path that would look correctly regardless of using the server version or localhost. But that doesn't seem to be an option in JavaScript.

GetClients.cshtml is located in the same folder as the cshtml file that contains the JS code, HTML dropdown lists, etc. that I'm trying to control. Could someone let me know whether the code above does or does not reference a file that's 'next door', and if not, to what should I amend the above line of code?

Answer 1

If your GetClients.cshtml file is in a folder below the root, you need to include that folder in the URL that you pass to the getJSON method. For example, let's say your structure is like this:

root
    folder
        GetClients.cshtml
        CallingPage.cshtml
    Default.cshtml
    etc

The url you pass to the getJSON method should be /folder/getclients plus any additional URLData/querystrings you want to pass.

Answer 2

You cannot call view directly from Javascript, thats why just create Action in ASP.NET MVC Controller that return that view.

public MyController{
   public ActionResult GetMyCoolCshtmlFile(){
      return View("pathToMyCoolCshtml.cshtml");
   }
}

and call it in JS:

 $.get("/my/GetMyCoolCshtmlFile").done(function(yourMarkup){doWhatYouWantWithYourMarkup(yourMarkup);})

Answer 3

You won't be accessing a razor view directly, you will access it via an action method.

I think the problem is you are getting a 404 because the path is not correct. If you open up your browser console,you should be able to see a 404 error.

Use the Url.Action html helper method to generate the correct relative path to your action method.

var url="@Url.Action("GetClients","YourcontrollerName")";    
$.getJSON(url + ActivityID, function (clients) { });

When razor view engine executes this view, it will call the helper method and use the output of that method call (which is the correct relative path to the action method) to the javascript variable. This solution will work irrespective of your current page/url.

Assuming you have an action method called GetClients which accepts an id and return clients in JSON format.

public ActionResult Getclients(int id)
{
  // to do  : Return a list of Clients as json 
}

The above code will work if it is inside a razor view. If your code is inside an extenal javascript file, use the solution explained in this post.