SignalR Chat Application with ASP.NET MVC

SignalR Chat App With ASP.NET

SignalR Chat App With ASP.NET – This article will show you an actual application using SignalR in ASP.NET MVC. The main goal for this project is to have an idea of how we can use SignalR in a real-time web application.

As stated on this site https://www.asp.net/signalr:

“ASP.NET SignalR is a library for ASP.NET developers that makes developing real-time web functionality easy. SignalR allows bi-directional communication between server and client. Servers can now push content to connected clients instantly as it becomes available.

SignalR allows us to create a real-time application over HTTP. HTTP is a standard protocol used to communicate between a client and a server. Below is sample diagram of HTTP request from a client and a server.

SignalR Chat App With ASP.NET

As you can see from the diagram above their is disconnected state between client and a server. While SignalR is like a tunnel that has a bi-directional connectivity. Please see image below.

SignalR Chat App with ASP.NET

To see how SignalR works in real time. Let’s create a Web Chat Application. This application will show a real-time and stateless manner of SignalR.

SignalR Chat App With ASP.NET

Overview:

Note:  I’m using the default MVC template of ASP.NET

I assume you have already created a project or if not you can refer to this blog post How to start with asp.net MVC.

Let’s start:

First, open Nuget Package Manager. To open go to your solution explorer and right-click on your project name. Once Nuget package manager is opened, search for SignalR and install.

SignalR Chat App with ASP.NET

To verify if the assembly reference is installed. It should look like the image below.

SignalR Chat App with ASP.NET

Second, add SignalR Hub Class. To add, right-click on your project name and select add > add new item then search for hub. Then rename your hub. In my case, I name it as ChatHub.

SignalR Chat App With ASP.NET

Open your hub class and copy the code below.

Code:

Third, open your default controller which is HomeController and create a new action result. This will return our ChatView design that we are about to create in our next steps.

Code:

Fourth,create ChatView.cshtml. Go to your solution explorer and navigate to Views >Home folder then create a new view. Right-click on Home Folder and then select add > MVC 5 View Page with Razor. Choose Layout.cshml as your layout page for your view.

SignalR Chat App With ASP.NET

Copy code below to your ChatView.cshtml

Code:

Fifth, establish a connection with your SignalR library using Jquery. Copy code below to your ChatView.cshtml.

Lastly, redesign your default view which is index.cshtml inside your Views>Home Folder. Open the file and replace content with the code below.

Code:

And we are good to go. To see the final output of this project. Run your project by pressing F5. Then register two new users for testing purposes. Then open this project in Mozilla and google chrome to see a real-time chat application. See image below.

SignalR Chat App With ASP.NET

Thank you for reading!!

Happy coding!!

Code Summary:

ChatHub.cs > Hub Class

Code:

HomeController.cs > Controller

Code:

ChatView.cshtml > View

Code:

 

Index.cshtml > Home Page View

Code:

Easy Steps to Implement Partial View in Asp.Net MVC

One of the best ways to implement a dynamic table without loading the whole page is by using Jquery Ajax request. Asp.Net MVC offers Ajax helpers to easily achieve this functionality. Partial View in Asp.Net MVC is one of its strengths. In this tutorial, we are going to use Ajax.Actionlink() to load Partial View in MVC.

Let’s start: 

Desired output: Partial View in Asp.Net

Partial View in Asp.Net

If this is your first time creating an MVC Web Application project refer to the thread below
How to start with ASP.NET MVC Web Application
ASP.NET MVC File structure

First, create a new model class for our model binding in creating a list of our sample data later in this tutorial. In my case, I name it as myModels.cs.

Partial View in Asp.Net

myModel

Declare following properties in your model class

Create a partial view inside View->Shared folder

Partial View in Asp.Net

• To add right-click on the Shared folder under Views and select Add->New Item and a new window will pop-up, select Web from the left pane of the window then select MVC 5 View Page(Razor) in the middle pane. Name your view, in my case I name it as _partialview.

Partial View in Asp.Net

This partial view will contain table design loaded to our main view

Code:

Bind this partial view with our model and receive the list pass from our controller using the code below.

• @model IEnumerable<UsingPartialView_MVC.Models.myModels>

And drop into C# code from the view and use for each loop to populate list to our table.
Full Code:

From your HomeController create a list of sample data

Partial View in Asp.Net

Code:

Then create a method that will pass the sample data above to our partial view and return partial view to our main view.

In your index create your main view declare this script to enable Jquery
• <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js” type=”text/javascript”></script>
• <script src=”/Scripts/jquery.unobtrusive-ajax.js” type=”text/javascript”></script>

To install jquery.unobstrusive-ajax.js used NuGet Package manager console. To open NuGet Console navigate to tools->NuGet Package Manager->Package Manager Console.

Partial View in Asp.Net

And then execute command: PM> Install-Package Microsoft.jQuery.Unobtrusive.Ajax

Partial View in Asp.Net

Create Ajax Helper

• HttpMethod = “GET”, -> specify request method
• UpdateTargetId = “partialview”, – > specify which DIV to be updated with the partial view
• InsertionMode = InsertionMode.Replace – > insertion method. Replace all element inside a DIV

Then we will create an empty DIV that will serve as the container for our partial view.

 

Final Output:

Partial View in Asp.Net

Code Summary
myModel:

