In the previous section, we created and implemented the BookLibraryListing Razor template that will be used to display a list of all books that have been previously added to the BookLibrary application. Our next step is to begin creating the Razor template that will allow the user to create a new book and save this to our database model.
Let's begin by performing the following steps:
- Create an empty class within the
Viewsfolder, by choosing Add | NewFile..., as you did when creating theBookLibraryListingin the previous section entitled Creating and implementing the book listing main page, located within this chapter. - Next, choose the Preprocessed Razor Template option, located within the Text Templating section, and enter in
BookLibraryAdd. - Next, click on the New button to allow the wizard to proceed and create the new empty Razor template file.
Our next step is to start to implement the code required for our BookLibraryAdd Razor template, by performing the following steps:
Ensure that the BookLibraryAdd.cshtml file is displayed within the code editor, and enter in the following code snippet:
@using BookLibrary
@model BookItem
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Add New Book Details</h1>
<table border="1" cellpadding="8">
<form action="hybrid:SaveBookDetails" method="GET">
<input name="id" type="hidden" value="@Model.Id" />
<tr>
<td>Title:
<input name="Title" value="@Model.Title" /></td>
<tr>
<td>Author:
<input name="Author" value="@Model.Author" /></td>
<tr>
<td>Book ISBN:
<input name="ISBN" value="@Model.Isbn" /></td>
<tr>
<td>Synopsis:
<textarea name="Synopsis" rows="5" cols="40">
@Model.Synopsis
</textarea>
</td>
<tr>
<td colspan="8">
<input type="submit" name="Button" value="Save"/>
<input type="submit" name="Button" value="Cancel"/>
</td>
</tr>
</form>
</table>
</body>
</html>
In the preceding code snippet, we defined the HTML layout information that will be used by our BookLibraryAdd Razor template. We firstly specified that we are using the BookLibrary.iOS namespace, so that we can have access to our database model as specified by the @model directive. We've already explained that this must be the very first line preceding the <html> tag within a Razor template file.
Next, we set up a <form action tag so that when the form gets submitted, the Save or Cancel buttons are pressed, our WebViewController.cs class will be called, and the appropriate action will take place. We specify the hybrid tag here again to identify if the URL is not our own custom scheme, and will just let the WebView load the URL as usual.