What is Attributes in MVC Part # 2?. The Complete ASP.NET MVC Developer Course 2023 [Videos].

In this article, I am going to continue the discussion of Attributes in MVC Application. As part of this article, we are going to discuss UIHint, HiddenInput, and ReadOnly built-in attributes. This is a continuation part of our previous article, so please read our previous article before proceeding to this article. In our previous article, we discussed the following built-in attributes.

UIHint Attribute in ASP.NET MVC Application:

Let us understand how to open a page in the new browser window in asp.net MVC application. Along the way, we will also see how to use the UIHint attribute in ASP.NET MVC.

Modify the ModifyEmployee.cs class file in the Models folder as shown below.

Modify the Details action method of EmployeeController as shown below

Modify the Details.cshtml view as shown below.

At this point, build the application and navigate to http://localhost:61449/Employee/Details/1. When you click on the personal website link, the target page will open in the same window.

How to open the page in a new window?

If you want the page to be open in a new window, then please follow the below steps.

Right-click on the “Views” folder, and add the “Shared” folder if it does not exists. Then again, Right-click on the “Shared” folder and add a folder with the name “DisplayTemplates“. Next, Right-click on the “DisplayTemplates” folder, and add a view with the name “Url.cshtml“. Once you created the Uri.cshtml view, then please copy and paste the following code in it.

Thats it. Build the application and click on the link. Now you will see that the page is opened in a new window. The downside of this approach is that from now on all the links, will open in a new window. To overcome this, please follow the below steps.

1. Rename Url.cshtml to OpenInNewWindow.cshtml
2. Decorate the “PersonalWebSite” property in EmployeeMetaData class with UIHint attribute and specify the name of the template to use. In our case, the name of the template is â€œOpenInNewWindow” as shown below.
namespace AttributesInMVC.Models
{
[MetadataType(typeof(EmployeeMetaData))]
public partial class Employee
{
}
public class EmployeeMetaData
{
[DataType(DataType.Url)]
[UIHint("OpenInNewWindow")]
public string PersonalWebSite { get; set; }
}
}

So, the UIHint Attribute in ASP.NET MVC is used to specify the name of the template to use to display the data field on the model properties. 

Hidden Input Attribute in ASP.NET MVC:

The HiddenInput attribute in ASP.NET MVC is used to generate an HTML element with the input type=hidden. This attribute is extremely useful when you dont want the user to see or edit the property, but you need to post the property value to the server when the form is submitted, so the correct record can be updated. The Hidden Input attribute is present in the System.Web.Mvc namespace.

Readonly Attribute in ASP.NET MVC:

The ReadOnly attribute is present in System.ComponentModel namespace. As the name suggests, this attribute is used to make a property read-only. Please note that we will still be able to change the property value on the view, but once we post the form the model binder will respect the read-only attribute and will not move the value to the property.  We can also, make the property of a class readonly simply, by removing the SET accessor

Let us understand the use of HiddenInput and Readonly Attribute with an example.

Modifying the ModifyEmployee.cs file:  

Modify the ModifyEmployee.cs file as shown below. Please notice that the Id property is decorated with HiddenInput attribute and EmailAddress is decorated with the ReadOnly attribute.

Changes to EmployeeController.cs file

Create Edit.cshtml view and copy and paste the following code

Run the application and navigate to http://localhost:61449/Employee/Edit/1 and see everything is working as expected