One of the best things about the ASP.NET stack is the ease of scaffolding new web applications. Productivity is king in the ASP.NET world, and HTML markup is no exception in Visual Studio. By using the tools available to me (Bootstrap, jQuery, Visual Studio w/Intellisense), I was able to mimic the JavaFX forms from the Software I project quickly and easily. However, ASP.NET is a full stack framework and there’s going to be more work involved in sending data to the Razor views to show data on the page. I’ll cover that more in future posts, but first let me show you the markup and explain my rationale.

Main Menu - Splitting up parts and products⌗

In the Software I GUI mock-ups, there are two tables of parts and products on the same screen. I could potentially create a similar page with parts and products on the same page together, but in order to better lay out the data I felt that it was best to split up the tables of parts and products. So here’s what my home page looks like:

Honestly, it’s not much to look at, but breaking it into its component parts works better in web app form. Here’s the Parts home page:

And here’s the products home page.

All the data in these views is hard-coded, but in future posts I’ll build out the logic to pass data from controller to view. The views contain edit and delete buttons that will be functionally implemented alongside the controller logic for passing data. Both parts and products also have edit and create views that implement the same form for each product:

Finally, we put some delete logic in the controllers and views to put a message on the landing page if a value is set to true in our controller.

I’ll go into more detail about Razor view syntax and controller actions when I do the section on controllers, but for now this should suffice. If you’d like to dig into the logic and code in the views and controllers ahead of time you can find the repository for this project here.