代做program语言、代写Python，C/C+程序、Java编程设计调试

日期：2021-04-16 11:44

Introduction

You will continue working with the music business problem domain introduced in assignment #5. In this assignment, the

web app will be enhanced to support security concepts as well as richer data such as rich text and media files (images,

audio files, and videos).

Specifications overview and work plan

Here is a brief work plan sequence:

1. Create the project using the “Web App Project Template W2021 V3”

2. Customize the app’s appearance.

3. Create the design model classes.

4. Create view models and mappers that cover the use cases.

5. Configure the security settings for the app.

6. Add methods to the Manager class that:

a. load initial data

b. handle the use cases

7. Implement rich text editing and media item handling.

8. Publish your web app to Azure.

Page 2 of 20

Getting started

Create a new web app named “Assignment6”. You must use the “Web App Project Template W2021 V3” project

template provided by your professor. The project template is available on the course website (on Blackboard).

You may update NuGet packages and build the app to ensure an error-free base but DON’T run the app yet.

As you write code, you should build frequently. If your project has a compilation error and you are unsure how to fix it,

contact your professor and include the error message details – there may be a simple fix. Some problems may be

challenging for your professor to solve over email, so use your in-class time to work on assignments.

The best way to work through this assignment is to work on each task incrementally. Get one task working before

moving on to the next task. Test each task as you complete them.

Temporarily disable error-handling for HTTP errors 500 and higher

Open the Global.asax.cs source code file. In the Application_EndRequest() method, temporarily comment out the

following statement:

if (code >= 500)…

Verify the Upload.cshtml partial view

Go to the Shared folder. If the folder and/or file EditorTemplates/Upload.cshtml does not exist, please add them.

Customize the app’s appearance

You will customize the appearance of your web apps and assignments. Never submit an assignment that has the

generic auto-generated text content. Please make the time to customize the web app’s appearance.

For this assignment, you can defer this customization work until later. Come back to it at any time and complete it before

you submit your work.

Follow the guidance from Assignment 1 to customize the app’s appearance, including the links/text in the page header

and footer. For this assignment, you may remove the About and Contact pages but do not forget to remove the links

from the navigation bar as well.

After creating the web app, customize the home page. Change the large “Learn more >>” button to “Assignment 6 on

Azure” and set the button link to the URL of your assignment on Azure.

WEB524 – ASSIGNMENT #6 – WINTER 2021 DUE: APRIL 21, 2021 @ 11:59 PM

Page 3 of 20

Load data and test your app

After creating your project, you will need to login so that you can seed the initial data. Create the first user account:

admin@example.com. After it is created, login with this account.

Use the LoadData controller and call the manager object’s LoadData() method to load initial data for the web app.

Test your work by attempting to register a new user. The new role claim list should appear on the “register” page and

enable the correct configuration of a new user.

WEB524 – ASSIGNMENT #6 – WINTER 2021 DUE: APRIL 21, 2021 @ 11:59 PM

Page 4 of 20

Data storage preparation tasks

Next, enable Migrations. Migrations will create a starting point (snapshot) of the database structure. You may need to

review previous assignments if you need help remembering the commands.

Prepare for security-aware content

You will continue to use the user account security ideas that were implemented in the previous assignment. In other

words:

? A user with an Executive role claim can add, edit, and delete an artist.

? A user with a Coordinator role claim can add, edit, and delete an album.

? A user with a Clerk role claim can add, edit, and delete a track.

? All other kinds of authenticated users can read artist, album, and track data.

? Anonymous users cannot work with artist, album, and track data.

Add these kinds of users to your app, using the revised Register page.

Recently, you learned how to conditionally enable functionality based on information in the security principal (e.g.

authenticated or not, user info, role claim info). Menu item and content containers could be visible, or not, depending

upon the user.

In this assignment, you must implement these ideas. In general:

? Menu items – “Artists”, “Albums” and “Tracks” – should appear to authenticated users only.

