Originally posted on ChrisHammond.com, all comments and discussion on this topic should be done there.
This post will provide you with a basic tutorial for utilizing SignalR with custom DotNetNuke Modules. If you want to bypass the blog post go check out the source on GitHub, you can Fork my Repository. The module created here will be very simple, if you want a full blown module with more features be sure to check out the open source DotNetNuke Module SignalRChat, and see it in action at http://dnnCHAT.com/
SignalR is an ASP.NET library for using websockets and long polling in your applications. Basically what this means, is that you can have your web pages (or apps) maintain an open connection with a webserver, passing data back and forth, without having to do standard posts and gets for the content and functions. SignalR is a free library that you can get from www.signalr.net and you can DL from nuget.org right into your Visual Studio projects.
With my new daytime job I had the need to dive deeply into the pool that is SignalR, so I figured what better way to do that than try to create a DotNetNuke module that would use SignalR. There are plenty of Chat examples for SignalR, so I figured that would be a good place to start.
This post assumes you already have a DotNetNuke development environment setup locally at http://dnndev.me, and that you have my Visual Studio templates installed. If you don’t, head on over to the DNN Wiki http://www.dotnetnuke.com/Resources/Wiki/Page/development-environment.aspx
To start, you should create a new DotNetNuke module using my templates, http://christoctemplate.codeplex.com, I used the C# DAL template, but you can use any of the C# templates. The DAL template has less information that will need to be removed than if you use the DAL2 template, the DAL2 template actually has a working sample in it). I called the module I used for this blog DNNSignalR, but you can name yours whatever you want.
Install SignalR
Install SignalR into the project using NUGET. To do this open your Package Manager Console (found under Tools/Library Package Manager) in Visual Studio 2012. In the Console run the following line
Install-Package Microsoft.AspNet.SignalR
This will download the SignalR resources into a Packages folder inside of your module’s folder. SignalR provides a variety of resources that will be utilized, as well as an older version of jQuery which will not be used.
Add a Reference
In your project add a reference to DotNetNuke.Web.DLL in the website’s BIN folder, this will allow you to use the Route Mapping in DNN 7.
Map the Route
In order for SignalR to work in DNN7, you need to tell DNN how to handle requests to the path /signalr/hubs/ that path won’t physically exist, due to the way the service framework in DNN7 works this is actually very easy to do.
Add a class to your project called RouteMapper.cs using the code in the screenshot here. (In the sample code check out the /components folder)
Note: If you are using URLMaster, you will need to add |/signalr to the end of the doNotRewriteRegex setting on the Regex Settings tab of the URLMaster Friendly URL Settings module (under the HOST menu).
Create the ChatHub
The ChatHub.cs class will be the listener on the SignalR side, “clients” (the view of the module) will send to that chathub using the Send method. The Hub will then broadcast that information back out to all connected clients using the addMessage javascript function, implemented in view.ascx later in this post. In this example ChatHub is really simple, but you’ll find that this class will likely be fairly complex as you start to build our the ability to send messages to different “Groups”, which is supported by SignalR.
Creating the View Control
The View Control in this DotNetNuke module is going to be pretty simple, but it also does everything for the module. It will communicate with the ChatHub, with communication happening in both directions. The first thing we’re going to add to the View control are two JS references. You can do this in a number of ways with DotNetNuke, but the easiest way (not necessarily the best) is to just put them in the ASCX file
After that we’re going to add the JavaScript that communicates with the ChatHub. The important parts here are the addMessage definition, which will be called by the Hub when a clients submits a chat message, and the start() method which we fire and then wire up the click handler for the linkSubmit hyperlink. The addMessage method will be called by the ChatHub “server” whenever any “client” clicks on the linkSubmit hyperlink. The server sends whatever the messages is to all clients, and it will then be rendered into the browser.
The HTML for the view control is pretty simple, with a single DNN:LABEL control that will tell the user where they can type. The INPUT file will take the message a user wants to send. The Hyperlink linkSubmit will be used for the click event to send the chat message, and finally the UL called “messages” will be used to display the received messages.
View.ascx.resx
You can go ahead and define the fields shown in this screenshot in the app_localresources/view.ascx.resx file, these values will get populated by DNN in the label, and link on the page.
Packaging and Installing the Module
If you created the module using my module development templates, packaging the module is as easy as switching to Release mode in Visual Studio and compiling the module. Then from the DNN host/extensions page upload the module through the Install Extension Wizard. Once you’ve gone through that process you can place the module on a page.
What the Module Does
The module doesn’t do much, it really just takes a text entry and displays it on the page, you’ll need to open the page in two different browser to really test things out. You’ll notice that the messages are pretty simple and won’t tell you who they are from, but that’s okay, it was just quick and dirty sample module. If you want full blown chat functionality check out SignalRChat module demo’d at http://www.dnnchat.com.
Hopefully this at least gets you started with SignalR though, using SignalR you’ll find that you can really empower your DNN modules to be responsive, without having to write a bunch of webservices to do so.
Download the Source
The Source Code samples for this blog post are available on GitHub
Originally posted on ChrisHammond.com, all comments and discussion on this topic should be done there.
With the 2.0 release of my module development project templates last week I’ve had a few inquiries into how to customize the templates. You can download the templates from http://christoctemplate.codeplex.com/
Why Modify the Templates?
First, why might you want to modify the custom templates? The main reason is that these templates are defined using a specific namespace, DotNetNuke.Modules.*, which is fine in most cases, but what if you want to use your own namespace? Well you have to create a project, then search/replace all instances of that namespace, while not removing any DNN references at the same time. Customizing the project templates will allow you to define your own company namespace, email address, website, and even copyright information, in the template so that you do not have to search/replace every time you create a new project.
Read the full post on ChrisHammond.com
Comments are disabled due to the spam problem on asp.net
With the release of DotNetNuke 7.0 (and now the more recent 7.0.2), it was time to update my module development project templates. If you have worked with my module development templates before, here are the major changes for this release. If you haven’t worked with them before please read this whole blog post as I discuss how to get up and running with the templates.
What’s New
This section will cover some of the “new” features of this template release. If you’re familiar with my previous releases this will hopefully get you up to speed on what is new. If you are new to the whole process it will help you understand a few of the features in the templates.
For more information about the templates read my full blog post on my website.
Comments are turned off here due to the fact that asp.net has a horrible spam problem
In case you haven’t heard, today is our birthday! Back on 12/24/2002, Shaun Walker released an open source project he called (at the time) IBuySpy Workshop in the forums here on www.asp.net. IBSW was a project which containers many enhancements to the IBuySpy Portal that Microsoft had released as a reference app in the early days of the .NET Framework.
Well 10 years later, that application is still here, a few months after that first release it was renamed to DotNetNuke. Check out Shaun’s blog post for a little insight into the early days, and also be sure to check out our 10 Year Timeline/Info Graphic
Is anyone at Microsoft listening to the SPAM problem here on Weblogs.asp.net? My “Can anyone do anything about the spam here on weblogs.asp.net?” post from October got over 12 spam comments posted to it in the past 24 hours. I have comments all moderated, but that just means I have a crapload of work to do each time people comment.
Also, when you click on a link from a comment notification email you are taken to an insecure site warning due to an invalid SSL Cert.
We really just need some updates software, something with better filtering, better captcha, etc. Please, can we get an upgraded weblogs.asp.net sometime in 2013?
It is a big day in the world of DotNetNuke (yes, DNN is still around folks). DNN 7.0 was released today, you can find out more information by visiting
DotNetNuke.com Be sure to read Will Morgenweck’s blog post for all the details.
For a quick peak into DNN 7 check out these two videos, What’s New and Getting Started.
What's new in DNN 7
Getting Started in DNN 7
With the pending release of DotNetNuke 7, scheduled for this week, I updated my free DotNetNuke (DNN) skin, MultiFunction v1.3. This latest release requires DotNetNuke 7, it shouldn’t install on an earlier version of DNN.
This release updates a number of the CSS classes for DNN 7 specific styles and objects. Overall the design of the skin doesn’t really change much, just cleans up CSS mainly for this release.
I also updated to the 3.0 version of the Orangebox jQuery plugin, you can find the code included inside the package.
You can also find the Source package (c#) of the skin there on codeplex, useful if you are looking for an example of how to create/modify a skin for DNN.
http://multifunction.codeplex.com/
If you’re using MultiFunction, I’m curious to see some links to sites that use it, feel free to post in the comments below.
Originally posted on ChrisHammond.com
I was trying to do some work with the Form and List module in DotNetNuke today and I needed to apply some custom styles to the LIST view of a module, without going in and creating a full XSL template for the module to use, I wanted to style the default table based grid view.
In order to customize this view though I needed to do some custom jQuery that runs after the table is loaded, the jQuery then goes through and looks for columns, and based on the number of columns, adjusts the way those columns display.
First I wanted to make it so that a specific column didn’t have text wrapping, which in HTML would normally use the nowrap property on a column, but because of the dynamic nature of F&L you can’t configure that manually. To achieve this I needed to loop through each Table Row (TR) in the table, and then find the column in question, and apply the css attribute/value for white-space/nowrap. To do this I used code like the following.
$("#tableId tr").each(function(){
var cellCount = $(this).find("td").length;
if(cellCount==4)
{
$(this).find("td:eq(0)").css("white-space","nowrap");
}
else
{
$(this).find("td:eq(1)").css("white-space","nowrap");
}
});
Basically that goes through and finds each row in the table, then checks to see how many columns there are. I do this because the VIEW for the table when you are logged in, versus when you aren’t logged in, is different, the F&L module adds an Edit column at position 0, so you can see in the ELSE statement I basically want to set the width on the 2nd column, position 1 in the zero-based array.
If you want to do something similar for the HEADER row of the table you have to do things slightly differently, using the following code
$("#tableId tr:eq(0)").each(function(){
var cellCount = $(this).find("th").length;
if(cellCount==4)
{
$(this).find("th:eq(0)").css("text-align","left");
$(this).find("th:eq(1)").css("text-align","left");
}
else
{
$(this).find("th:eq(1)").css("text-align","left");
$(this).find("th:eq(2)").css("text-align","left");
}
});
So there you go, you can use that jQuery above to go through and make changes to columns in an HTML table, depending on the location of the cell.
Well here we are, nearing the end of the month of October and coming up on the month of NMovember once again. We here at DNNCorp are in our third year of supporting the Movember cause, growing facial hair on our upper lips to raise awareness and money for men’s health issues. Anyone can participate in Movember, and if you sign up, join a team, you can order some free materials from the Movember organization that you can use to help try and raise funds.
The rules for Movember are simple.
- Start clean shaven on Movember 1st (if you want to cheat here, I won’t frown upon starting completely clean shaven)
- Grow a moustache for the entire month, but it should be a moustache!
- It can’t connect to your sideburns, that is a beard
- It can’t connect at your chin, that is a goatee (handlebars are fine)
- Spread awareness about men’s health by engaging in conversations that start because of your moustache
- Conduct yourself like a gentleman.
How to be successful with a Moustache
Still not sure what Movember is? Check out my 5 minute IGNITE Session from DNNWorld 2012
Join a Team
DNNCorp has created two teams, one for our employees in the US, and one for our employees in Canada. Feel free to join one of these teams (preferably in your country of residence), or you can also create your own team (see below). Here are some links to the teams and the Network as a whole.
Create your own team
We are encouraging companies or even DNN user groups to create their own Movember team, and then join the DNN Network, to get started head on over to Movember.com and register, then create your team and invite your friends and fellow employees to join your team. After you create your team email me chris.hammond @ dnncorp.com to let me know what your team URL is so that I can have it added to our Network, I don’t think you can do that yourself (but you might).
Download the Movember App
If you have an IPhone or Android device, there is a Movember app that you can download from the appropriate store. The app will allow you to track your donations, and even take a photo once a day for all 30 days for the month so that you can put together a short video at the end of the month tracking your progress.
Fundraising, start small
The point of Movember is to raise awareness for men’s health, you can do that through discussions, as well as by raising money for Movember. Donations then go between the Prostate Cancer Foundation and other organizations. I would encourage you to set a goal of raising $100 for Movember. With a few donations from friends and family raising $100 is hopefully a small enough goal that you can easily achieve it, then, if you desire, you can increase your goal and try to raise more money!
Join Now!
Movember starts in less than a week, head on over to Movember.com and register! Over the next few weeks I will be posting additional blogs with ideas on how you can reach out to friends/family to garner donations, as well as fun ideas for things you can do around the Movember theme.
If there anyone out there who can do something about the spam here on weblogs.asp.net? Perhaps we could get some new software here that we could use to blog with? The old software barely works in Chrome (I can't see the rich text editor at this point), and lately the notification emails for Comments (which are mostly spam anyways) are pointing to http://weblogs.aspnet05.orcsweb.com which tries to get you to login with https://weblogs.aspnet05.orcsweb.com/
Anyone still maintaining this place?
More Posts
Next page »