Action Selectors in ASP.NET MVC

Back to: ASP.NET MVC Tutorial

Action Selectors in ASP.NET MVC Application

In this article, I am going to discuss Action Selectors in the ASP.NET MVC Application with Examples. Please read our previous article where we discussed Attributes in ASP.NET MVC Application with examples. As part of this article, we are going to discuss the following pointers.

1. What are Action Selectors in ASP.NET MVC?
2. Types of Action Selectors in ASP.NET MVC
3. Understanding ActionName Action Selector in ASP.NET MVC

What are Action Selectors in ASP.NET MVC?

The Actions are the public methods of a controller in ASP.NET MVC Application that responds to incoming HTTP Requests. The Action Selectors in ASP.NET MVC are the attributes that can be applied to the action methods of a controller and are used to control which action method gets invoked in response to a particular request. That means Action Selectors in ASP.NET MVC Framework help the routing engine to select the correct action method to handle a particular request.

Types of Action Selectors in ASP.NET MVC.

The ASP.NET MVC Framework provides the following three action selector attributes:

1. ActionName
2. ActionVerbs
3. NonAction

Let us understand the above Action Selectors with examples. To understand this let’s create an empty ASP.NET MVC application.

Create an empty ASP.NET MVC application.

Open Visual Studio and create a new project by selecting File => New => Project option from the context menu as shown in the below image.

After clicking on the “Project” link a new dialog window will open. In that, we are going to select “Web” templates from the left pane, and from the middle pane we need to select the web template as “ASP.NET Web Application“. Provide the name and location and finally click on the OK button as shown in the below image.

Once you click on the OK button a new dialog will pop up with the name “New ASP.NET Web Application” for selecting the project Templates. From this dialog, we are going to choose the MVC project template and then we are going to choose the Authentication type for doing that just click on the Change Authentication button, a new dialog will pop up with the name “Change Authentication” here we are going to choose No Authentication and finally click on the OK button as shown below.

Once you click on the OK button, it will take some time to create the project for us.

Adding Model classes in the Models folder:

Right-click on the Models folder and click on Add => Class from the context menu and give the class name as Product.cs. Once you created the Product.cs class file, then copy and paste the following code into it.

public class Product
{
    public int ProductId { get; set; }
    public string ProductName { get; set; }
    public int Price { get; set; }
    public string Category { get; set; }
}

public class DataAccessElectronics
{
    public List<Product> GetDataElectronics()
    {
            List<Product> ElectronicsProductList = new List<Product>()
            {
                new Product() { ProductId = 1, ProductName = "Desktop", Price = 34000, Category = "Electronics" },
                new Product() { ProductId = 2, ProductName = "Laptop", Price = 34000, Category = "Electronics" },
                new Product() { ProductId = 3, ProductName = "Router", Price = 34000, Category = "Electronics" },
                new Product() { ProductId = 4, ProductName = "Mouse", Price = 34000, Category = "Electronics" },
                new Product() { ProductId = 5, ProductName = "USB HDD", Price = 34000, Category = "Electronics" },
                new Product() { ProductId = 6, ProductName = "LCD", Price = 34000, Category = "Electronics" }
            };

            return ElectronicsProductList;
    }
}

The above code contains the following classes

1. Product – This is an entity class containing properties for Product information.
2. DataAccessElectronics – This class contains the method for returning all Electronics products.

Note: In a real-world example, the Entity framework can be used here to map with the database server.

Understanding ActionName Action Selector in ASP.NET MVC:

The ActionName action selector in the ASP.NET MVC Application is used when we want to invoke an action method with a different name, than what is already given to the action method. To understand the need and use of the ActionName selector, let’s modify the HomeController as shown below.

public class HomeController : Controller
{
    public string Index()
    {
        return "Index action method invoked";
    }
}

The URL “/Home/Index“ would invoke the Index() action method in HomeController. If you want to invoke the Index() action method, with the URL “/Home/List”, then you need to decorate the action method with the ActionName attribute as shown below.

public class HomeController : Controller
{
    [ActionName("List")]
    public string Index()
    {
        return "Index action method invoked";
    }
}

Now, if you navigate to /Home/Index, you will get an error – “The resource cannot be found“. At the moment, the Index() action method is returning a string, but if it returns a view, should the view be named – Index or List? The List should be the view name.

Let’s modify the Home Controller as shown below.

Now, the Index Action Method returning a view.

public class HomeController : Controller
{
    [ActionName("List")]
    public ActionResult Index()
    {
        DataAccessElectronics DAE = new DataAccessElectronics();
        List<Product> ElectronicsList = DAE.GetDataElectronics();
        return View(ElectronicsList);
    }
}

Let’s add Index.cshtml within the Home folder and then copy and paste the following code into it.

@model IEnumerable<ActionSelectorsinMVC.Models.Product>
@{
    ViewBag.Title = "Index";
}
<h2>Product List</h2>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.ProductName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Price)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Category)
        </th>

    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.ProductName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Price)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Category)
            </td>
        </tr>
    }
</table>

Now run the application and navigate to Home/List and you will get the following error which proves that it will search for a view with the name List.cshtml, not Index.cshtml.

Now add a view with the name List.cshtml within the Home folder and copy and paste the following code into it.

@model IEnumerable<ActionSelectorsinMVC.Models.Product>

@{
    ViewBag.Title = "Index";
}

<h2>Product List</h2>

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.ProductName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Price)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Category)
        </th>
        
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.ProductName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Category)
        </td>
    </tr>
}
</table>

Now, run the application and navigate to /Home/List and it should display the following output as the response.

 

Now for some reason, if you want to use “Index” as the view name then we need to use the other overloaded version of the View Extension method which takes the view name as a parameter. So, modify the controller action method as shown below. Here, you can notice, we have passed the first parameter as Index which is nothing but the view name.

public class HomeController : Controller
{
    [ActionName("List")]
    public ActionResult Index()
    {
        DataAccessElectronics DAE = new DataAccessElectronics();
        List<Product> ElectronicsList = DAE.GetDataElectronics();
        return View("Index", ElectronicsList);
    }
}

With the above changes in place, now when you run the application and navigate to /Home/List, it will display the results by using the Index view.

In the next article, I am going to discuss the Action Verb Action Selector in ASP.NET MVC Application with Examples. In this article, I try to explain Action Selectors in ASP.NET MVC application with Examples. I hope this article will help you with your needs. I would like to have your feedback. Please post your feedback, question, or comments about this article.