Nik's Technology Blog

Travels through programming, networks, and computers

Upgrading an MVC Project to Bootstrap as a Side Project

We have an existing ASP.NET MVC project which has grown to the point where making the switch to use the Bootstrap framework required a substantial amount of work to the Views. Unfortunately this isn't high priority so we couldn't afford to do this in one go, instead we had to find a solution which would enable us to deploy the solution into production using the old Views and Layouts to introduce new functionality to the solution mid-way through the Bootstrap conversion.

To overcome this problem and allow us to upgrade to Bootstrap as a side project we needed a clever solution to effectively allow us to switch from Bootstrap to the old Views and Layout quickly and easily, and then back again.

This was our solution to the problem:

  1. We created a Bootstrap MVC _Layout and added it to the solution.
  2. We created an ActionFilterAttribute class called UseBootstrapLayout which we used to decorate the Actions to denote which Layout the Action method should use to render the View.
  3. We copied each View we were going to upgrade to Bootstrap and named it the same but appended a 2 at the end of the filename.
  4. In _ViewStart.chtml we added to code (below) to check if the View ended with a 2 and which allowed us to switch to the Bootstrap Layout if it did.

If we needed to deploy the application before the Bootstrap update was complete we simply changed to _ViewStart.chtml code to use the old _Layout. All the rest of the code changes and new Views could stay the same.

    /// <summary>
    /// Method to change a view name used by an action method.
    /// We are using this to enable us to re-skin the system
    /// </summary>

public class UseBootstrapLayout : ActionFilterAttribute
    {
        public override void OnActionExecuted(ActionExecutedContext filterContext)
        {
            filterContext.RouteData.Values["action"] = filterContext.RouteData.Values["action"] + "2";
        }
    }

@{

    // _ViewStart.chtml
    var view = HttpContext.Current.Request.RequestContext.RouteData.Values["action"].ToString();

    string layout = "";
    if (view.EndsWith("2"))
    {
        layout = "~/Views/Shared/NewBootstrapLayout.cshtml";
    }
    else
    {
        layout = "~/Views/Shared/_Layout.cshtml";
    }

    Layout = layout;
}

    [UseBootstrapLayout]
    [HttpGet]
    public ActionResult Index()
    {
    return this.View();
    }

Developing Scheduled Tasks for Immediacy Management Console (Alterian CMC)

Immediacy Management Console Scheduled Tasks are useful for running tasks that need to occur automatically on a frequent basis which are independent of website visitor actions.

immediacy-mc

These scheduled tasks have the advantage of being able to hook up to the Immediacy API, allowing developers to perform tasks on Immediacy pages etc.

Scheduled tasks can have public properties if required, which are entered via a Plug-in Settings dialog box.

immediacy-mc-settings

Plug-in Development

Immediacy Management Console plug-ins are simply a .NET class library. The project should contain a C# or VB.NET file containing the plug-in and a separate class which defines the Plug-in Settings dialog.

The plug-in class needs to reference the following Immediacy namespaces.

Immediacy.Configuration;
Immediacy.Service.Interfaces;

Your plug-in class needs to inherit from:

Immediacy.Service.Interfaces.Plugin

And your class needs to have a few class attributes for Immediacy (CMC) to recognise your plug-in:

    [SettingsControlTypeAttribute(typeof(SiteMapSettings))]
    [GuidAttribute("XXXX8D90-XXXX-XXXX-XXXX-A3341127XXXX")]
    [PluginDetailsType("Name of Plug-in", "Description")]

Your plug-in class constructor needs to pass the settings to the base class as follows:

public Sitemap(ImcFile imcFile, StringDictionary settings) : base(imcFile, settings) { }

To build your plug-in you need to override the Execute() method and put your code in here.

Plug-in Settings Dialog Development


The plug-in settings dialog is created by another class, which inherits from Immediacy.Service.Interfaces.SettingsControl

This class is essentially a Windows Form code file without the form designer, so you’ll need to import the  System.Windows.Forms namespace.

You’ll need to add Windows.Forms Labels and TextBoxes to the dialog box to capture the public properties from the user who configures the plug-in while scheduling it.

Implement the abstract class like the example below:

 

namespace ImmPlugins.Sitemap

{

    public class SettingTest : Immediacy.Service.Interfaces.SettingsControl

    {

        private System.Windows.Forms.TextBox txtUrl;

  private System.Windows.Forms.Label lblUrl;

 

  private System.ComponentModel.Container components = null;

 

        public SiteMapSettings(Type pluginType)

            : base(pluginType)

        {

            InitializeComponent();

        }

 

        public override System.Collections.Specialized.StringDictionary Settings

        {

            get

            {

                StringDictionary retVal = new StringDictionary();

                retVal.Add("url", txtUrl.Text);

                return retVal;

            }

            set

            {

                txtUrl.Text = (string)value["url"];

            }       

  }

 

