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 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.

Step 2

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

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.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UserRegistration.aspx.cs" Inherits="User_Registration.UserRegistration" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>User Registration</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="col-md-3"></div>
<div class="col-md-6">
<h2 style="text-align:center;margin-top:10px;">User Registration</h2>
<div class="form-group">
<label for="email">Name:</label>
<asp:TextBox ID="Txtname" class="form-control" placeholder="Enter Name" runat="server"></asp:TextBox>
</div>
<div class="form-group">
<label for="email">City:</label>
<asp:TextBox ID="Txtcity" class="form-control" placeholder="Enter City" runat="server"></asp:TextBox>
</div>
<div class="form-group">
<label for="email">Country:</label>
<asp:TextBox ID="Txtstate" class="form-control" placeholder="Enter State" runat="server"></asp:TextBox>
</div>
<div class="form-group">
<label for="email">Email:</label>
<asp:TextBox ID="Txtemail" class="form-control" placeholder="Enter email" runat="server"></asp:TextBox>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<asp:TextBox ID="Txtpwd" class="form-control" TextMode="Password" placeholder="Enter password" runat="server"></asp:TextBox>
</div>
<div class="form-group" style="text-align:center">
<asp:Button ID="Btnreg" runat="server" CssClass="btn btn-success" Text="Registration" OnClick="Btnreg_Click" />
</div>
</div>
<div class="col-md-3"></div>
</div>
</div>
</div>
</form>
</body>
</html>

Step 4

Generate a Button Click event and add MongoDB from NuGet Package Manager.

Add the required Namespaces.

using MongoDB.Bson;
using MongoDB.Driver;

Step 5

Now, add a Class UserReg and the following fields.

public class UserReg
{
public string Name { get; set; }
public string City { get; set; }
public string State { get; set; }
public string Email { get; set; }
public string Password { get; set; }
}

Step 6

Add the following code for button click.

var Connection = "mongodb://localhost";
var client = new MongoClient(Connection);
var Db = client.GetDatabase("Demo1");
var Collection = Db.GetCollection<UserReg>("UserReg");
UserReg na = new UserReg();
na.Name = Txtname.Text.ToString();
na.City = Txtcity.Text.ToString();
na.State = Txtstate.Text.ToString();
na.Email = Txtemail.Text.ToString();
na.Password = Txtpwd.Text.ToString();
Collection.InsertOneAsync(na);

Complete Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using User_Registration.Models;
using MongoDB.Bson;
using MongoDB.Driver;
namespace User_Registration
{
public partial class UserRegistration : System.Web.UI.Page
{
public class UserReg
{
public string Name { get; set; }
public string City { get; set; }
public string State { get; set; }
public string Email { get; set; }
public string Password { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Btnreg_Click(object sender, EventArgs e)
{
var Connection = "mongodb://localhost";
var client = new MongoClient(Connection);
var Db = client.GetDatabase("Demo1");
var Collection = Db.GetCollection<UserReg>("UserReg");
UserReg na = new UserReg();
na.Name = Txtname.Text.ToString();
na.City = Txtcity.Text.ToString();
na.State = Txtstate.Text.ToString();
na.Email = Txtemail.Text.ToString();
na.Password = Txtpwd.Text.ToString();
Collection.InsertOneAsync(na);
}
}
}

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

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

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

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.