_partialview:

HomeController:

Index.html:

 

Thank you for reading..

Enjoy coding!!!

 

 


Post you may like:

[pt_view id=”2384ae03it”]

Populate HTML Table using JQUERY

Populate HTML Table using JQUERY
A simple way to populate HTML table using JQuery

Populate HTML table using JQuery – Working in ASP.NET MVC is sometimes tricky especially if you are creating a single page application. Or if you want to optimize your system to perform much faster way in loading a bunch of data. One of the common problems we encountered is to load a list or any data to  HTML view from the controller to its view. One way to solve this is to use the default model list binding of ASP.NET MVC. But in this article, I would like to share with you a way to implement this using JQuery(Ajax request).

I assume you have a new project in visual studio 2013 or any version should do. If you have created a project with default ASP.NET MVC template HomeController will be the default controller and your view is found inside View >  Home > index.cshtml. 

Copy the code below in your index.cshtml and we should be set. Try running your project by pressing f5 and you can now see how this works.

Html Table:

Thank you for reading !!

Happy coding!!

How: ASP.NET MVC using Entity Framework(Database First Approach)

Entity framework is part of .NET Framework it generates necessary database command that execute connection with database without using the standard SQL queries.  To expand our understanding on how Entity Framework works. I created an ASP.NET MVC web application to share what I’ve learned. For beginners like me hopes this helps.

Image below is the table I created for this project. I name the database as Employee_Listing and for the table I name it as Table.  If this is your first time to create a database visit this thread Create Database using Visual Studio  for detailed instruction on how I created this database.

Entity Framework

Application Final UI Output:

Entity Framework

Final Output

Let’s Start:

       Note:

1. I assume you have already created a project and added entity framework if not visit the link from the note above . Now add ADO.NET Entity Data Model. I prefer adding it to my Model folder. To add, right click on the Models folder, click Add and choose New Item.

Entity Framework

Add ADO.NET Entity Data Model

2. From Add New Item window select Data under Visual C# from the left pane and choose ADO.NET Entity Data Model from the middle pane. Then name your model. In my case I name it as Employee_Listing.

Entity Framework

Name Entity Model

3. In the next window select option Generate from Database and then click “Next”

Entity Framework

Generate from database

4. Create new connection by simply clicking New Connection button

Entity Framework

Create New Connection

5. Choose Data source for your database. In my case it is Microsoft SQL Server then click “Continue”.

Entity Framework

Choose SQL Server

6. In connection properties choose your Server name and select your Database name as shown below.

Entity Framework

Choose Server and Database Name

7. To test connection of your database click “Test Connection” button. Then press “OK”.

Entity Framework

Test Connection

8. Click “Next” to proceed.

Entity Framework

Entity Model Wizard

9. Choose Table you want to add to your project.

Entity Framework

Choose Table

10. If security warning pop-up select “OK”.

Entity Framework

Security Warning

11. Visual Studio will create edmx file with the Table model for your database.

Entity Framework

Project View

12. The image below is the full screenshot of my Models folder.

Entity Framework

Models folder

13. Table.cs is the class Model of the Table I added with ADO.NET Entity Data Model.

Entity Framework

Table.cs

Code inside Table.cs

  • This is our Entity Model class. I added [Required] attribute to every property declared from this model for Data Annotation to be used for model binding to our UI form inputs.

Let’s start with the coding part

We are going to use the default Controller for MVC Template which is HomeController. Located under HomeController folder and its default view located under Views->Home->index.cshtml.

Entity Framework

Solution Explorer

1. Create a view for your application. Open Index.cshtml file refer to highlighted text shown in the image above.

Index.cshtml

  • Create a form using html helper to bind our model.
  • @using MVC_Data_Entity.Models -> gain access to our Models folder
  • @model Table -> gain access to our actual Model class which is the class Table inside Table.cs.
  • <script src=”~/Scripts/jquery-1.10.2.min.js”></script> -> Add JQuery script.
  • Get_Data() -> JavaScript function use for transferring data to our view from our Controller
  • Delete(id) -> JavaScript function that call delete function in controller to delete specific data from our database
  • Edit(id) – > JavaScript function that call select function from our controller and fill form with the existing data.
  • table_data(data) -> This is a table design JavaScript function to be fill in our table without a whole page loading.
  • @Html.ValidationSummary -> Show validation error base on the [required] attribute we set in our Table Model.
  • @Html.ValidationMessageFor -> Show validation error for specific inputs.

Code:

2. Next open your HomeController. Let’s create and apply CRUD (Create, Read, Update and Delete) which is the basic function for most of the systems.

 

HomeController.cs

Function summary for HomeController

  • Index() – > Load default view
  • Index(Table model) -> received post request from our UI form.
  • GetData() -> Get all data from our table.
  • Select_data_for_edit(int id) – > Select specific data by id from our database table
  • Delete(int id) -> Delete data from table by id
  • Update()-> Update data entry from database table
  • Insert_data(Table model) -> Insert new entry to database table

Code:

 

3. Layout.cshtml

  • This file is located at Views ->Shared->Layout.cshtml.
  • This is where we can modify sites main menu.

Code:

Final Output:

Entity Framework

Final Output

This is a working application. Hopes this help!!

Thank you for reading!! Happy coding!!


Post you may like:

[pt_view id=”2384ae03it”]