        public override bool SettingsAreValid

        {

            get {

                  if (txtUrl.Text == “”)

                  {

return false;

                  }

                  else

                  {

                        return true;

                  }

}

        }

 

        public override string SettingsAreValidVerbose

        {

            get {

string errorText = string.Empty;

                  if (txtUrl.Text == "")

                  {

errorText += "Please specify a URL \r\n";                 

}

return errorText;
}

        }

 

        private void InitializeComponent()

        {

            this.lblUrl = new System.Windows.Forms.Label();

            this.txtUrl = new System.Windows.Forms.TextBox();

 

            this.txtUrl.Location = new System.Drawing.Point(202, 59);

            this.txtUrl.Name = "txtUrl";

            this.txtUrl.Size = new System.Drawing.Size(160, 20);

            this.txtUrl.TabIndex = 2;

 

            this.lblUrl.Location = new System.Drawing.Point(8, 59);

            this.lblUrl.Name = "lblUrl";

            this.lblUrl.Size = new System.Drawing.Size(188, 16);

            this.lblUrl.TabIndex = 1;

            this.lblUrl.Text = "URL:";

 

this.ClientSize = new System.Drawing.Size(374, 183);

            this.Controls.Add(this.lblUrl);

            this.Controls.Add(this.txtUrl);

            this.Name = "PluginSettings";

            this.ResumeLayout(false);

            this.PerformLayout();

        }

 

        protected override void Dispose(bool disposing)

        {

            if (disposing)

            {

                if (components != null)

                {

                    components.Dispose();

                }

            }

            base.Dispose(disposing);

        }

    }

}

Plug-in Installation


Immediacy Management Console plug-ins are installed in the Immediacy CMS folder path.

Simply compile your .NET class library to a DLL and copy it to this directory.

e.g. C:\Program Files\Immediacy\CMS\6.1\Service\Plugins

(Note: This path maybe slightly different on your installation depending on Immediacy version, drive path etc)

If all has gone well your plug-in should show up in the list of tasks which can be scheduled in the Immediacy Management Console.

Creating an Immediacy (Alterian Content Manager) Plug-in

An Immediacy plug-in is a special type of ASP.NET User Control that allows you to extend the functionality of the core content management system. http://www.immediacy.net/

Follow these instructions to create a custom plug-in for the Immediacy/CMC CMS.

Instructions

Create a new directory within the Immediacy plug-ins directory for your plug-in. This new directory will hold the .ascx file for your user control plus your Immediacy editor dialogue UI (Which is a special web file that allows you to change the plug-in settings from within the Immediacy editor).

The name of your plug-in directory should have the same name as the “tagName” you use to register the User Control in Immediacy’s web.config file.

Build your ASP.NET User Control to perform your custom functionality making sure that you create public properties in your C#/VB.NET code for all the properties you would like configurable from within the Immediacy editor.

Add a reference to the Immediacy.Web assembly to your project.

Next, add these attributes to your User Control class.

[PluginDesigner(PluginDesignerType.Html, "PluginCmsDialogue.aspx", Height = 400, Width = 400)]
[ToolboxData("<{0}:PluginName runat=server></{0}:PluginName>")]
[PluginInfo("My First Plug-in", "CMS Plug-in Category", Description = "Description of my Plug-in")]
public partial class Comments : System.Web.UI.UserControl, INamingContainer
{
    // Your plug-in code here
}

If you don’t add these class attributes your plug-in properties will not be configurable from within Immediacy, but the plug-in will still work.
If you don’t have public properties that you want editors to be able to change you can skip creating a dialogue box for your plug-in.

Create an Editor Dialogue Pop-up

Create a CMS dialogue page which will allow Immediacy users to change the properties of your custom plug-in from within the editor. The name of this file is referenced in the class attributes above (e.g. PluginCmsDialogue.aspx) .

Your dialogue box can be either an HTML file with JavaScript or an ASP.NET web form. This example uses an HTML page with a .aspx extension, although it doesn’t contain any server-side code. 

In the HTML you need to reference the Helpers.js JavaScript file that resides in the Immediacy plug-ins folder.

<script type="text/javascript" src="../Helpers.js"></script>

Create a simple HTML form with form elements to match each public property of your plug-in class.

Add two HTML buttons, one for OK, one for Cancel. Give them IDs of ok and cancel respectively.

Create a JavaScript function called Init() as below.

<script type="text/javascript">
var Dialog;

