Building a Basic Tutor Interface with ASP.NET Core Razor Pages

Setting Up the Basic Tutor Interface

Welcome to the first lesson of our course on developing a personal tutor web application with ASP.NET Core and Razor Pages! In this lesson, we will focus on setting up a basic tutor interface using ASP.NET Core and HTML . This is an essential step in creating a user-friendly web application that enhances the learning experience. A well-designed interface is crucial for engaging students and ensuring they can interact with the tutor seamlessly. ASP.NET Core is a modern, high-performance web framework for building web applications with C# . It provides a flexible approach to web development, allowing you to create dynamic web pages, APIs, and more. In this lesson, we will use Razor Pages, a feature of ASP.NET Core that makes it easy to build web pages with server-side logic and dynamic content.

Basic Tutor Interface Mockup

To help you better visualize the interface we're building, here's a simple mockup of how the tutor web page will look after following the steps in this lesson: text +------------------------------------------------------+ | Welcome to Your Personal Tutor | | What would you like to learn today? | +------------------------------------------------------+ | | | [Conversation appears here as messages] | | | | [User] Hello, can you help me with math? | | [Assistant] Sure thing! Let's get started with ... | | | +------------------------------------------------------+ | [ Type your question... ] | | [Send] [New Session] | +------------------------------------------------------+ +------------------------------------------------------+ | Welcome to Your Personal Tutor | | What would you like to learn today? | +------------------------------------------------------+ | | | [Conversation appears here as messages] | | | | [User] Hello, can you help me with math? | | [Assistant] Sure thing! Let's get started with ... | | | +------------------------------------------------------+ | [ Type your question... ] | | [Send] [New Session] | +------------------------------------------------------+ The header is at the top, welcoming the user. The messages area is in the center, where the conversation between the student and tutor appears. At the bottom, there is an input field for typing questions, a Send button, and a New Session button.

HTML Rendering with ASP.NET Core and Razor

ASP.NET Core uses a templating engine called Razor to render dynamic HTML content. Razor allows you to combine C# code with HTML markup, making it easy to generate web pages that can display dynamic data and respond to user interactions. Razor Pages are structured so that each page consists of a .cshtml file (which contains the HTML and Razor markup) and an optional C# code-behind file for server-side logic. Razor syntax lets you: Insert dynamic C# variables into HTML Use control structures like loops and conditionals Create reusable components with partial views Apply filters and formatting to data during rendering By using Razor Pages, you can keep your application logic and presentation layer organized and maintainable while taking advantage of the full power of C# for your web application.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

text

+------------------------------------------------------+
|          Welcome to Your Personal Tutor              |
|        What would you like to learn today?           |
+------------------------------------------------------+
|                                                      |
|  [Conversation appears here as messages]             |
|                                                      |
|  [User] Hello, can you help me with math?            |
|  [Assistant] Sure thing! Let's get started with ...  |
|                                                      |
+------------------------------------------------------+
| [ Type your question... ]                            |
| [Send] [New Session]                                 |
+------------------------------------------------------+

text

TutorApp/
│
├── Pages/
│   └── Index.cshtml
│   └── Index.cshtml.cs
├── wwwroot/
├── Program.cs
├── Startup.cs
└── ...

TutorApp/
│
├── Pages/
│   └── Index.cshtml
│   └── Index.cshtml.cs
├── wwwroot/
├── Program.cs
├── Startup.cs
└── ...

// Program.cs (for .NET 6 and later)
var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
}

app.UseStaticFiles();
app.UseRouting();

app.MapRazorPages();

app.Run();

// Program.cs (for .NET 6 and later)
var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
}

app.UseStaticFiles();
app.UseRouting();

app.MapRazorPages();

app.Run();

HTML

@page
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Personal Tutor</title>
</head>
<body>
    <div class="header">
        <h1>Welcome to Your Personal Tutor</h1>
        <p>What would you like to learn today?</p>
    </div>
    ...
</body>
</html>

@page
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Personal Tutor</title>
</head>
<body>
    <div class="header">
        <h1>Welcome to Your Personal Tutor</h1>
        <p>What would you like to learn today?</p>
    </div>
    ...
</body>
</html>

HTML

    ...
    <div id="chat-container">
        <div id="messages"></div>
        <div class="input-container">
            <div class="input-wrapper">
                <input type="text" id="message-input" placeholder="Type your question..." />
            </div>
            <button onclick="sendQuery()">Send</button>
            <button id="new-chat-btn" onclick="startNewSession()">New Session</button>
        </div>
    </div>
    <script>
        // JavaScript for Interactivity
    </script>