? Content containers – links/buttons connecting to all “Add new” pages – should appear (or not), based on the

user.

As you make progress coding a feature, pause for a moment and decide whether security should influence who/when

users can see the feature on the user interface.

Preparing for rich text editing

The Artist and Album design model classes need another string property, to hold rich text.

In the Artist class, add a new string property named “Biography”. It is not required and will be lengthy. Its intention is

to capture content about the history, biographical data, and musical style of the artist.

In the Album class, add a new string property named “Summary”. It is not required and will be lengthy. Its intention is

to capture content about the theme, style, content, and assembly of the album.

Important: Make sure you name these ‘lengthy’ properties exactly as specified.

WEB524 – ASSIGNMENT #6 – WINTER 2021 DUE: APRIL 21, 2021 @ 11:59 PM

Page 5 of 20

Build the app and run it in a browser. Uh oh, an error:

As the error states, the data model has changed. To fix this, review the coverage of the Migrations feature in the lecture

notes:

1. add-migration descriptive-name-for-migration.

2. update-database

Later, remember this “recipe” for enabling rich text editing and display:

1. Add [DataType(DataType.MultiLineText)] to the string property in the view model class.

2. In the view, before the code that renders the string property, add a reference to the rich text editor app.

3. After the code that renders the string property, run the command to convert the <textarea> into a rich text

editor rectangle.

4. In the controller method that handles the data submitted by the user (the POST method), add

[ValidateInput(false)].

5. When displaying rich text, use the Raw() HTML Helper.

Implement “get all” for Artist and Album

You will want to start coding the “add new” pages for an Artist and Album as quickly as possible. Before you do, it

makes sense to implement the “get all” use case for each.

Use the information you learned in class and the class notes to implement this functionality. Your artist list may look like

the following:

WEB524 – ASSIGNMENT #6 – WINTER 2021 DUE: APRIL 21, 2021 @ 11:59 PM

Page 6 of 20

Your album list may look like the following:

Implement “add new” for Artist

This task is like the “add new” Artist task that you coded in the previous assignment however the updated Artist design

model class has a new Biography string property which will hold rich text. Think back to the previous lectures and check

your class notes to complete this task. Some hints have also been documented above.

Keep in mind, it may be possible to re-use some of your design and code from the previous assignment.

When you are testing, you can typically get biography information from Wikipedia (or other web resources). Your “add

new” Artist view may look like the following:

WEB524 – ASSIGNMENT #6 – WINTER 2021 DUE: APRIL 21, 2021 @ 11:59 PM

Page 7 of 20

WEB524 – ASSIGNMENT #6 – WINTER 2021 DUE: APRIL 21, 2021 @ 11:59 PM

Page 8 of 20

Implement “add new” for Album

This task is NOT the same as the previous assignment’s “add new” album task – it is much simpler. You will enable the

user to add a new album for a specific known artist. You will NOT display a checkbox list of all artists or a checkbox list

of all tracks. As a result, it will be more like the “add new” track task from the previous assignment.

On a “get one” details view for Artist, add a link to enable “Add new album for this artist”. In the ArtistsController,

implement the “add new” Album functionality. Your “add new” Album view may look like the following:

WEB524 – ASSIGNMENT #6 – WINTER 2021 DUE: APRIL 21, 2021 @ 11:59 PM

Page 9 of 20

WEB524 – ASSIGNMENT #6 – WINTER 2021 DUE: APRIL 21, 2021 @ 11:59 PM

Page 10 of 20

Prepare for non-text media types

In this app, two scenarios will be implemented for non-text media type handling.

In the simple scenario, the existing Track entity will be modified to handle an audio media item.

In the more complex scenario, a new ArtistMediaItem entity will be created. This new entity will be dedicated to the

description and storage of media items. The existing Artist entity will be modified to handle a collection of

ArtistMediaItem objects.

Media type – add audio to the Track entity

