代写 html SQL database Go Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)
Lab 5: Get started with ASP.NET Core and Visual Studio (Part 2)
a.
1. 2.
3.
Update the generated pages in an ASP.NET Core app
 Estimation time for this section A: 20 Minutes Continue from the Lab 4 exercise.
Now, we will modify and update the header titles and the data type for previous application. Based on the below images, we will change the header of FlowerProducedDate to become the Flower Produced Date (three words) and the header of FlowerName to become the Flower Name (two words). Besides, we also will change the datetime datatype for the column of FlowerProducedDate to become the date datatype.
i. Open the Models/Flower.cs file and add the highlighted lines shown in the following code:
The Display attribute specifies what to display for the name of a field (in this case “Flower Produced Date” instead of “FlowerProducedDate”). The DataType attribute specifies the type of the data (Date), so the time information stored in the field isn’t displayed.
Open the Lab 4 project (MVCFlowerShop) again and continue the steps in this Lab
5.
Level 3
Asia Pacific University of Technology & Innovation Page 1 of 26

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)
ii. Right click on a red squiggly line > Quick Actions and Refactorings.
Visual Studio adds using System.ComponentModel.DataAnnotations.
iii. Right click on a red squiggly line > Quick Actions and Refactorings on the [Column] atribute and select using System.ComponentModel.DataAnnotations.Schema;
iv. Finally, re-run the application again and you will see the below changes in the pages.
Level 3
Asia Pacific University of Technology & Innovation Page 2 of 26

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)
4.
Browse to Pages/Flowers and hover over an Edit link to see the target URL.
The Edit, Details, and Delete links are generated by the Anchor Tag Helper in the Pages/Flowers/Index.cshtml file.
Tag Helpers enable server-side code to participate in creating and rendering HTML elements in Razor files. In the preceding code, the AnchorTagHelper dynamically generates the HTML href attribute value from the Razor Page (the route is relative), the asp-page, and the route id (asp-route- id).
5.
Level 3
Asia Pacific University of Technology & Innovation Page 3 of 26

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)
6.
Now, Use View Source from your favorite browser (google chrome) to examine the generated markup. A portion of the generated HTML is shown below:
The dynamically-generated links pass the Flower ID with a query string (for example, http://localhost:5000/Flowers/Details?id=2).
Now, update the Edit, Details, and Delete Razor Pages to use the “{id:int}” route template. Change the page directive for each of these pages from @page to @page “{id:int}”.
E.g.
7.
Level 3
Asia Pacific University of Technology & Innovation Page 4 of 26

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)
8.
Run the app and then view source. The generated HTML adds the ID to the path portion of the URL:
Posting and binding review. Examine the Pages/Flowers/Edit.cshtml.cs file.
Level 3
Asia Pacific University of Technology & Innovation Page 5 of 26
9.
When an HTTP GET request is made to the Flowers/Edit page (for example, http://localhost:5000/Flowers/Edit/2):
 The
OnGetAsync
method fetches the flowers from the database and returns the
Page
method.
 The Page method renders the Pages/Flowers/Edit.cshtml Razor Page.
The Pages/Flowers/Edit.cshtml file contains the model directive (@model RazorPagesMovie.Pages.Flowers.EditModel), which makes the flower model available on the page.
 The Edit form is displayed with the values from the flower.
When the Flowers/Edit page is posted:
 The form values on the page are bound to the Flower property. The [BindProperty] attribute enables Model binding.
 If there are errors in the model state (for example, FlowerProducedDate cannot be converted to a date), the form is posted again with the submitted values.
 If there are no model errors, the movie is saved.
The HTTP GET methods in the Index, Create, and Delete Razor pages follow a similar pattern. The HTTP POST method in the Create Razor Page follows a similar pattern to the method in the Edit Razor Page.
OnPostAsync
OnPostAsync

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)
b. Add search to ASP.NET Core Razor Pages.
 Estimation time for this section B: 30 Minutes
In this document, search capability is added to the Index page that enables searching flowers by type or name.
1.
Add the following highlighted properties to Pages/Flowers/Index.cshtml.cs:
You’ll work with the Typess and FlowerTypes properties later in this document. Update the Index page’s OnGetAsync method with the following code:
2. 3.
 SearchString: contains the text users enter in the search text box.
 Types: contains the list of types. This allows the user to select a genre from the list.
 FlowerTypes: contains the specific types the user selects (for example, “Asteraceae”).
Level 3
Asia Pacific University of Technology & Innovation Page 6 of 26

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)
4.
Navigate to the Flowers page and append a query string such as ?searchString=Chry to the URL (for example, http://localhost:5000/Flowers?searchString=Chry). The filtered flowers are displayed.
If the following route template is added to the Index page:
The search string can be passed as a URL segment (for example, http://localhost:5000/Flowers/Chry).
However, you can’t expect users to modify the URL to search for a flower. In this step, UI is added to filter flowers. If you added the route constraint “{searchString?}”, remove it.
Open the Pages/Flowers/Index.cshtml file, and add the

markup highlighted in the following code:
Level 3
Asia Pacific University of Technology & Innovation Page 7 of 26
5.
6.
7.

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)
8.
The HTML

tag uses the Form Tag Helper. When the form is submitted, the filter string is sent to the Pages/Flowers/Index page. Save the changes and test the filter.
Now, adding the Search button by Type.
Update the OnGetAsync method with the following code:
Update Index.cshtml as follows:
Test the app by searching by flower type, by flower name, and by both.
Level 3
Asia Pacific University of Technology & Innovation
Page 8 of 26
9. 10.
11.
12.

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)
By Type
By Name
By Type and Name
Level 3 Asia Pacific University of Technology & Innovation Page 9 of 26

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)
c. Add a new field to a Razor Page in ASP.NET Core.
 Estimation time for this section C: 30 Minutes
In this section you’ll use Entity Framework Code First Migrations to add a new field to
the model and migrate that change to the database.
When you use EF Code First to automatically create a database, Code First adds a table to the database to help track whether the schema of the database is in sync with the model classes it was generated from. If they aren’t in sync, EF throws an exception. This makes it easier to find inconsistent database/code issues.
1. Now, adding a Rating Property to the Flower Model.
2. Open the Models/Flower.cs file and add a Rating property:
3. Edit Pages/Flowers/Index.cshtml, and add a Rating field:
Level 3
Asia Pacific University of Technology & Innovation Page 10 of 26

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)
4. Add the Rating field to the Delete and Details pages.
Delete page
Details page
Level 3
Asia Pacific University of Technology & Innovation Page 11 of 26

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)
5. Update Create.cshtml with a Rating field. You can copy/paste the previous

element and let intelliSense help you update the fields. IntelliSense works with Tag Helpers.
6. Add the Rating field to the Edit Page.
7. The app won’t work until the DB is updated to include the new field. If run now,
the app throws a SqlException.
There are a few approaches to resolving the error:
i. Have the Entity Framework automatically drop and re-create the database using the new model class schema. This approach is convenient early in the development cycle; it allows you to quickly evolve the model and database schema together. The downside is that you lose existing data in the database. You don’t want to use this approach on a production database! Dropping the DB on schema changes and using an initializer to automatically seed the database with test data is often a productive way to develop an app.
ii. Explicitly modify the schema of the existing database so that it matches the model classes. The advantage of this approach is that you keep your data. You can make this change either manually or by creating a database change script.
iii. Use Code First Migrations to update the database schema.
Level 3
Asia Pacific University of Technology & Innovation Page 12 of 26

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)
8. In this tutorial, use Code First Migrations. Update the SeedData class so that it provides a value for the new column. A sample change is shown below, but you’ll want to make this change for each new Flower block.
9. Build the solution.
10. From the Tools menu, select NuGet Package Manager > Package Manager
Console. In the PMC, enter the following commands:
Add-Migration Rating Update-Database
The Add-Migration command tells the framework to:
 Compare the Flower model with the Flower DB schema.
 Create code to migrate the DB schema to the new model.
The name “Rating” is arbitrary and is used to name the migration file. It’s helpful to use a meaningful name for the migration file.
Level 3
Asia Pacific University of Technology & Innovation Page 13 of 26

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)
11. If you delete all the records in the DB, the initializer will seed the DB and include the Rating field. You can do this with the delete links in the browser or from Sql Server Object Explorer (SSOX). To delete the database from SSOX:
12. Run the app and verify you can create/edit/display flowers with a Rating field. If the database isn’t seeded, stop IIS Express, and then run the app.
 Select the database in SSOX.
 Right click on the database, and select Delete.
 Check Close existing connections.
 Select OK.
 In the PMC, update the database by typing: Update-Database
Level 3
Asia Pacific University of Technology & Innovation Page 14 of 26

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)
d. Add validation to an ASP.NET Core Razor Page.
 Estimation time for this section D: 10 Minutes
