Skip to main content

Add / Edit the pages & add custom link in Asp.net core project


Default Asp.net core supports responsive design. when the view port becomes this narrow, the menu collapses into the hamburger icon here, which I can still click on to get to the menu. And this behaviour is provided by Bootstrap. So, in this project is Bootstrap version 3



I navigate to the different pages in this application, like the Contact page or the About page, these will go to URLs like /Contact and /About. And in our project, ASP.NET Core is mapping these requests to Razor Pages.



I just want to point out that if you have the application running without the debugger attached, you should be able to make changes in the project, and just save files and come out and refresh the browser and see those changes reflected in the browser.



After Refresh. We will get page updated.



Now I want to make is to add a link into my menu to get to the products that we're going to be working with in this project. Let's add an anchor tag with the text Products. And you'll notice there's one additional piece of information here, asp-page. This is what's known as a tag helper in ASP.NET Core

In Layout.cshtml page add Products link



Adding a new razor page. Right click on Pages and add new folder Products.


Right click on Products folder and add new item. You will get popup in that select razor page.


Give the name of the page as List.cshtml


This will do is create really two files inside of my folder, List.cshtml and List.cshtml .cs.
The first file is technically my Razor Page. You can see @page directive and the model directive, with a lowercase m, and this directive says that model for this page is of type ListModel.

In other words, an instance of the ListModel class is the object that this page will use to display information. If we want to display Products information, then ListModel will need to contain Products information. And ListModel is the class that we can see it defined in the .cs file, which is nested behind List.cshtml.



 For right now, all I want to do is make sure that this List Razor Page is working properly, so let me add a header to the page




 I'm going to click on Products and see that I am rendering this new Razor Page that I created.



Labels:

Comments

Post a Comment

Popular posts from this blog

Prompt Engineering Fundamentals

  Introduction Generative AI is a transformative technology capable of producing text, images, audio, and code in response to user prompts. This capability is powered by Large Language Models (LLMs) like OpenAI's GPT series, which are trained to understand and generate natural language. Interacting with these models via prompts allows users to harness their potential without needing technical expertise. This chapter explores the essentials of prompt engineering, a field dedicated to optimizing prompt design for consistent and high-quality responses. Learning Goals By the end of this lesson, you will be able to: Explain what prompt engineering is and why it matters. Describe the components of a prompt and how they are used. Learn best practices and techniques for prompt engineering. Apply learned techniques to real examples using an OpenAI endpoint. Learning Sandbox Prompt engineering is more art than science, requiring practice and iterative refinement. This lesson includes a Jupyt...
Post a Comment
Read more

AWS Cloud Containers

Amazon Web Services (AWS) offers a variety of services for deploying and managing applications in the cloud. One of these services is called Amazon Elastic Container Service (ECS), which allows you to run and manage Docker containers on AWS. Here is a brief overview of how Amazon ECS works: You package your application into a Docker container image and push it to a registry, such as Amazon Elastic Container Registry (ECR) or Docker Hub. You create an Amazon ECS task definition, which is a blueprint for your containerized application. The task definition specifies things like the Docker image to use, the CPU and memory requirements, and the environment variables to pass to the container. You create an Amazon ECS cluster, which is a group of Amazon EC2 instances that are running the Amazon ECS container agent. The cluster is where your tasks are placed and run. You create an Amazon ECS service, which is a long-running task that is hosted on your cluster. The service ensures that a speci...
Post a Comment
Read more

Identified COVID-19 in X-ray images with deep learning.

  Project structure :       Our coronavirus (COVID-19) chest X-ray data is in the dataset/ directory where our two classes of data are separated into covid/ and normal/   I have created train_covid19.py file to train the model.   Three command line arguments (parameters) required to run this file :   --dataset: The path to our input dataset of chest X-ray images. --plot: An optional path to an output training history plot. By default the plot is named plot.png unless otherwise specified via the command line. --model: The optional path to our output COVID-19 model; by default it will be named covid19.model.     To load our data, we grab all paths to images in in the --dataset directory. Then, for each imagePath, we:   ·           Extract the class label (either covid or normal) from the path. ·           Load the image, and preprocess it by convertin...
Post a Comment
Read more