</body>
</html>

    ...
    <div id="chat-container">
        <div id="messages"></div>
        <div class="input-container">
            <div class="input-wrapper">
                <input type="text" id="message-input" placeholder="Type your question..." />
            </div>
            <button onclick="sendQuery()">Send</button>
            <button id="new-chat-btn" onclick="startNewSession()">New Session</button>
        </div>
    </div>
    <script>
        // JavaScript for Interactivity
    </script>
</body>
</html>

using Microsoft.AspNetCore.Mvc.RazorPages;

public class IndexModel : PageModel
{
    public void OnGet()
    {
        // Server-side logic (if needed)
    }
}

using Microsoft.AspNetCore.Mvc.RazorPages;

public class IndexModel : PageModel
{
    public void OnGet()
    {
        // Server-side logic (if needed)
    }
}

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Personal Tutor</title>
</head>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Personal Tutor</title>
</head>
</html>

HTML

<body>
    <div class="header">
        <h1>Welcome to Your Personal Tutor</h1>
        <p>What would you like to learn today?</p>
    </div>
</body>

<body>
    <div class="header">
        <h1>Welcome to Your Personal Tutor</h1>
        <p>What would you like to learn today?</p>
    </div>
</body>

HTML

<div id="chat-container">
    <div id="messages"></div>
    <div class="input-container">
        <div class="input-wrapper">
            <input type="text" id="message-input" placeholder="Type your question..." />
        </div>
        <button onclick="sendQuery()">Send</button>
        <button id="new-chat-btn" onclick="startNewSession()">New Session</button>
    </div>
</div>

<div id="chat-container">
    <div id="messages"></div>
    <div class="input-container">
        <div class="input-wrapper">
            <input type="text" id="message-input" placeholder="Type your question..." />
        </div>
        <button onclick="sendQuery()">Send</button>
        <button id="new-chat-btn" onclick="startNewSession()">New Session</button>
    </div>
</div>

HTML

<script>
    // Get references to the messages container and message input field
    const messagesContainer = document.getElementById('messages');
    const messageInput = document.getElementById('message-input');
</script>

<script>
    // Get references to the messages container and message input field
    const messagesContainer = document.getElementById('messages');
    const messageInput = document.getElementById('message-input');
</script>

HTML

<script>
    function startNewSession() {
        // Clear the chat history
        messagesContainer.innerHTML = '';
    }

    // Start a session automatically when the page loads
    document.addEventListener('DOMContentLoaded', startNewSession);
</script>

<script>
    function startNewSession() {
        // Clear the chat history
        messagesContainer.innerHTML = '';
    }

    // Start a session automatically when the page loads
    document.addEventListener('DOMContentLoaded', startNewSession);
</script>

HTML

<script>
    function appendMessage(role, content) {
        // Create a new div element for the message
        const messageDiv = document.createElement('div');

        // Assign a class to the message based on its role (user or assistant)
        messageDiv.className = `message ${role}`;

        // Set the text content of the message
        messageDiv.textContent = content;

        // Append the message to the messages container
        messagesContainer.appendChild(messageDiv);

        // Scroll the messages container to the bottom to show the latest message
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }
</script>

<script>
    function appendMessage(role, content) {
        // Create a new div element for the message
        const messageDiv = document.createElement('div');

        // Assign a class to the message based on its role (user or assistant)
        messageDiv.className = `message ${role}`;

        // Set the text content of the message
        messageDiv.textContent = content;

        // Append the message to the messages container
        messagesContainer.appendChild(messageDiv);

        // Scroll the messages container to the bottom to show the latest message
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }
</script>

HTML

<script>
    function sendQuery() {
        // Retrieve and trim the input value
        const message = messageInput.value.trim();

        // If the message is empty, do not proceed
        if (!message) return;

        // Add user message to display
        appendMessage('user', message);

        // Clear the input field after sending the message
        messageInput.value = '';

        // For now, just echo the message back
        setTimeout(() => {
            appendMessage('assistant', `You asked: ${message}`);
        }, 500);
    }
</script>

<script>
    function sendQuery() {
        // Retrieve and trim the input value
        const message = messageInput.value.trim();

        // If the message is empty, do not proceed
        if (!message) return;

        // Add user message to display
        appendMessage('user', message);

        // Clear the input field after sending the message
        messageInput.value = '';

        // For now, just echo the message back
        setTimeout(() => {
            appendMessage('assistant', `You asked: ${message}`);
        }, 500);
    }
