This post will be expanding on the introduction to Electron.NET that I did here to add in a Web API hit to pull some data as well as the UI on the Electron side to use this data. The code before any changes can be found here.
API Creation
To create the API I used the following from the command prompt in the folder where I wanted the new project to be created.
dotnet new webapi
API Data
Now that the API project is created we need to add in the ability to interact with a database with Entity Framework Core. Adding in Entity Framework Core ended up turning into a post of its own when you can read here.
The model and DB Context of the API project match what was in the blog post I linked above, but I am going to include them here. The following is the model.
public class Contact
{
public int Id { get; set; }
public string Name { get; set; }
public string Address { get; set; }
public string City { get; set; }
public string Subregion { get; set; }
public string PostalCode { get; set; }
public string Phone { get; set; }
public string Email { get; set; }
}
Next, is the DB Context, which is empty other than the DB Set for the contacts table.
public class ContactsDbContext : DbContext
{
public DbSet<Contact> Contacts { get; set; }
public ContactsDbContext(DbContextOptions<ContactsDbContext> options)
: base(options)
{
}
}
With our model and context setup, we can run the following two commands to add the initial migration and apply the migration to the database.
dotnet ef migrations add Contacts
dotnet ef database update
API Endpoints
The API is just going to handle the basic CRUD (create, read, update, delete) operations for contact. Instead of hand coding the controller we are going to use some code generation provided by Microsoft. First, we need to add the Microsoft.VisualStudio.Web.CodeGeneration.Design NuGet package to the API project using the following command in a command prompt set to the root of the API project.
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
Now with the above package installed, we can use the following command to generate a controller with the CRUD operations already implemented.
dotnet aspnet-codegenerator controller -name ContactsController --model Contact --dataContext ContactsDbContext -outDir Controllers -api
There is a lot of switches when using aspnet-codegenerator. The following is a rundown of the ones used above.
- controller tells the code generator we are creating a controller
- name defines the name of the resulting controller
- model is the model class that will be used for the generation
- dataContext is the DB Context that will be used for the generation
- outDir is the directory the output will be in relative to the current directory of your command prompt
- api tells the code generator this controller is for a REST style API and that no views should be generated
With the code generation complete the API should be good to go.
Electron Model
Over in the Electron project, we need a model to match the data the API is returning. This could be the point where a third project is added to allow the API and the Electron app to share common items, but just to keep the example simple I’m just going add a copy of the contact model from the API project to the Electron project. The following is the full contact model class.
public class Contact
{
public int Id { get; set; }
public string Name { get; set; }
public string Address { get; set; }
public string City { get; set; }
public string Subregion { get; set; }
public string PostalCode { get; set; }
public string Phone { get; set; }
public string Email { get; set; }
}
Electron Views
Now that we have a model in our Electron project we need to create the views that go along with it. Start by adding the code generation package like we did above using the following command.
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
Unfortunately, controller generation needs a DBContext to work which our project doesn’t have, so we have to take the long way about to generate our views and then manually create a controller to go with them. In order to get view generation to work, I had to add references to the Entity Framework Core Tools package using the following command.
dotnet add package Microsoft.EntityFrameworkCore.Tools
In the csproj file add the following .NET CLI tool reference.
<DotNetCliToolReference Include="Microsoft.EntityFrameworkCore.Tools.DotNet" Version="2.0.2" />
Now the project is ready to use the command prompt to generate the views we will need for our CRUD operations related to our contacts. Use the following commands to create the full range of views needed (Create, Edit, List, Delete, Details).
dotnet aspnet-codegenerator view Create Create --model Contact --useDefaultLayout -outDir Views/Contacts
dotnet aspnet-codegenerator view Edit Edit --model Contact --useDefaultLayout -outDir Views/Contacts
dotnet aspnet-codegenerator view Index List --model Contact --useDefaultLayout -outDir Views/Contacts
dotnet aspnet-codegenerator view Delete Delete --model Contact --useDefaultLayout -outDir Views/Contacts
dotnet aspnet-codegenerator view Details Details --model Contact --useDefaultLayout -outDir Views/Contacts
Again there is a lot of switches when using aspnet-codegenerator. The following is a rundown of the ones used above.
- view tells the code generator we are creating a view
- the next two items are the name of the view and the name of the view template
- model is the model class that will be used for the generation
- useDefaultLayout uses the default layout (surprise!)
- outDir is the directory the output will be in relative to the current directory of your command prompt
The Index.cshtml generated above comes with links for Edit, Details, and Delete that won’t work as generated. Open the file and make the following changes to pass the key of the contact trying to be opened.
Before:
@Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
@Html.ActionLink("Details", "Details", new {/* id=item.PrimaryKey */ }) |
@Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
After:
@Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
@Html.ActionLink("Details", "Details", new { id=item.Id }) |
@Html.ActionLink("Delete", "Delete", new { id=item.Id })
Electron Controller
With the views complete let’s add a ContactsController.cs to the Controllers directory. The code for the controller follows, but I’m not going to go into the details. I took a controller from another contact base project and just replaces all the Entity Framework stuff with calls to the API we created above. Please don’t use this as an example of how something like this should be done it is just quick and dirty to show that it can work.
public class ContactsController : Controller
{
private string _apiBaseUrl = "http://localhost:5000/api/contacts/";
// GET: Contacts
public async Task<IActionResult> Index()
{
using (var client = new HttpClient { BaseAddress = new Uri(_apiBaseUrl) })
{
return View(JsonConvert.DeserializeObject<List<Contact>>(await (await client.GetAsync("")).Content.ReadAsStringAsync()));
}
}
// GET: Contacts/Details/5
public async Task<IActionResult> Details(int? id)
{
if (id == null)
{
return NotFound();
}
using (var client = new HttpClient { BaseAddress = new Uri(_apiBaseUrl) })
{
var contact = JsonConvert.DeserializeObject<Contact>(await (await client.GetAsync(id.ToString())).Content.ReadAsStringAsync());
if (contact == null)
{
return NotFound();
}
return View(contact);
}
}
// GET: Contacts/Create
public IActionResult Create()
{
return View();
}
// POST: Contacts/Create
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("Id,Address,City,Email,Name,Phone,PostalCode,State")] Contact contact)
{
if (ModelState.IsValid)
{
using (var client = new HttpClient { BaseAddress = new Uri(_apiBaseUrl) })
{
await client.PostAsync("", new StringContent(JsonConvert.SerializeObject(contact), Encoding.UTF8, "application/json"));
}
return RedirectToAction("Index");
}
return View(contact);
}
// GET: Contacts/Edit/5
public async Task<IActionResult> Edit(int? id)
{
if (id == null)
{
return NotFound();
}
using (var client = new HttpClient { BaseAddress = new Uri(_apiBaseUrl) })
{
var contact = JsonConvert.DeserializeObject<Contact>(await (await client.GetAsync(id.ToString())).Content.ReadAsStringAsync());
if (contact == null)
{
return NotFound();
}
return View(contact);
}
}
// POST: Contacts/Edit/5
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Edit(int id, [Bind("Id,Address,City,Email,Name,Phone,PostalCode,State")] Contact contact)
{
if (id != contact.Id)
{
return NotFound();
}
if (ModelState.IsValid)
{
using (var client = new HttpClient { BaseAddress = new Uri(_apiBaseUrl) })
{
await client.PutAsync(id.ToString(), new StringContent(JsonConvert.SerializeObject(contact), Encoding.UTF8, "application/json"));
}
return RedirectToAction("Index");
}
return View(contact);
}
// GET: Contacts/Delete/5
public async Task<IActionResult> Delete(int? id)
{
if (id == null)
{
return NotFound();
}
using (var client = new HttpClient { BaseAddress = new Uri(_apiBaseUrl) })
{
var contact = JsonConvert.DeserializeObject<Contact>(await (await client.GetAsync(id.ToString())).Content.ReadAsStringAsync());
if (contact == null)
{
return NotFound();
}
return View(contact);
}
}
// POST: Contacts/Delete/5
[HttpPost, ActionName("Delete")]
[ValidateAntiForgeryToken]
public async Task<IActionResult> DeleteConfirmed(int id)
{
using (var client = new HttpClient { BaseAddress = new Uri(_apiBaseUrl) })
{
await client.DeleteAsync(id.ToString());
return RedirectToAction("Index");
}
}
private async Task<bool> ContactExists(int id)
{
using (var client = new HttpClient { BaseAddress = new Uri(_apiBaseUrl) })
{
return JsonConvert.DeserializeObject<Contact>(await (await client.GetAsync("id")).Content.ReadAsStringAsync()) != null;
}
}
}
Electron Add Link To Navigation
The final step to add a link to the list of contacts to the navigation bar of the application. Open the _Layout.cshtml and in the unordered list for the nav bar add the following line.
<li><a asp-area="" asp-controller="Contacts" asp-action="Index">Contacts</a></li>
Wrapping Up
That is all the changes to get the application up and running. If you run the API and then use dotnet electronize start from a command prompt in the ElectronTest project root all should be good to go.
The completed code can be found here.