In this section, validation logic is added to the Flower model. The validation rules are
enforced any time a user creates or edits a flower.
1. Now, adding validation rules to the flower model.
2. Open the Models/Flower.cs file. DataAnnotations provides a built-in set of validation attributes that are applied declaratively to a class or property.
DataAnnotations also contains formatting attributes like DataType that help with
formatting and don’t provide validation.
3. Update the class to take advantage of the Required, StringLength,
, and Range validation attributes.
Flower
RegularExpression
public class Flower
{
public int ID { get; set; }
[StringLength(60, MinimumLength = 3)]
[Required]
[Display(Name = “Flower Name”)]
public string FlowerName { get; set; }
[Display(Name = “Flower Produced Date”)]
[DataType(DataType.Date)]
public DateTime FlowerProducedDate { get; set; }
[RegularExpression(@”^[A-Z]+[a-zA-Z””‘\s-]*$”)]
[Required]
[StringLength(30)]
public string Type {get; set; }
[Range(1, 100)]
[DataType(DataType.Currency)]
[Column(TypeName = “decimal(18, 2)”)]
public decimal Price { get; set; }
[Range(1, 10)]
[StringLength(5)]
[Required]
}
public string Rating { get; set; }
Level 3
Asia Pacific University of Technology & Innovation Page 15 of 26

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)
Notes:
Validation attributes specify behavior that’s enforced on model properties:
The Required and MinimumLength attributes indicate that a property must have a value. However, nothing prevents a user from entering whitespace to satisfy the validation constraint for a nullable type. Non-nullable value types (such as decimal, int, float, and DateTime) are inherently required and don’t need the Required attribute.
The RegularExpression attribute limits the characters that the user can enter. In the preceding code, Genre must start with one or more capital letters and follow with zero or more letters, single or double quotes, whitespace characters, or dashes. Rating must start with one or more capital letters and follow with zero or more letters, numbers, single or double quotes, whitespace characters, or dashes.
The Range attribute constrains a value to a specified range.
The StringLength attribute sets the maximum length of a string, and optionally the minimum length.
Level 3 Asia Pacific University of Technology & Innovation Page 16 of 26

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)
e. Deploy the web application together with the Local SQL database to the Azure Cloud.
 Estimation time for this section E: 20 Minutes
In this section, we will publish our web application with the database to the Azure
Cloud environment.
Follow the below steps:
1. Go to the solution explorer and right click on the “MVCFlowerShop”. Choose
the publish button.
2. Click start and reach to the “Pick a Publish Target” dialog box. Choose the “App
”. Select the “Create New” under the Azure App Service. Then, choose
the “ ” and click on it.
3. When reach to the “Create App Service” dialog box, fill up the below information:
Service
Create Profile
 Enter your subscription.
 The App Name, Subscription, and Resource Group entry fields are populated.
You can keep these names or change them.
 In the Hosting Plan, kindly choose the New… button.
 At the form of Configure Hosting Plan, choose the location as Southeast Asia
and the size as free.
Level 3
Asia Pacific University of Technology & Innovation Page 17 of 26

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)
 Then, at the Explore Additional Azure Services, select “Create a SQL Database” to create a new database.
 Select New… on the Configure SQL Database dialog to create a new database.
 Select the Southeast Asia as your SQL DB Location.
 Then, create your admin username and password in the given columns.
Level 3 Asia Pacific University of Technology & Innovation Page 18 of 26

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)
4. Then, a column of Connection String Name appear. Continue with the “DefaultConnection” string and press OK. And, return to the App Service dialog box.
Level 3 Asia Pacific University of Technology & Innovation Page 19 of 26

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)
create
5. 6.
Lastly, click on the button to start the deployment steps.
Once the deployment stage finish, it will be return to the publish page below:
Level 3
Asia Pacific University of Technology & Innovation Page 20 of 26

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)
7.
Now, click on the configure button, and do the below configuration for the
database setting. Go to the Settings section and in the database section, check the below options:
Lastly, save the settings and click the publish button to publish your application to the Azure Cloud.
Level 3
Asia Pacific University of Technology & Innovation Page 21 of 26
8.

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)
9. At the end, you will see your application is running in the azure cloud there, as below:
10. Now, go to your azure portal and change the settings for your Azure SQL server pricing tier plan as below. Choose the Basic plan.
Level 3 Asia Pacific University of Technology & Innovation Page 22 of 26

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)
11. To access your database you can use the SQL Server Object Explorer (SSOX) or Microsoft SQL Management Studio to manage your database as what you learn in the previous exercises.
E.g. in SSOX :
Level 3
Asia Pacific University of Technology & Innovation Page 23 of 26

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)
Level 3 Asia Pacific University of Technology & Innovation Page 24 of 26

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)
E.g. in Microsoft SQL Management Studio
Level 3 Asia Pacific University of Technology & Innovation Page 25 of 26

Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Get started with ASP.NET Core and Visual Studio (Part 2)
Summary:
In this tutorial, we learned how to build modify and update the generated pages. We also learned how to add the search bar in the page and also how to do the validation for the page.
Level 3 Asia Pacific University of Technology & Innovation Page 26 of 26

Related Posts