This assignment explores using ReactJS to implement the Item Recall Search and Customer Details sections from Assignment 1 (Tasks 1 and 2). The assignment is broken into two equally weighted parts as outlined below. This document specifies the minimum requirements to get a passing grade – the more effort you put in the better the outcome!
Each person is to complete the Assignment 2 by creating a new ReactJS application that makes use of the Wab APIs in the Assignment 2 ASP.NET Core Web application. There are several tasks to complete as outlined below
- Part A: An item recall component using ReactJS which includes a search feature
- Part B: An customer detail component using ReactJS that implements Navigation between the two components using the react router.
1. Download the Assignment Web Application
A webAPI application has been pre-built complete with the AmazonOrders model. You will need to update the connection string in the web application to use your local copy of the AmazonOrders database. This is the same as used in the practicals.
2. Create a new ReactJS Application
Using VS-Code OR Visual Studio 2019 You will need to create a new ReactJS application independent of the above WebAPI. Your ReactJS application will need to be constructed as a Single Page Application (SPA) making use of at least two components and the ReactJS router. Your new ReactJS application will need to consume and show the JSON data provided from the WebAPI as outlined in the below tasks
Part A: Item Recall page [50%]
This React component(s) make a page that allows the sales team to search for items that may need to be recalled. The page provides an auto-complete search text-box that shows a list of matching item names as the user enters search terms. If a partial match is entered, then all item names containing that partial match are returned in a table (see example below). This page must:
- Provide the ability to limit the results by customer order year
- The page must initially load with no data and only show matching records once a search has been performed
- The search must include text of at least 2 characters otherwise it should be blocked by model validation.
- The page must make use of the WebAPI functions:
- RecallSearch([Required] stringsearchText, int? year)
- Hovering over a row in the table highlights the row
Example Recall Search Page/Component(s)
The page initially loads with no data
Example Recall Search Page/Component(s) with auto-complete list
Example Recall Search Page/Component(s) with matching data returned for all years/customer order dates
Example Recall Search Page/Component(s) with matching data returned for 2020 only and a row being selected
本网站支持淘宝 支付宝 微信支付 paypal等等交易。如果不放心可以用淘宝交易！
E-mail: firstname.lastname@example.org 微信:itcsdx