function Init()
{
   Dialog=new DialogObject("name of plugin", 400, 400); Dialog.UniqueKeys=false;

   // Load each property and update the dialogue box
   Dialog.Load("property", function(value){document.getElementById("property").value=value;});

   // Add functionality to the OK and Cancel HTML buttons
   document.getElementById("ok").onclick=function(){Dialog.Ok();}
   document.getElementById("cancel").onclick=function(){Dialog.Cancel();}

   Dialog.Valid=function()
   {
     
// Perform validation here
      return true;
   }

   Dialog.Submit=function()
   {
     
// Save each property
      Dialog.Save("property",document.getElementById("property ").value);

      // Update the Immediacy control UI placeholder
      Dialog.InnerHTML="<div style='background:#DDDDDD; color:#000000; float:left; padding:10px; clear:both;'><strong>Comments Enabled : </strong>Status of Plug-in</div>";
   }
}
</script>

At the bottom of your dialogue HTML call the Init() function as below.

<script type="text/javascript">Init();</script>

Install the Plug-in

Register your ASP.NET User Control to Immediacy’s web.config under <pages><controls> as you would with an ordinary User Control. Ensure the “tagName” is the same as the plugin directory name for your plugin.

<add tagPrefix="MyUserControls" tagName="PluginName" src="~/plugins/ PluginName /test.ascx"/>

Build your project in Visual Studio.

Copy the .ascx and your dialogue box HTML file to the /plugins/PluginName folder.

Copy the .dll file to the Immediacy bin folder.

Create a Simple Windows Service to Request a URL at Set Intervals

I needed a simple Windows Service to request a web page at set intervals indefinitely. Windows Services are the best way of doing this as they have the ability to start automatically when the computer boots up and can be paused, stopped and restarted. You can also get them to write events to the Windows Event log.

I found this Windows Service sample tutorial on The Code Project and downloaded the code to familiarise myself with the basics. The tutorial lacked a timer and the code to request a URL though so I had to add this functionality.

Visual Studio Standard edition doesn't have a Windows Service template, but you can still create a Windows Service, you just need to do a bit of extra work.

After some research and a bit of coding I added two new methods:

private void ServiceTimer_Tick(object sender, ElapsedEventArgs e)
{
this.timer.Stop();
DoWork();
this.timer.Start();
}

void DoWork()
{
WebClient client = new WebClient();
client.Headers.Add("user-agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; .NET CLR 1.0.3705;)");

Stream data = client.OpenRead(URL to request here);
client.Dispose();
data.Dispose();
}

I overrode the OnStart() method of ServiceBase to enable the timer and start it. I also overrode the OnStop() method to disable the timer.

The DoWork() method simply creates an instance of WebClient and reads in the URL you want to request.

Then in the constructor I set the timer interval and added an event handler to raise the ServiceTimer event when the interval elapses. The event handler simply stops the timer, calls the DoWork() method and then restarts the timer.

public static void Main()
{
ServiceBase.Run(new Service3());
}

public Service3()
{

InitializeComponent();
// Duration 1 hour
double interval = 3600000;

timer = new Timer(interval);
timer.Elapsed += new ElapsedEventHandler(this.ServiceTimer_Tick);

}

To install the Service you need to publish the project in Visual Studio. Then use InstallUtil.exe following the process below:

  1. Open a Visual Studio .NET Command Prompt
  2. Change to the bin\Debug directory of your project location (bin\Release if you compiled in release mode)
  3. Issue the command InstallUtil.exe MyWindowsService.exe to register the service and have it create the appropriate registry entries
  4. Open the Computer Management console by right clicking on My Computer on the desktop and selecting Manage
  5. In the Services section underneath Services and Applications you should now see your Windows Service included in the list of services
  6. Start your service by right clicking on it and selecting Start

Each time you need to change your Windows Service it will require you to uninstall and reinstall the service. Prior to uninstalling the service make sure you close the Services management console. To uninstall the service simply reissue the same InstallUtil command used to register the service and add the /u command switch.

e.g. InstallUtil.exe /u MyWindowsService.exe

When you install the service on a server you can find the InstallUtil.exe in the .NET framework folder e.g. C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727

 

Implementing UML 2.0 Use-Cases with Visio 2007

I've been busy creating some use-cases in Visio 2007 for an upcoming project and from what I can gather either Microsoft has not implemented the current UML 2.0 standard and stuck with an older version, or it decided what parts of the specification to implement.

Either way it's a little annoying, I'm having to spend extra time working out what was the equivalent diagram or notation in UML 1.2 was in order to draw it in Visio.

An example of this would be where you link two Use-Cases with the «include» relationship. This doesn't seem to exist in Visio, so it looks like you have to make do with the «uses» stereotype instead, which was replaced in the current standard.

A few other Visio bug-bears would be the sparse Use-Case documentation interface. It doesn't allow rich text, so adding more than a few lines of text could become very hard to read. Microsoft also seem to leave it up to the modeller to format their own use-case specification; but with such a poor interface I can't see how you could use table-orientated steps to make a sequence of events more readable.

Surely allowing attachments (in the form of Microsoft Word) to be added would make more sense?