As noted above, this is the simple scenario. The existing Track entity will be modified to handle an audio media item.

Follow the guidance in the lecture notes and in the PhotoProperty code example. When you build and run in a browser,

the “model… changed” error appears. Again, add a migration, and update the database.

WEB524 – ASSIGNMENT #6 – WINTER 2021 DUE: APRIL 21, 2021 @ 11:59 PM

Page 11 of 20

Implement “get all” and “get one” track

Now it is time to implement the “get all” and “get one” track use cases. You will do work in the Manager class, a

TracksController, and some views. It may be possible to re-use some of your design and code from the previous

assignment. Your track list may look like the following:

The details view for the “get one” use case should include an HTML audio player for the track’s sample clip.

<audio src="/clip/@Model.Id" controls="controls"></audio>

As you can see, the value of the src attribute is a path like this: /clip/123

That means that we need an action/method to fetch the clip. The PhotoProperty code example used a dedicated

controller for that. For this assignment, you can simply add a method to the Tracks controller that will work with the

Manager object to fetch and deliver the clip. Remember to use attribute routing for a clean URL.

Your track details view may look like the following. Notice the disabled state of the audio player because it could not

find the audio clip data. (We will fix that soon.)

WEB524 – ASSIGNMENT #6 – WINTER 2021 DUE: APRIL 21, 2021 @ 11:59 PM

Page 12 of 20

Implement “add new” track

This will work almost exactly like it did in the previous assignment. A user can add a track for a specific and known

album. Add a hyperlink on the album details view to “Add a new track to this album”. Locate the “add new” track

actions/methods in the AlbumsController. To this base, you will add the ability to upload a sample clip of the track,

again, follow the guidance in the lecture notes and in the PhotoProperty code example.

Your track “create” view may look like the following:

WEB524 – ASSIGNMENT #6 – WINTER 2021 DUE: APRIL 21, 2021 @ 11:59 PM

Page 13 of 20

After completing the form, it will look like the following:

Finally, after a successful save, it will look like the following. Notice the enabled state of the audio player with controls

that can be used.

WEB524 – ASSIGNMENT #6 – WINTER 2021 DUE: APRIL 21, 2021 @ 11:59 PM

Page 14 of 20

Implement track “Edit existing” and “Delete item”

A user can edit or update clips for an existing track so implement the “Edit existing” and “Delete item” use cases for the

Track entity. You do not need to implement these use cases for the Artist and Album entities.

All tracks created using the initial data should have updatable clips.

You will need track clips. Your professor has provided you with three clips along with the assignment specifications on

blackboard. Each are about 15 seconds in length. Please do not use full-length tracks as clips. They are too big and will

likely cause issues when you are submitting your work on Blackboard.

Media type – add a media collection to the Artist entity

As noted above, this is the more complex scenario. A new ArtistMediaItem entity will be created, and the existing Artist

entity will be modified to handle a collection of ArtistMediaItem objects.

In this scenario, the design and coding approach will be like the one in the recent PhotoEntity code example. The one

difference is that we will permit any kind of media item to be associated with an Artist object. In other words, a photo,

some audio, or video, or even a digital document like a PDF or Word-or-Excel document.

What is different here?

In the view code, we will make decisions about how to render a media item:

? If it is an image, then render an HTML <img> element.

? If it is audio, then render an HTML <audio> element.

? If it is a video, then render an HTML <video> element.

? If it is a PDF, Word, or Excel file, then render an HTML <a> element, which uses the download-and-save

workflow.

WEB524 – ASSIGNMENT #6 – WINTER 2021 DUE: APRIL 21, 2021 @ 11:59 PM

Page 15 of 20

Implementing Artist object – ArtistMediaItem collection

Add an ArtistMediaItem design model class, probably with the same properties and constructor design that are in the

PhotoEntity code example’s dedicated media item class. It will be associated with an Artist which has a one-to-many

association with ArtistMediaItem.

