In the previous section, we created and implemented the BookLibraryListing Razor template page that will be used to display a list of all book items that have been previously added to the BookItem database table. Our next step is to begin creating the BookLibraryAddEdit Razor template page—which will be used to allow the user to create a new book item or edit an existing book item—and save this to our BookItem database table.
Let's start by creating the user interface for our BookLibraryAddEdit by going through the following steps:
- Right-click on the Views folder and choose Add | New File... from the pop-up menu, as you did when creating the BookLibraryListing, in the Creating and implementing the BookLibraryListing page section in this chapter.
- Next, choose the Preprocessed Razor Template option under the Text Templating section and enter BookLibraryAddEdit as the name of the Razor template to be created.
- Finally, click on the New button to allow the wizard to proceed and create the new file. Now that we have created our BookLibraryAddEdit Razor template, we can proceed with defining the user interface and implementing the underlying code for our class.
- Locate and open the BookLibraryAddEdit.cshtml file, which is located in the Views folder, and ensure that it is displayed within the code editor. Enter the following code snippet:
@using BookLibrary.Models
@model BookItem
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
@if (Model.Id > 0)
{
<h1>Editing Book Details</h1>
}
else
{
<h1>Adding Book Details</h1>
}
<table>
<form action="hybrid:SaveBookDetails" method="GET">
<input name="Id" type="hidden" value="@Model.Id" />
<tr>
<td>
<label for="Title">Book Title:</label>
<input id="Title" name="Title" type="text"
placeholder="Book Title" value="@Model.Title" />
</td>
<tr>
<td>
<label for="ImageUrl">Book Image URL:</label>
<input id="ImageUrl" name="ImageUrl" type="text"
placeholder="Book Image URL" [email protected] />
</td>
<tr>
<td>
<label for="Author">Author Name:</label>
<input id="Author" name="Author" type="text"
placeholder="Author name" value="@Model.Author" />
</td>
<tr>
<td>
<label for="Category">Category:</label>
<input id="Category" name="Category" type="text"
placeholder="Book Category" value="@Model.Category" />
</td>
<tr>
<td>
<label for="PublishedYear">Published Year:</label>
<input id="PublishedYear" name="PublishedYear"
placeholder="Published Year" value="@Model.PublishedYear" />
</td>
<tr>
<td>
<label for="Publisher">Publisher:</label>
<input id="Publisher" name="Publisher"
placeholder="Publisher" value="@Model.Publisher" />
</td>
<tr>
<td>
<label for="Pages">No. Pages:</label>
<input id="Pages" name="NoPages" type="number"
placeholder="Total Pages" maxlength="4" value="@Model.NoPages" />
</td>
<tr>
<td>
<label for="ISBN">Book ISBN:</label>
<input id="ISBN" name="Isbn" type="text"
placeholder="Book ISBN" value="@Model.Isbn" />
</td>
<tr>
<td>
<label for="Summary">Book Summary:</label>
<textarea id="Summary" name="Summary" placeholder="Book Summary"
rows="10" cols="45">@Model.Summary</textarea>
</td>
<tr>
<td colspan="8">
<input type="submit" name="Button" value="Save" />
<input type="submit" name="Button" value="Cancel" />
@if (Model.Id > 0)
{
<input type="submit" name="Button" value="Delete" />
}
</td>
</tr>
</form>
</table>
</body>
</html>
Let's take a look at what we defined within the preceding Razor template page:
- As we did for our BookLibraryListing Razor template page, we started by defining the HTML layout information that will be used by our BookLibraryAddEdit Razor Template page, and then we imported the BookLibrary namespace so that we can have access to our BookItem data model, as specified by the @model directive. We've already explained that this must be the very first line preceding the <html> tag within each Razor template page.
- Next, we used some JavaScript code that will check whether we are creating or editing an existing book within our BookLibrary database, and then we displayed the relevant heading to the BookLibraryAddEdit Razor template page.
- Then, we set up a form action tag that will be used when the form gets submitted whenever the Save, Cancel, or Delete button is pressed, and we make a call to the WebViewController.cs class to call the appropriate action.
- Finally, we specified a hybrid:SaveBookDetails tag that will pass the form parameters to our WebViewController.cs class in order to save the book details to the BookItem database table for the associated id. You will notice that we have some JavaScript code that checks to see whether we are currently editing an existing book. Once it has done this, it will display the Delete button so that the user can choose to delete the book entry.
The Android versions for each of the Razor template pages are available in the companion source code for this book.