</script>

HTML

<script>
    // Handle Enter key
    messageInput.addEventListener('keypress', function (e) {
        if (e.key === 'Enter') {
            // Prevent the default form submission behavior
            e.preventDefault();
            // Send the message when Enter key is pressed
            sendQuery();
        }
    });
</script>

<script>
    // Handle Enter key
    messageInput.addEventListener('keypress', function (e) {
        if (e.key === 'Enter') {
            // Prevent the default form submission behavior
            e.preventDefault();
            // Send the message when Enter key is pressed
            sendQuery();
        }
    });
</script>

text

TutorApp/
│
├── Pages/
│   └── Index.cshtml
│   └── Index.cshtml.cs
├── wwwroot/
├── Program.cs
├── Startup.cs
└── ...

// Program.cs (for .NET 6 and later)
var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
}

app.UseStaticFiles();
app.UseRouting();

app.MapRazorPages();

app.Run();

HTML

@page
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Personal Tutor</title>
</head>
<body>
    <div class="header">
        <h1>Welcome to Your Personal Tutor</h1>
        <p>What would you like to learn today?</p>
    </div>
    ...
</body>
</html>

HTML

    ...
    <div id="chat-container">
        <div id="messages"></div>
        <div class="input-container">
            <div class="input-wrapper">
                <input type="text" id="message-input" placeholder="Type your question..." />
            </div>
            <button onclick="sendQuery()">Send</button>
            <button id="new-chat-btn" onclick="startNewSession()">New Session</button>
        </div>
    </div>
    <script>
        // JavaScript for Interactivity
    </script>
</body>
</html>

using Microsoft.AspNetCore.Mvc.RazorPages;

public class IndexModel : PageModel
{
    public void OnGet()
    {
        // Server-side logic (if needed)
    }
}

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Personal Tutor</title>
</head>
</html>

HTML

<body>
    <div class="header">
        <h1>Welcome to Your Personal Tutor</h1>
        <p>What would you like to learn today?</p>
    </div>
</body>

HTML

<div id="chat-container">
    <div id="messages"></div>
    <div class="input-container">
        <div class="input-wrapper">
            <input type="text" id="message-input" placeholder="Type your question..." />
        </div>
        <button onclick="sendQuery()">Send</button>
        <button id="new-chat-btn" onclick="startNewSession()">New Session</button>
    </div>
</div>

HTML

<script>
    // Get references to the messages container and message input field
    const messagesContainer = document.getElementById('messages');
    const messageInput = document.getElementById('message-input');
</script>

HTML

<script>
    function startNewSession() {
        // Clear the chat history
        messagesContainer.innerHTML = '';
    }

    // Start a session automatically when the page loads
    document.addEventListener('DOMContentLoaded', startNewSession);
</script>

HTML

<script>
    function appendMessage(role, content) {
        // Create a new div element for the message
        const messageDiv = document.createElement('div');

        // Assign a class to the message based on its role (user or assistant)
        messageDiv.className = `message ${role}`;

        // Set the text content of the message
        messageDiv.textContent = content;

        // Append the message to the messages container
        messagesContainer.appendChild(messageDiv);

        // Scroll the messages container to the bottom to show the latest message
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }
</script>

HTML

<script>
    function sendQuery() {
        // Retrieve and trim the input value
        const message = messageInput.value.trim();

        // If the message is empty, do not proceed
        if (!message) return;

        // Add user message to display
        appendMessage('user', message);

        // Clear the input field after sending the message
        messageInput.value = '';

        // For now, just echo the message back
        setTimeout(() => {
            appendMessage('assistant', `You asked: ${message}`);
        }, 500);
    }
</script>

HTML

<script>
    // Handle Enter key
    messageInput.addEventListener('keypress', function (e) {
        if (e.key === 'Enter') {
            // Prevent the default form submission behavior
            e.preventDefault();
            // Send the message when Enter key is pressed
            sendQuery();
        }
    });
</script>

Setting Up the Basic Tutor Interface

Basic Tutor Interface Mockup

HTML Rendering with ASP.NET Core and Razor

Join the 1M+ learners on CodeSignal

Creating the Pages Directory

Setting Up Razor Pages in ASP.NET Core

Rendering Views and Passing Data

HTML Structure and Header

Body and Header Section

Tutor Container and Input Elements

JavaScript for Interactivity

StartNewSession Function

AppendMessage Function

SendQuery Function

Handling the Enter Key

Summary and Preparation for Practice