website and cshtml?

[demondan]

Hi guys
Hope your all well?

I'm building a website in visual studio, each page has two files to it a .cshtml and a

.cshtml​

.cs where the .cs is clearly c# and .cshtml is html. I cant seem to find an answer as to what each one is generally used for? The beginner tutorials often have the .cs doing pointless functions (other than to demonstrate how the two can work together) such as printing the local path to the web page.

Also at the start of a cshtml file I see this:

@page
@model IndexModel
@{
ViewData["Title"] = "Home";
}

What does the @ symbol indicate, I feel like I should know this :-/

cheers guys

Demondan

 

[jmcilhinney]

The CSHTML page is not actually HTML but Razer, which is basically an HTML template that gets processed on the server and from which the final HTML gets generated to be sent to the browser. It's the equivalent of the ASPX page that used to be used.

The CS file is the pure C# code-behind file that contains event handlers and other methods, properties, etc. For instance, if you click a button on the web page, the Click event handler of that button will be executed in the CS file, then the Razer page will be processed to generate the HTML to send back to the browser.

The @ symbol indicates a Razer directive. As you noted, the Razer page looks much like HTML and it does contain some literal HTML code that simply gets copied to the final output. Anywhere there's a @ means that there's something that has to be processed by the Razer engine to generate HTML. For instance, if you wanted to choose between two blocks of HTML to include in the output, you would use a C# 'if' statement and you'd have prepend an @ symbol to indicate that it was C# and not HTML.

 

[demondan]

Hi
Thanks for the reply, so would you still write the code in html which creates the button on the razer page and then you would write the function that is called by the onclick event in c#? Or can it all be written in c# and translated to html?

cheers!

 

[jmcilhinney]

The CSHTML file represents the page. The button is part of the page so that's where the button is defined. The idea of the two files is presentation and behaviour. The page is the presentation and the code-behind is the behaviour. A button is presentation. The code that is executed when the button is clicked is behaviour.

 

[demondan]

thanks that makes sense!