In the previous section, we created and implemented the BookLibraryAdd Razor template that will be used to allow the user to add new book entries to the BookLibrary application. Our next step is to begin creating the Razor template that will allow the user to edit an existing book and save this back 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
BookLibraryEdit. - 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 BookLibraryEdit Razor template, by performing the following steps:
Ensure that the BookLibraryEdit.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>Edit 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"/>
@if (Model.Id > 0) {
<input type="submit" name="Button" value="Delete"/>
}
</td>
</tr>
</form>
</table>
</body>
</html>
In the preceding code snippet, we define the HTML layout information that will be used by our BookLibraryEdit Razor template. We firstly specify that we are using the BookLibrary.iOS namespace, so that we can have access to our database model as specified by the @model directive, which and we have said 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. You will notice that this implementation is quite similar to that of our BookLibraryAdd. The only thing that this Razor template does differently, is if we have a value for our book id, we display the Delete button so that the user can choose to delete the book entry.