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.

circle-info

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