ASP.NET MVC jQuery load UserControl respecting namespace

Question

I have this code for the controller in "/Controllers/Cubo/FilterController.cs"

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;

namespace Mkt.Web.Controllers.Cubo
{
    public class FilterController : Controller
    {
        //
        // GET: /Filter/

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetPeople()
        {
            return View("~/Views/Shared/Cubo/Filter/People.ascx");
        }

        public ActionResult GetAddress()
        {
            return View("~/Views/Shared/Cubo/Filter/Address.ascx");
        }

    }
}

Call in javascript with jQuery:

(function($) {
    $.fn.loadFilter = function(name, data, fn) {
        data = (typeof (data) == "undefined") ? {} : data;
        fn = (typeof (fn) == "undefined") ? null : fn;
        $(this).empty();
        $(this).load("/Filter/Get" + name + "", data, fn);
    };
})(jQuery);

$("#containerFilter").loadFilter("People");

But when I call "GetPeople" in "FilterController" I need to call without the directory name "Cube". How can I do to call with the directory name to get a better order?.

EDIT: I would need to call as "$(this).load("/Cube/Filter/Get" + name + "", data, fn);". Referred to "/Controllers/Cubo/FilterController.cs"

Answer 1

I suggest using the UrlHelper to build your URL for your load action. This should make the URL relative to the current path. This assumes that your javascript is in your view. If not, then I would construct the url in your view and pass the full url to this function.

(function($) {
    $.fn.loadFilter = function(name, data, fn) {
        data = (typeof (data) == "undefined") ? {} : data;
        fn = (typeof (fn) == "undefined") ? null : fn;
        $(this).empty();
        $(this).load( '<%= Url.Action("Get") %>' + name, data, fn);
    };
})(jQuery);

Alternative - based on keeping the javascript in a separate file. In this case there is no way to use the UrlHelper in the javascript and you need to modify your function to call it with the full name of the method, not just the qualified part.

In JS file:

(function($) {
    $.fn.loadFilter = function(url, data, fn) {
        data = (typeof (data) == "undefined") ? {} : data;
        fn = (typeof (fn) == "undefined") ? null : fn;
        $(this).empty();
        $(this).load( url, data, fn);
    };
})(jQuery);

In view:

$('#people').loadFilter( '<%= Url.Action( "GetPeople" ) %>', null, null );

Answer 2

I would solve this on the server by adding a new route to the global application file global.asax (global.asax.vb or global.asax.cs if you are using code separation).

You would add a new route like this:

routes.MapRoute("UserControlRoute", "/Cube/Filter/{action}",new { controller = "FilterController" } );

Then the url "/Cube/Filter/GetPeople" would be mapped to the GetPeople action of the FilterController.

You can optionally specifiy a default controller like this:

routes.MapRoute("UserControlRoute", "/Cube/Filter/{action}",new { controller = "FilterController", action = "DefaultAction" } );

Which would then map the url "/Cube/Filter/" to the "DefaultAction" action as well.

If you want "Cube" to change to something else then this can be setup as a parameter as well:

routes.MapRoute("UserControlRoute", "/{cube}/Filter/{action}",new { controller = "FilterController", action = "DefaultAction", cube="DefaultCube" } );

You need to re-compile your application after making changes to the routes in this file. "UserControlRoute" is any name you want to call the route, they have to be unique.

More info here; http://www.asp.net/learn/mvc/tutorial-23-cs.aspx