Question

I am teaching myself asp .net mvc3.
I want to create a user account page which has 3 tabs in it – say YourAddress, YourPhotos and YourProfile.

The 3rd tab (YourProfile) has 2 more subtabs in it … ChangeDetails and DeactiaveAccount.

They are all dynamic pages and therefore I want to keep them as separate pages.

Basically the urls would be:

localhost/MyHome/YourAddress
localhost/MyHome/YourPhotos
localhost/MyHome/YourProfile/ChangePassword
localhost/MyHome/YourProfile/DeactivateAccount

(As requested I have changed the generic tab1, tab2 etc to something in real-world scenario)

I am planning to do something like this:

public class MyHomeController : Controller
    {
        //
        // GET: /MyHome/Tab1

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

        //
        // GET: /MyHome/Tab2

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

        //
        // GET: /MyHome/Tab3

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

How do I handle the subtabs of YourProfile? How do I call a controller within a controller?

What is the best way to accomplish this.

Thanks

Answer 1

Have separate action method for each tab item in your controller.

public class MyHomeController : Controller
{
  public ActionResult YourAddress()
  {
     return View();
  }
  public ActionResult YourPhotos()
  {
     return View();
  }
  public ActionResult YouProfile()
  {
     return VieW();
  }
  public ActionResult ChangePassword()
  {
     return View();
  }
  public ActionResult DeActivate()
  {
     return View();
  }
}

For the sub tab content, define that route in the global.asax

routes.MapRoute("ChangePass","YourProfile/ChangePassword", 
                      new { controller="MyHome", action="ChangePassword" });
routes.MapRoute("DeActivate","YourProfile/DeActivate", 
                      new { controller="MyHome", action="DeActivate" });
routes.MapRoute(
           "Default", 
           "{controller}/{action}/{id}", 
           new { controller = "Home", action = "Index", id = UrlParameter.Optional });

Always use Url.Action Html Helper method to render a path to an action method.

<div id="tabs"> 
    <ul> 
        <li><a href="@Url.Action("YourAddress","MyHome")">Address</a></li>
        <li><a href="@Url.Action("YourPhotos","MyHome")">Photos</a></li>
    </ul>
</div>