Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • MVC Navigation from one View to another

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 9.43k
    Comment on it

    **HTML.ActionLink**

    We while creating MVC application need to navigate from one View to another. The usual and simple way that we use is to use HTML elements "a" with its href attribute set to a specific controller's action, this is most obvious way of navigating right!. Yes its Obvious but dangerous too at the same time. While doing this we should also think what if down the line of our development our URL schema changes. What if we decide to delete the entire Controller and replace it by a new one, we will be over burdened to change all anchor links. What if we can/able to create URLs dynamically in a way that is guaranteed to reflect the URL schema of the project. The answer to the above question is YES we should and there is simplest way of doing that is using MVC routing mechanism to its full and using @HTML.ActionLink.

    I will be explaining the use of ActionLink by an example: Say we have a controller "Sample" with two Action Methods

    public class SampleController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Controller = "Sample";
            ViewBag.Action = "Index";
            return View("DisplayActionController");
        }
    
        public ActionResult MySample(string id="DefaultIdValue")
        {
            ViewBag.Controller = "Simple";
            ViewBag.Action = "MySegmentVariable";
            ViewBag.CustomVariable = id;
            return View();
        }
    }
    

    Create a view "DisplayActionController" inside the Views/Shared folder:

    @{ 
        Layout = null; 
    }
    <!DOCTYPE html>
    <html>
        <head>
            <meta name="viewport" content="width=device-width" />
            <title>SampleController</title>
        </head>
        <body>
            <div>Controller Invoked: @ViewBag.Controller</div>
            <div>Action Invoked: @ViewBag.Action</div>
            <div>
                @Html.ActionLink("This is an outgoing URL", "MySample")
            </div>
        </body>
    </html>
    

    This View is rendered when the index action of Sample Controller is invoked. Now Create a new view for MySample action.

    @{ 
        Layout = null; 
    }
    <!DOCTYPE html>
    <html>
        <head>
            <meta name="viewport" content="width=device-width" />
            <title>SampleController</title>
        </head>
        <body>
            <div>Controller processed the URL: @ViewBag.Controller</div>
            <div>Controller action invoked: @ViewBag.Action</div>
            <div>The custom segment variable is: @ViewBag.CustomVariable</div>
        </body>
    </html>
    

    Now we will look and work on routing engine. We will add a custom Route in RouteConfig.cs like:

    routes.MapRoute("MySampleRoute"),"{controller}/{action}/{id}",
        new
        {
            controller = "Sample",
            action = "Index",
            id = UrlParameter.Optional
        });
    

    The Simplest way to generate an outgoing URL is to call the HTML.ActionLink helper method.

    @Html.ActionLink("This is an outgoing URL", "MySample")
    

    The above overload has two parameters. First one is the text being displayed and the second one is the action method that the link should target.

    To test HTML.ActionLink capabilities, we will add a new route above the old one:

    routes.MapRoute("NewRoute", "Web/app{action}",
        new { controller = "Sample" });
    

    Now when hover the link you will notice its new target URL reflects the new route we just added.

    The default HTML.ActionLink overload method assumes that you want to target an action method in the same controller that has caused the view to be rendered. If you wish to target another controller's action you can use a different overload.

    To see it in an example we will create a new controller "MySecondSample"

    public class MySecondSampleController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Controller = "MySecondSample";
            ViewBag.Action = "Index";
            return View("DisplayActionController");
        }
        public ActionResult MySample2()
        {
            ViewBag.Controller = "MySecondSample";
            ViewBag.Action = "MySample2";
            return View("DisplayActionController");
        }
    }
    

    In the DisplayActionController View add a new Html.ActionLink passing this time both the actions and the controllers name we want to invoke.

    @Html.ActionLink("This targets another controller", "MySample2", "MySecondSample")
    

    Now your view has two outgoing URLs. The first outgoing URL was generated using the first route, since it requires only an action to be matched. The second ActionLink though matched the second route because it passed a controller's name as parameter too.

    By using the above snippet you have a powerful tool to dynamically generate outgoing URLs in your MVC application.

    Happy Coding.......

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: