Setting view title

Changing the view title

Open the Views/HelloWorld/Index.cshtml view file.

Change the title and <h2> element as shown in the following:

@{
    ViewData["Title"] = "Movie List";
}

<h2>My Movie List</h2>

<p>Hello from our View Template!</p>

Notice

ViewData["Title"] = "Movie List";

The code above sets the Title property of the ViewData dictionary to "Movie List". The Title property is being used in the <title> HTML element in the layout page:

<title>@ViewData["Title"] - Movie App</title>

Save the change and navigate to https://localhost:{PORT}/HelloWorld.

Notice that the following have changed:

  • Browser title.

  • Primary heading.

  • Secondary headings.

If there are no changes in the browser, it could be cached content that is being viewed. Press Ctrl+F5 in the browser to force the response from the server to be loaded. The browser title is created with ViewData["Title"] we set in the Index.cshtml view template and the additional "- Movie App" added in the layout file.

The content in the Index.cshtml view template is merged with the Views/Shared/_Layout.cshtml view template. A single HTML response is sent to the browser. Layout templates make it easy to make changes that apply across all of the pages in an app.

The content in the Index.cshtml view template is merged with the Views/Shared/_Layout.cshtml view template.

A single HTML response is sent to the browser!

Last updated