Introduction
In this article, we will discuss the procedure to build a simple application in ASP.NET Core which communicates with MongoDB database.
Description
This application performs the CRUD operation on a Mongo database and then displays the details in a table.
Third-party Tools Used
Robo 3T – is a third-party tool which provides a lightweight MongoDB management tool.
Implementation - Setting up MongoDB
If you have not installed the MongoDB exe, then download and install the same from MongoDB Download Center.
After installation of the database, in order to access the MongoDB, we have to start the MongoDB Process.
To start MongoDB, run mongod.exe in command prompt. Make sure that you are running the command prompt from installation folder of MongoDB.
By default, the installation path is set as C:\Program Files\MongoDB\Server\3.6\bin\
Additionally, we need a data directory to store all the data in MongoDB. User can set the path for data files using the –dbpath option to mongod.exe
You can begin using the Robo 3T after starting the MongoDB process.
For this demo, I have created a collection namely Customers with 3 columns.
Since the database is ready, now, we will start building the application. Follow along the article to create a sample application.
Below is a sample demonstration of the application we are going to make.
Create a new project in Visual Studio.
Select the template as ASP.NET Core MVC Web Application.
To interact with MongoDB from C# code, we need to install .NET MongoDB Driver which provides asynchronous interaction with MongoDB. I utilized the below NuGet commands to add the driver to my project.
- Install-Package Microsoft.EntityFrameworkCore.Tools -Version 2.0.1
- Install-Package MongoDB.Driver -Version 2.5.0
Model Class Let us make an entity class called “Customer” which fits the schema of the Customers table in the database.
- public class Customer
- {
- [BsonId]
- public ObjectId Id { get; set; }
- [BsonElement]
- public int CustomerId { get; set; }
- [BsonElement]
- public string CustomerName { get; set; }
- [BsonElement]
- public string Address { get; set; }
- }
The class contains Id property of the type ObjectId. This property is used to match an item in MongoDB collections. We as well have another attribute, namely BsonElement which is applied to represent an “element” in the MongoDB collection.
Controller Methods
In Controller, we will add code for reading, editing, creating and deleting records from MongoDB. I have moved the code to retrieve the MongoDB database details to a common method.
Code for MVC Views
Since this was a more of a MongoDB demo, I have used the scaffolding option available with MVC to generate View. You can modify this as per your needs.
InDeX vIEW
- @model IEnumerable<AspNetCoreMVCMongoDBDemo.Models.Customer>
- @{
- ViewData["Title"] = "Index";
- }
- <h2>Index</h2>
- <p>
- <a asp-action="Create">Create New</a>
- </p>
- <table class="table table-bordered" style="width:600px">
- <thead>
- <tr>
- <th>
- @Html.DisplayNameFor(model => model.CustomerId)
- </th>
- <th>
- @Html.DisplayNameFor(model => model.CustomerName)
- </th>
- <th>
- @Html.DisplayNameFor(model => model.Address)
- </th>
- <th>Actions</th>
- </tr>
- </thead>
- <tbody>
- @foreach (var item in Model)
- {
- <tr>
- <td>
- @Html.DisplayFor(modelItem => item.CustomerId)
- </td>
- <td>
- @Html.DisplayFor(modelItem => item.CustomerName)
- </td>
- <td>
- @Html.DisplayFor(modelItem => item.Address)
- </td>
- <td>
- @Html.ActionLink("Edit", "Edit", new { id = item.CustomerId }) |
- @Html.ActionLink("Details", "Details", new { id = item.CustomerId }) |
- @Html.ActionLink("Delete", "Delete", new { id = item.CustomerId })
- </td>
- </tr>
- }
- </tbody>
- </table>
CREATE VIEW
- @model AspNetCoreMVCMongoDBDemo.Models.Customer
- @{
- ViewData["Title"] = "Create";
- }
- <h2>Create Customer Details</h2>
- <hr />
- <div class="row">
- <div class="col-md-4">
- <form asp-action="Create">
- <div asp-validation-summary="ModelOnly" class="text-danger"></div>
- <div class="form-group">
- <label asp-for="CustomerId" class="control-label"></label>
- <input asp-for="CustomerId" class="form-control" />
- <span asp-validation-for="CustomerId" class="text-danger"></span>
- </div>
- <div class="form-group">
- <label asp-for="CustomerName" class="control-label"></label>
- <input asp-for="CustomerName" class="form-control" />
- <span asp-validation-for="CustomerName" class="text-danger"></span>
- </div>
- <div class="form-group">
- <label asp-for="Address" class="control-label"></label>
- <input asp-for="Address" class="form-control" />
- <span asp-validation-for="Address" class="text-danger"></span>
- </div>
- <div class="form-group">
- <input type="submit" value="Create" class="btn btn-default" />
- </div>
- </form>
- </div>
- </div>
- <div>
- <a asp-action="Index">Back to List</a>
- </div>
- @section Scripts {
- @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
- }
DELETE VIEW
- @model AspNetCoreMVCMongoDBDemo.Models.Customer
- @{
- Layout = "_Layout";
- }
- <h4>Delete Customer</h4>
- <div class="row">
- <div class="col-md-4">
- <form asp-action="Delete">
- <label class="control-label">Are you sure to delete </label> <input asp-for="CustomerId" class="form-control" readonly />
- <div class="form-group">
- <input type="submit" value="Delete" class="btn btn-default" />
- </div>
- </form>
- </div>
- </div>
- <div>
- <a asp-action="Index">Back to List</a>
- </div>
DETAILS VIEW
- @model AspNetCoreMVCMongoDBDemo.Models.Customer
- @{
- ViewData["Title"] = "Details";
- }
- <div>
- <h4>Customer Details</h4>
- <hr />
- <dl class="dl-horizontal">
- <dt>
- @Html.DisplayNameFor(model => model.CustomerId)
- </dt>
- <dd>
- @Html.DisplayFor(model => model.CustomerId)
- </dd>
- <dt>
- @Html.DisplayNameFor(model => model.CustomerName)
- </dt>
- <dd>
- @Html.DisplayFor(model => model.CustomerName)
- </dd>
- <dt>
- @Html.DisplayNameFor(model => model.Address)
- </dt>
- <dd>
- @Html.DisplayFor(model => model.Address)
- </dd>
- </dl>
- </div>
- <div>
-
- <a asp-action="Index">Back to List</a>
- </div>
EDIT VIEW
- @model AspNetCoreMVCMongoDBDemo.Models.Customer
- @{
- Layout = "_Layout";
- }
- @{
- ViewData["Title"] = "Details";
- }
- <h2>Edit Customer Details</h2>
- <hr />
- <div class="row">
- <div class="col-md-4">
- <form asp-action="Edit">
- <div asp-validation-summary="ModelOnly" class="text-danger"></div>
- <div class="form-group">
- <label asp-for="CustomerId" class="control-label"></label>
- <input asp-for="CustomerId" class="form-control" />
- </div>
- <div class="form-group">
- <label asp-for="CustomerName" class="control-label"></label>
- <input asp-for="CustomerName" class="form-control" />
- <span asp-validation-for="CustomerName" class="text-danger"></span>
- </div>
- <div class="form-group">
- <label asp-for="Address" class="control-label"></label>
- <input asp-for="Address" class="form-control" />
- <span asp-validation-for="Address" class="text-danger"></span>
- </div>
- <div class="form-group">
- <input type="submit" value="Save" class="btn btn-default" />
- </div>
- </form>
- </div>
- </div>
- <div>
- <a asp-action="Index">Back to List</a>
- </div>