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