Generic List Routing & Routing Constraints

In this article we will understand How to display Generic List In Asp.Net Razor Pages? How Routing Works in Asp.Net Razor Pages ? How to apply Routing Constraints in Asp.Net Razor Pages by Sagar Jaybhay.

Generic List Routing & Routing Constraints

Now see below image we need to display employee list like this image. We have Employee property present in our Index page model we access this in our view. Now iterating over this list we apply some bootstrap CSS and formatting to display like below.

Code in the Display template

@page
@model RazorApplication.Pages.Employee.IndexModel
@{
    ViewData["Title"] = "Employees";
}

    <h1>Employees</h1>

<h3>No of Employees : @Model.Employees.Count()</h3>


<hr />
<br />
<div class="container-fluid">
    @foreach (var emp in Model.Employees)
    {
        var imgSrc = @"images/" + (emp.Photopath.Trim().Length != 0 ? emp.Photopath : "noimage.png");
    <div class="row" style="border:thin 1px black">

        <div class="col-lg-4">
            <img src="@imgSrc" alt="@emp.Name" style="height:150px;width:150px" />
        </div>
        <div class="col-lg-4">
            <table style="border:thin;1px" class="table table-bordered table-active">
                <tbody>
                    <tr>
                        <td>Name</td>
                        <td>@emp.Name</td>
                    </tr>
                    <tr>
                        <td>Email</td>
                        <td>@emp.Email</td>
                    </tr>
                    <tr>
                        <td>Department</td>
                        <td>@emp.Dept</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-lg-2">
           
                <table class="table table-bordered">
                    <tbody>
                        <tr><td><a href="#" class="btn btn-info">Edit</a></td></tr>
                        <tr><td><a href="#" class="btn btn-primary">View</a></td></tr>
                        <tr><td><a href="#" class="btn btn-danger">Delete</a></td></tr>
                    </tbody>

                </table>           
                               
           
        </div>
    </div>
    <hr />
    <br />
    }

</div>

See the above image in that we use this Employees Property in our Index.cshtml Display template.

Basics Of Routing In Asp.Net Razor Pages:

Routing is the URL pattern matching techniques and in this, it matches URLs with razor Pages. It is like most of page centric frameworks where URLs match with physical file paths. Keypoint to remember it start with the Root folder and in this Pages is the root folder.

Like MVC Razor pages also use Conventions and Configuration for routing. Razor pages use the same infrastructure as MVC for routing.

The standard Razor Pages 3.x site template includes 3 pages in the root folder.

  1. Error.cshtml
  2. Index.cshtml
  3. Privacy.cshtml

By default, route templates are generated by taking the root path of each Content Page and then it removes root folder name from the start of path and extension from the end of the path.

In Asp.Net Razor pages Index.cshtml is the default document present in any folder so it has 2 different routes one with “blank and other with https://sagarjaybhay.com/index

So in our application, we created the Employee folder and in that we Index.cshtml so our route becomes

  1. “blank which is an empty string path is “https://yourdomain.com/Employee”
  2. “Employee/Index” this is the second path https://yourdomain.com/Employee/index

But if you create Employee.cshtml in your root domain and Employee folder is present in your Pages folder then when you run your application it will throw an exception.

An unhandled exception occurred while processing the request.

AmbiguousMatchException: The request matched multiple endpoints. Matches:

/Employee
/Employee/Index

Microsoft.AspNetCore.Routing.Matching.DefaultEndpointSelector.ReportAmbiguity(CandidateState[] candidateState)

How to handle this AmbigousMatch Exception in Asp.Net Razor pages?

  1. One to overcome this error by renaming one of the file or folder names in our Asp.net razor page application.
  2. The second way is to Overwrite default routes. We know that if Routes in Asp.Net razor pages are mapped to a physical file location.
@page "EmployeeList"

We are giving above custom route names to our page in Employee folders Index.cshtml file and error is gone see below image

So by giving this custom route, you can’t use the default route in our application means  https://yourdomain.com/Employee/Index this route won’t work.

  1. The third way to overcome this error is used Route parameter in our application
@page "{name}"

In the above we give name is our route parameter and when we invoke the URL

https://yourdomain.com/Employee/abc here ABC is our route parameter.

Constraint on Route Parameter

If we see above URL we pass ABC to {name} parameter in Index view which can accept any value like character, number any value to add a constraint. Now we want our URL parameter to accept the only character then we have {name:constraint_name} syntax.

@page "{name:alpha}"

By doing this our URL only accepts the character and if we pass number it will throw an error.

GitHub:- https://github.com/Sagar-Jaybhay/AspNerRazorPages

Sagar Jaybhay, from Maharashtra, India, is currently a Senior Software Developer. He has continuously grown in the roles that he has held in the more than seven years he has been with this company. Sagar Jaybhay is an excellent team member and prides himself on his work contributions to his team and company as a whole.

Related posts