Remember to add the DbSet<TEntity> property in the data context class. Build and run in a browser. It will show an

error, because the “model backing the “ApplicationDbContext” context has changed since the database was created.”

Add another migration and update the database, before continuing.

View model classes – ArtistMediaItem

A “…Base” class, with identifying and descriptive properties, is needed. Hint: Include the ContentType property as it will

be useful later.

A “…Content” class, for the digital content of the media item, is needed.

Next, we need to write the view model classes that handle the “add media item for a known/existing artist” workflow.

An “…AddForm” class is needed. As you have learned it MUST have an artist identifier, and it SHOULD have some

descriptive information about the artist, to display on the HTML Form.

An “…Add” class is needed. It MUST have the artist identifier, and the properties that capture information and data for

the media item.

Remember to add AutoMapper mappings to cover the use cases.

WEB524 – ASSIGNMENT #6 – WINTER 2021 DUE: APRIL 21, 2021 @ 11:59 PM

Page 16 of 20

Manager class method for “add media item for artist”

The design and coding approach will be like the one-to-many scenario where you are adding a new object for a

known/existing object. This approach has been implemented many times before:

? Add a new Product for an existing Supplier

? Add a new Vehicle for an existing Manufacturer

? Add a new Album for an existing Artist

? Add a new Track for an existing Album

Here, you are adding a new ArtistMediaItem for an existing Artist so follow this well-known coding pattern. Add in the

media-handling code, to extract and save the media item data from the HttpPostedFileBase object.

Artists controller “add new” media item handling

As you have already learned, when you are adding an item to a dependent collection, you start with the dependent

object. In other words, we work with the Artists controller and code the “add new” media item there. You have already

done that with the “add new” album use case, so do the same for “add new” media item. The Coordinator role claim

will be needed to complete this task.

Create the GET method and remember to use attribute routing. When you generate the view:

1. Change the BeginForm() constructor to specify the correct enctype.

2. Add the hidden ArtistId information.

At this point, your view may look something like the following:

Add the dedicated media item delivery controller and Manager method

Next, add the dedicated media item delivery controller. From the PhotoEntity code example, you should grab and

include the download-and-save functionality. Add a Manager class method that will deliver a media item object.

WEB524 – ASSIGNMENT #6 – WINTER 2021 DUE: APRIL 21, 2021 @ 11:59 PM

Page 17 of 20

Prepare to display the media items

Let’s modify the existing artist details view, and all its bits and pieces. We will create a new view model class,

ArtistWithMediaInfo (in a style to the PhotoEntity code example). Remember to add an AutoMapper map.

In the Manager class, create another “get one” method that will fetch/include the media items and return an object of

the new type. In the ArtistsController, call that new Manager method. You will have to change the model type in the

view too. At this point in time, build and run in a browser. The app should continue to work.

Displaying or rendering media items

There are many ways to display or render media items. Images and sounds can use the built-in HTML elements.

For other content – digital documents for example – the content can be rendered as a hyperlink that references the

media item. For best results, use the save-to-download feature for their URLs. If you want to render a text-based

hyperlink, do it. Alternatively, you can include icons in your app and render those as the hyperlink. For example, use

something like these:

WEB524 – ASSIGNMENT #6 – WINTER 2021 DUE: APRIL 21, 2021 @ 11:59 PM

Page 18 of 20

In the teacher’s sample solution, the media items were rendered in groups. For example, all the photos were rendered

first, then the sounds, then the digital documents.

Each group was rendered with “foreach” code but using only the desired media type. For example:

<dt>

Photos

</dt>

<dd>

@foreach (var item in Model.ArtistMediaItems.Where(m=>m.ContentType.Contains(“image/”)))

{

<div>

<span>@item.Caption</span><br/>

<img src=”~/media/@item.StringId” alt=”@item.Caption” title=”@item.Caption” width=”200”/>

</div>

}

<hr/>

</dd>