30 Nisan 2021 Cuma

Asp.NET SignalR kullanarak Progress Bar yapımı

By Berkay 19:14 Asp.NET, Hub, Owin startup, Progress Bar, SignalR, Web Form Leave a Comment

Asp.NET Web Form kullanılarak geliştirilmiş bir projemiz olduğunu varsayalım. Bu projenin bir sayfasında form aracılığı ile bir Excel dosyası alınıyor ve dosyadaki kayıtlar veritabanına aktarılıyor. Aktarım işleminin ne kadarının gerçekleştiğini dinamik bir şekilde göstermek istiyoruz. Bu durumda ne yapabiliriz?

UpdateProgress, UpdatePanel gibi tool'ları kullanmadan SignalR yardımıyla çok kolay bir şekilde isteğimizi gerçekleştirebiliriz.

Öncelikle sıfır bir Web projesi oluşturdum. Ardından da aşağıdaki Nuget Package'ları ekledim.

Ardından projeme aşağıdaki gibi client ile haberleşecek olan SignalR Hub sınıfımı ekliyorum.

	using Microsoft.AspNet.SignalR;

	namespace BerkayBlog
	{
	public class ProgressHub : Hub
	{
	public void Send(string message)
	{
	var context = GlobalHost.ConnectionManager.GetHubContext<ProgressHub>();
	context.Clients.All.showMessage(message);
	}
	}
	}

view raw ProgressHub.cs hosted with ❤ by GitHub

Daha sonra da Owin StartUp dosyasını projeye dahil ediyorum.

	using Microsoft.Owin;
	using Owin;

	[assembly: OwinStartup(typeof(BerkayBlog.Startup))]

	namespace BerkayBlog
	{
	public class Startup
	{
	public void Configuration(IAppBuilder app)
	{
	app.MapSignalR();
	}
	}
	}

view raw Startup.cs hosted with ❤ by GitHub

Şimdi de Default.aspx.cs dosyasında 5 method oluşturuyorum ve Page_Load methodunun içinde arka arkaya bu 5 methodu çağırıyorum. Her metodun içerisinde Hub'a mesaj göndereceğiz ve gönderilen mesaj dinamik olarak sayfamızda gösterilecek.

	using System;
	using System.Threading;
	using System.Web.UI;

	namespace BerkayBlog
	{
	public partial class _Default : Page
	{
	ProgressHub hub = new ProgressHub();

	protected void Page_Load(object sender, EventArgs e)
	{
	Method1();
	Method2();
	Method3();
	Method4();
	Method5();
	}

	private void Method1()
	{
	hub.Send("Method 1 çalışıyor...");
	Thread.Sleep(500);
	}

	private void Method2()
	{
	hub.Send("Method 2 çalışıyor...");
	Thread.Sleep(400);
	}

	private void Method3()
	{
	hub.Send("Method 3 çalışıyor...");
	Thread.Sleep(800);
	}

	private void Method4()
	{
	hub.Send("Method 4 çalışıyor...");
	Thread.Sleep(100);
	}

	private void Method5()
	{
	hub.Send("Method 5 çalışıyor...");
	Thread.Sleep(550);
	}
	}
	}

view raw Default.aspx.cs hosted with ❤ by GitHub

Son olarak aspx dosyamda gerekli düzenlemeleri yapıyorum.

	<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="BerkayBlog._Default" %>

	<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
	<script src="Scripts/jquery-3.4.1.min.js" ></script>
	<!--Reference the SignalR library. -->
	<script src="Scripts/jquery.signalR-2.4.1.min.js"></script>
	<!--Reference the autogenerated SignalR hub script. -->
	<script src="signalr/hubs"></script>
	<!--Add script to update the page and send messages.-->
	<script type="text/javascript">
	$(function () {
	var progress = $.connection.progressHub;

	progress.client.showMessage = function (message) {
	$("#progress").text(message);
	};

	$.connection.hub.start().done(function () {

	});
	});
	</script>

	<div id="progress"></div>
	</asp:Content>