Question is creating a web application using asp.net,c# and html Introduction This introduction describes the design of the SportsPro application and the TechSupport database The design of the SportsPro applicAation Each part of the project has you add one or more new pages to the SportsPro application. Sample designs are provided for guidance only and your solution does not have to look just like it but provide the same info. All solutions should not be identical! For this project, already created is a page named CustomerDisplay.aspx that displays information for a selected customer. It makes use of an SQL data source (the DB is provided in the other files folder). The design of the Customer Display page Operation When the page is first displayed, the information for the first customer in the drop-down list is displayed on the page. After that, the information for the customer that the user selects from the drop-down list is displayed. Also created is a page named ContactDisplay.aspx that displays a list of customers to be contacted. Customers are added to this page from the Customer Display page Operation of the Customer Display page When the user clicks the Add to Contact List button on the Customer Display page, the selected customer is added to a sorted list of contacts and the Contact Display page is displayed with the contacts listed in a list box. If the customer is already in the list, an error message is displayed in a label below the Add to Contact List button. When the user clicks the Display Contact List button, the Contact Display page is displayed. The design of the TechSupport database The TechSupport database is used to track technical support incidents for a small software company named SportsPro. It consists of the six tables shown in the diagram that follows. The main table is the Incidents table, which contains one row for each technical support incident. Each row in the Incidents table is related to one row in the Customers table, which contains information about the companys customers; one row in the Products table, which contains information about the companys products; and one row in the Technicians table, which contains information about the companys technical support staff members. In addition, a table called Registrations keeps track of the products that are registered to each customer, and the States table contains state and zip code information. In addition to the column properties shown above, you should know that the CustomerID, IncidentID, and TechID columns in the Customers, Incidents, and Technicians tables are identity columns. So the values of these columns are set automatically when new rows are added to these tables. Project Part-A: Survey customers Create a page named CustomerSurvey.aspx that surveys customers regarding recent incidents and a page named SurveyComplete.aspx that displays a message when the survey is submitted. These pages should use a variety of standard and validation controls. Operation When the Customer Survey page is first displayed, all of the controls except for the Customer ID text box and the Get Incidents button are disabled. When the user enters a customer ID and clicks the Get Incidents button, any closed incidents for that customer are displayed in the list box and all of the controls on the page are enabled. If there arent any closed incidents, the controls are not enabled and an appropriate message is displayed below the customer ID. To complete the survey, the user selects an incident, makes the appropriate selections and entries, and then clicks the Submit button. Then, the Survey Complete page is displayed with a message that depends on whether or not the user has asked to be contacted. The user can close this page or complete another survey by clicking the Return to Survey button. Created for you are a class named Incident that consists of one public property for each column in the Incidents table and a method named CustomerIncidentDisplay that formats an incident for display on the Customer Survey page (see other files folder). Also created for you is a class named Survey that consists of the following properties that represent the data for a survey: public int CustomerID { get; set; } public int IncidentID { get; set; } public int ResponseTime { get; set; } public int TechEfficiency { get; set; } public int Resolution { get; set; } public string Comments { get; set; } public bool Contact { get; set; } public string ContactBy { get; set; } Specifications Use radio button lists to implement the ratings for the three categories in the survey. The Text properties for the list items in these lists should be set as shown in Figure 1, and the Value properties should be set to 1, 2, 3, and 4. Use a radio button group for the contact me radio buttons in Figure 1. Note that the RadioButton, RadioButtonList, and CheckBox controls render label elements to the browser, and Bootstrap styles these label elements in ways that you may not like. To fix this, you can add your own CSS class to style these labels, and then assign the server controls, or the div elements that contain them, to the class. Heres an example of such a CSS class: .options label { font-weight: normal; font-size: 90%; padding-left: 5px; padding-right: 10px; } Customer ID text box: require and must be integer, validate only when the user clicks the Get Incidents button. Incidents list box: require and validated only when the user clicks the Submit button. When the Customer Survey page is first displayed, set the focus to the customer ID text box. Then, if the user clicks the Get Incidents button and there are incidents for the specified customer, move the focus to the Incidents list box. To get the data thats displayed in the Incidents list box, use a SQL data source that retrieves all the rows and all the columns except the Description column from the Incidents table, sorted by the DateClosed column. Then, use a data view to filter the rows so only the closed incidents for the specified customer are displayed. To do that, youll need to set the RowFilter property of the data view to a compound condition where the CustomerID column is equal to the customer ID the user enters and the DateClosed column is not null. When populating the Incidents list box, create list items whose Text property is set to the value of the CustomerIncidentDisplay method of the incident and whose Value property is set to the incident ID. In addition, the Text property of the first item in the list box should be set as shown on the Customer Survey page, and the Value property of this item should be set to None. When the survey is submitted, the application should create a Survey object and set its properties appropriately. Then, it should save a Boolean value in session state that indicates if the user requested to be contacted. The Survey Complete page can then use that value to determine the message thats displayed on the page. (Although a complete application would also perform some processing on the Survey object, this project doesnt include that processing.) Project Part-B: Create a master page and content pages Create a master page for the SportsPro application. In addition, create a new content page that displays contact information, and convert the other pages to content pages. (Required reading: chapter 9) Sample design of the master page and the Contact Us page Operation When the user clicks one of the navigation links, the appropriate page is displayed. When the user clicks the E-mail link under How to contact us or at the bottom of the page, the users email client starts a new email for the specified address. Specifications The master page consists of the jumbotron and the three links at the top of the page and the contact information at the bottom of the page. After you create the master page, you can create the Contact Us page as a content page that will be displayed within the master page. Then convert the other pages. Dont forget to set the titles for the pages. To create the two email links, you can use a hyperlink with its NavigateUrl property set to mailto:sportspro@sportsprosoftware.com. Project Part-C: Display customer incidents For this project, youll complete the CustomerIncidentDisplay.aspx page so it displays the incidents for a selected customer in a data list. This page will require two SQL data sources Operation When the user selects a customer from the drop-down list, all the incidents for that customer are displayed in a data list. Specifications The Customers drop-down list should be bound to a SQL data source that retrieves the CustomerID and Name columns from the Customers table and sorts the rows by the Name column. The SQL data source for the data list should join data from three tables (Incidents, Technicians, and Products) and include only the incidents for the selected customer. Format the data list any way you like but include the info in the figure above. Project Part-D: Add user authentication Work with the default authentication functionality of the Web Forms template. Add some users and roles to the application. (Required reading: chapter 20) Specifications Add a LoginView control to the Default page so that users are required to login to access the accplication. Provide roles for Administrators and customers: 1. Administrators can access all pages 2. Customers can not access the Display Customers page Bonus: provide forgot password functionality. **ITS URGENT**