Create User Registration Using ASP.NET And MongoDB

In this article, we will learn how we can insert data into MongoDB using Asp.net. We will learn from the basics because I have written this series of articles focusing on beginners.This article gives some basic understanding of how we insert data into the database using Asp.net and MongoDB. In my previous article, we Learned about Insert, Delete, Update and Retrieve operations in MongoDB using c# console application.

In this article, we will learn how we can insert data into MongoDB using ASP.NET. We will learn from the basics because I have written this series of articles focusing on beginners. This article gives some basic understanding of how we can insert data into the database using ASP.NET and MongoDB. In my previous articles, we learned about Insert, Delete, Update and Retrieve operations in MongoDB using a C# console application. You can check those from here.

Prerequisites

  • Visual Studio
  • MongoDB installed
  • Robo 3T
  • Basic Knowledge of C# ASP.NET
MongoDB Environment Setup
 
You can check how to set up the MongoDB environment from here

Step 1

Open Visual Studio, create a new project by going to File > New >Project >Web>select ASP.NET Web application and rename it as User Registration.

 Create User Registration using Asp.net and MongoDB
 
Select Web Forms as a Template.
 
Create User Registration using Asp.net and MongoDB

Step 2

Now, right-click on the project name and add a new Web Form. Rename it as UserRegistration.

Create User Registration using Asp.net and MongoDB

Step 3

Now edit the source and add some Bootstrap file references to it in the Title section. Create a form and add the following lines.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UserRegistration.aspx.cs" Inherits="User_Registration.UserRegistration" %>    
  2.     
  3. <!DOCTYPE html>    
  4.     
  5. <html xmlns="http://www.w3.org/1999/xhtml">    
  6. <head runat="server">    
  7.     <title>User Registration</title>    
  8.     <meta charset="utf-8" />    
  9.     <meta name="viewport" content="width=device-width, initial-scale=1" />    
  10.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />    
  11.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    
  12.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>    
  13.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>    
  14. </head>    
  15. <body>    
  16.     <form id="form1" runat="server">    
  17.         <div class="container">    
  18.             <div class="row">    
  19.             <div class="col-md-12 col-lg-12">    
  20.             <div class="col-md-3"></div>    
  21.             <div class="col-md-6">    
  22.                  <h2 style="text-align:center;margin-top:10px;">User Registration</h2>    
  23.             <div class="form-group">    
  24.                 <label for="email">Name:</label>    
  25.                 <asp:TextBox ID="Txtname" class="form-control" placeholder="Enter Name" runat="server"></asp:TextBox>    
  26.             </div>    
  27.               <div class="form-group">    
  28.                 <label for="email">City:</label>    
  29.                 <asp:TextBox ID="Txtcity" class="form-control" placeholder="Enter City" runat="server"></asp:TextBox>    
  30.             </div>    
  31.               <div class="form-group">    
  32.                 <label for="email">Country:</label>    
  33.                 <asp:TextBox ID="Txtstate" class="form-control" placeholder="Enter State" runat="server"></asp:TextBox>    
  34.             </div>    
  35.             <div class="form-group">    
  36.                 <label for="email">Email:</label>    
  37.                 <asp:TextBox ID="Txtemail" class="form-control" placeholder="Enter email"  runat="server"></asp:TextBox>    
  38.             </div>    
  39.             <div class="form-group">    
  40.                 <label for="pwd">Password:</label>    
  41.                 <asp:TextBox ID="Txtpwd" class="form-control" TextMode="Password" placeholder="Enter password" runat="server"></asp:TextBox>    
  42.             </div>    
  43.              <div class="form-group" style="text-align:center">    
  44.                  <asp:Button ID="Btnreg" runat="server" CssClass="btn btn-success" Text="Registration" OnClick="Btnreg_Click" />    
  45.                  </div>    
  46.             
  47.             </div>    
  48.             <div class="col-md-3"></div>    
  49.     
  50.                 </div>    
  51.             </div>    
  52.             </div>    
  53.     </form>    
  54. </body>    
  55. </html>    

Step 4

Generate a Button Click event and add MongoDB from NuGet Package Manager.
 
Create User Registration using Asp.net and MongoDB 

 Add the required Namespaces.

  1. using MongoDB.Bson;  
  2. using MongoDB.Driver;  

Step 5

Now, add a Class UserReg and the following fields.
  1. public class UserReg  
  2.        {  
  3.            public string Name { getset; }  
  4.            public string City { getset; }  
  5.            public string State { getset; }  
  6.            public string Email { getset; }  
  7.            public string Password { getset; }  
  8.   
  9.        }  

Step 6

Add the following code for button click.
  1. var Connection = "mongodb://localhost";  
  2.             var client = new MongoClient(Connection);  
  3.             var Db = client.GetDatabase("Demo1");  
  4.             var Collection = Db.GetCollection<UserReg>("UserReg");  
  5.             UserReg na = new UserReg();  
  6.             na.Name = Txtname.Text.ToString();  
  7.             na.City = Txtcity.Text.ToString();  
  8.             na.State = Txtstate.Text.ToString();  
  9.             na.Email = Txtemail.Text.ToString();  
  10.             na.Password = Txtpwd.Text.ToString();  
  11.             Collection.InsertOneAsync(na);  

Complete Code

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using User_Registration.Models;  
  8. using MongoDB.Bson;  
  9. using MongoDB.Driver;  
  10.   
  11.   
  12. namespace User_Registration  
  13. {  
  14.     public partial class UserRegistration : System.Web.UI.Page  
  15.     {  
  16.         public class UserReg  
  17.         {  
  18.             public string Name { getset; }  
  19.             public string City { getset; }  
  20.             public string State { getset; }  
  21.             public string Email { getset; }  
  22.             public string Password { getset; }  
  23.   
  24.         }  
  25.   
  26.         protected void Page_Load(object sender, EventArgs e)  
  27.         {  
  28.              
  29.         }  
  30.   
  31.         protected void Btnreg_Click(object sender, EventArgs e)  
  32.         {  
  33.             var Connection = "mongodb://localhost";  
  34.             var client = new MongoClient(Connection);  
  35.             var Db = client.GetDatabase("Demo1");  
  36.             var Collection = Db.GetCollection<UserReg>("UserReg");  
  37.             UserReg na = new UserReg();  
  38.             na.Name = Txtname.Text.ToString();  
  39.             na.City = Txtcity.Text.ToString();  
  40.             na.State = Txtstate.Text.ToString();  
  41.             na.Email = Txtemail.Text.ToString();  
  42.             na.Password = Txtpwd.Text.ToString();  
  43.             Collection.InsertOneAsync(na);  
  44.         }  
  45.     }  
  46. }  

First, open the Robo 3T and check the collection in database Demo1.

Create User Registration using Asp.net and MongoDB

In Demo1, we can see that only a single collection is there. Now, run the project and add some data in the Registration Form.

Create User Registration using Asp.net and MongoDB 

Now, open Robo 3T, check Demo1 Database. The UserReg table is added and in it, some data is added. 

Create User Registration using Asp.net and MongoDB

The data is successfully inserted into the database. 

Summary 

In this article, we created a User Registration page and saved the data into MongoDB database while using ASP.NET. In next few articles, we will learn how we can add MongoDB in ASP.NET and MVC applications and then, we will learn a whole MongoDB series from scratch.