Previously we created dropdowns for Country and State. The dropdowns are generic and can be used in listing and edit pages. On the backend these dropdowns call search APIs, take search text as input and search the database in name or label fields. Now we need the dropdowns for all the 6 label definitions. Take a look at the screenshot below to get an idea where the label dropdowns will be used....
In this article we will create a new layout for the Settings menu. The Main Layout So far we have main layout defined in Layout.tsx. All pages use this layout file. The main layout has the following items. Header – which contains top menu Outlet – which contains the React component that uses this layout Footer – can contain footer menu, copyright and any other items. Lets take example of the Country page....
After creating the layout for Settings, now we can create the pages for managing labels. We have six types of labels, so we will create CRUD pages for all the label types. All labels are same, having Id and label fields. In this article, we will create the CRUD pages for phone label. You may create pages for other labels following the same pattern. Search Phone Label Lets start with the search page....
Now we will work on the last few pages, related to the Contact. Contact Search Page The contact search page is very similar to the other search pages. It has searchParams state variable, which is initialized from the url search params, just like we created the phone label search page in the previous article. We have useEffect hook that is fired when the searchParams is updated. The useEffect hook gets the paged response of Contacts from the web API, by calling the API helper methods and passing them the parameters of type ContactReqSearch....
We have created a fully functional Address Book app, which consists of web API built with ASP.NET Core 7 and the frontend app built with React. Now we will create docker containers for both API and frontend and run it on local Docker instance. We will also upload these Docker containers to Docker Hub and then deploy our app on live website from Docker Hub. Add Docker Support from Visual Studio 2022 Open the AddressBook project in Visual Studio, we are using the latest community edition 2023, which is free for personal use....