Category: Web Development

Aspy – ASP.NET Session and Cache viewer

Posted by – May 10, 2012

Today I’ve released new version of Aspy. For those of you who don’t know what it is I recommend to visit project’s website at:

http://bytecarrot.com/aspy/.

I short words it is the ASP.NET Session and Cache viewer in a form of ASP.NET HTTP handler.

Current, 1.1.0 version is not a big changes but contains a feature requested by people who have started to use Aspy in theirs projects. The biggest problem with previous release was in viewing large values. There is no possibility to display for instance big XML in a table cell so the value was always truncated. Right now hovering at value cell shows small magnifying glass which clicked shows popup window with whole value. In addition from now ByteCarrot.Aspy.dll is signed and has strong name so it can be used with other signed assemblies.

More information, download and installation instructions can be found on Aspy website mentioned above. Below I’ve added screenshots presenting new feature added in this new version.

Saving place with jQuery and CSS based hover / context menu

Posted by – April 4, 2012

Monitors and theirs resolutions are getting bigger and bigger, but there is always a problem where to put all buttons, links and other controls to avoid overwhelmed UI. I am big fan of clean UI without unnecessary things used only from time to time. By default on screen should contain only the core information without distracting buttons, switches and things like that. Unfortunately all these additional stuff is required to work with an application so has to be implemented. The trickiest part is to make is available but in a subtle way.

I had such problem working on the last version of WebConsole. My solution is quite trivial and required a little bit of jQuery and CSS. I’ve solved the problem using as I call it “action menus”. These are context menu but activated by hovering mouse not right click. You can check how such “action menu” works in a screencast available below.

All three “action menus” presented in screencast above have the same HTML structure and use the same jQuery script. The look & feel has been totally customized in CSS so it is very useful and simple to use thing.

General structure of “action menu” and base CSS definition show two snippets below.

<div id="account-menu" class="action-menu">
    <span>Welcome <strong>Administrator</strong>!</span>
    <ul class="children">
        <li class="nowrap-text"><a href="#">Change Password</a></li>
        <li><a href="#">Sign Out</a></li>
    </ul>
</div>
div.action-menu {
    position: relative;
    margin: 0px;
    padding: 0px;
}

div.action-menu * {
    margin: 0px;
    padding: 0px;
}

div.action-menu a {
    text-decoration: none;
}

div.action-menu ul {
    list-style: none;
    display: none;
    position: absolute;
    z-index: 9999;
}

jQuery executed to make “action menu” reacting to hover is also very simple and straightforward.

// Adds action menu
function addActionMenus() {
    $('div.action-menu').hover(
        function () {
            $(this).addClass('hover');
            $(this).find('ul').show();
        },
        function () {
            $(this).removeClass('hover');
            $(this).find('ul').hide();
        }
    );
}

jQuery(function () {
    addActionMenus();
});

As I mentioned before rest of customization is done in CSS. The demo from screencast contains all code presented above and customizations made for each menu presented there. I am sharing it with you with hope it will be useful. You can download it here.

Please, let me know what do you think about this type of hiding actions available only in a particular contexts and my simple implementation.

jQuery UI tabs with vertical navigation

Posted by – March 18, 2012

I am currently working on a settings view for the WebConsole application. This view will consist of many smaller views for editing configuration. I am using jQuery UI is the obvious choice for me was Tabs control available in this library. Unfortunately I was not very happy with its default layout. The problem was that my main menu is laid out horizontally so I wanted to distinguish somehow tabs which are just below it. I have solved it changing navigation in tabs from horizontal to vertical. Fortunately it turned out very easy and required only some CSS. Below I am presenting the result, CSS and HTML/Razor source code.

jQuery UI tabs with vertical navigation

HTML/Razor source code

@model ByteCarrot.WebConsole.Web.Controllers.Settings.SettingsViewModel</pre>
<div id="settings">
<ul>
	<li><a href="@Url.Action(MVC.Account.List())">Users</a></li>
	<li><a href="@Url.Action(MVC.Account.List())">Settings 1</a></li>
	<li><a href="@Url.Action(MVC.Account.List())">Settings 2</a></li>
</ul>
</div>
<script type="text/javascript">
     $(function () {
         $("#settings").tabs();
     });
</script>

CSS source code

div#settings {
    position: relative;
    padding-left: 200px;
}

div#settings > div {
    min-height: 300px;
}

div#settings .ui-tabs-nav {
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 200px;
    padding: 5px 0px 5px 5px;
}

div#settings .ui-tabs-nav li {
    left: 0px;
    width: 195px;
    border-right: none;
    overflow: hidden;
    margin-bottom: 2px;
}

div#settings .ui-tabs-nav li a {
    float: right;
    width: 100%;
    text-align: right;
}

div#settings .ui-tabs-nav li.ui-tabs-selected {
    border: none;
    border-right: solid 1px #fff;
    background: none;
    background-color: #fff;
    width: 200px;
}

If you are fan of .less project here is the same CSS in LESS format:

div#settings
{
    position: relative;
    padding-left: 200px;

    > div
    {
        min-height: 300px;
    }

    .ui-tabs-nav
    {
        position: absolute;
        left: 0px;
        top: 0px;
        bottom: 0px;
        width: 200px;
        padding: 5px 0px 5px 5px;

        li
        {
            left:  0px;
            width: 195px;
            border-right: none;
            overflow: hidden;
            margin-bottom: 2px;

            a
            {
                float: right;
                width: 100%;
                text-align: right;
            }
        }

        li.ui-tabs-selected
        {
            border: none;
            border-right: solid 1px #fff;
            background: none;
            background-color: #fff;
            width: 200px;
        }
    }
}

I hope it will be useful.

ASP.NET MVC 2 Beta – new features

Posted by – November 18, 2009

.NET LogoYesterday at PDC 09 Bob Muglia announced the release of ASP.NET MVC 2 Beta. This release contains a lot of new, interesting stuff. Below you can find a list of new features taken from official release notes.

New RenderAction method

Html.RenderAction (and its counterpart Html.Action) is an HTML helper method that calls into an action method from within a view and renders the output of the action method in place. Html.RenderAction writes directly to the response, whereas Html.Action returns a string with the output. RenderAction works only with actions that render views.

Strongly typed UI helpers

ASP.NET MVC 2 includes new expression-based versions of existing HTML helper methods. The new helpers include the following:

  • ValidationMessageFor
  • TextAreaFor
  • TextBoxFor
  • HiddenFor
  • DropDownListFor

TempDataDictionary improvements

The behavior of the TempDataDictionary class has been changed slightly to address scenarios where temp data was either removed prematurely or persisted longer than necessary. For example, in cases where temp data was read in the same request in which it was set, the temp data was persisting for the next request even though the intent was to remove it. In other cases, temp data was not persisted across multiple consecutive redirects.

To address these scenarios, the TempDataDictionary class was changed so that all the keys survive indefinitely until the key is read from the TempDataDictionary object. The Keep method was added to TempDataDictionary to let you indicate that the value should not be removed after reading. The RedirectToActionResult is an example where the Keep method is called in order to retain all the keys for the next request.

Client validation library

MicrosoftMvcAjax.js now includes a client-side validation library that is used to provide client validation for models in ASP.NET MVC. To enable client validation, include the following two scripts in your view.

  • MicrosoftAjax.js
  • MicrosoftMvcAjax.js

The following example shows a view with client validation enabled.

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

  //...

“Add Area” dialog box

ASP.NET MVC 2 Beta includes a new Add Area context menu item when you right-click either the root project node or the Areas folder (if one exists). If a root Areas folder does not already exist, the command creates one, and it then creates the files and folders for the area that you specify.

Calling action methods asynchronously

The AsyncController class is a base class for controllers that enables action methods to be called asynchronously. This lets an action method call external services such as a Web service without blocking the current thread. For more information, see Using an Asynchronous Controller in ASP.NET MVC In the ASP.NET MVC 2 documentation.

Blank project template

In response to customer feedback, an empty ASP.NET MVC project template is now included with ASP.NET MVC 2 Beta. This empty project template contains a minimal set of files used to build a new ASP.NET MVC project.

Multiple model validator providers

ASP.NET MVC 2 Beta lets you register multiple validation providers. The following example shows how to register multiple providers.

protected void Application_Start() {
    ModelValidatorProviders.Providers.Add(new MyXmlModelValidatorProvider());
    ModelValidatorProviders.Providers.Add(new MyDbModelValidatorProvider());
    //...
}

Multiple value provider registration

In ASP.NET MVC 2 Beta, the single value provider that was available in ASP.NET MVC 1.0 has been split into multiple value providers, one for each source of request data. The new value providers include the following:

  • FormValueProvider
  • RouteDataValueProvider
  • QueryStringValueProvider
  • HttpFileCollectionValueProvider

These value providers are registered by default. You can register additional value providers that pull data from other sources. The following example shows how to register additional value providers in the in Global.asax file.

protected void Application_Start() {
    ValueProviders.Providers.Add(new JsonValueProvider());
    //...
}

Download full ASP.NET MVC 2 Beta Release Notes

Metadata based validation with jQuery

Posted by – October 8, 2009

jQuery Validation enabled form

Recently I spent some time prototyping my own validation for ASP.NET MVC. Why did not I reuse any of existing solutions? This is a story for another post so I did not want to bring this topic up now. One of the things which I had to figure out during prototyping was how to implement client side validation. Of course I wanted to utilize capabilities of some well known JavaScript framework (no I am not so crazy to write it for my own). I made small evaluation comparing available options and at the end I decided to incorporate jQuery and its Validation plugin. One of the things which were crucial to my decision was ability of this framework to use metadata stored as JSON in class attribute of HTML element. The concept of metadata available in jQuery is amazing and gives possibility to describe validation rules for specified input control inside itself. In my case this was very important feature because I wanted to render validation using my custom HtmlHelper extensions together with corresponding input controls. Second thing which convinced me to jQuery Validation was easy setup which I want to show you now.

If you want to use jQuery Validation in your project first of all you will need of course jQuery library which can be downloaded here, jQuery Metadata plugin which is available here and jQuery Validation plugin downloadable from here.

When you collected all required prerequisites you have to add reference to them in your HTML. Simply add code shown below to the body of tag but remember to ensure that paths lead to place where JavaScript files are located.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script><script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>

When jQuery libraries are already where they should be you can specify validation rules using metadata. In order to do it extend your input control tag with class attribute and set its value to {required:true}. This will tell Validationplugin that this specified input control should contain a value before it can be send back to server. Of course this is very simple rule but below I have listed few more, complex definitions.

<input class="{required:true, maxlength:100, messages:{required:'This field is required.', maxlength:'This field can contain maximum 100 characters.'}}" type="text" />
<input class="{maxlength:50, email:true, equalTo:'#Email',  messages:{required:'This field is required.', maxlength:'This field can contain maximum 100 characters.', email:'This is not a valid email.', equalTo:'Value entered in this field should equal to value of Email field.'}}" type="text" />

Listing below shows this validation metadata in wider context.

</pre>
<form id="MyForm" action="/Registration" method="post"><label for="DisplayName">Username:</label> <input id="DisplayName" class="{required:true, maxlength:100, messages:{required:'This field is required.', maxlength:'This field can contain maximum 100 characters.'}}" type="text" name="DisplayName" /> <input type="submit" value="Submit!" /></form>
<pre>

At the end when you have defined all validation rules only thing you should do is adding following code after closing tag and that is it.

<script type="text/javascript">// <![CDATA[
    $("#MyForm").validate({
        errorElement: "span"
    });
// ]]></script>

Now when you will click Submit! button your form will be validated and in case of errors apropriate messages will be displayed below corresponding input control.

Because I know that described example can be not enough to fully understand how all it works I have prepared more complex, example form which can be downloaded from here: download.

ASP.NET MVC in a corporation – part #2

Posted by – September 10, 2009

.NET LogoIn my previous post I have mentioned that I am currently evaluating the ASP.NET MVC in context of usage for building internal corporate applications. During the evaluation I have made my small SWOT analysis and I want to share it with you in order to get to know what your opinion on this topic is. Because my all thoughts reside in a mind map I have dumped them to the plain list:

Strengths:

  • It is based on the Convention over Configuration principle, what means less ceremony in code and more time to focus on business rules;
  • It is highly extensible with many points of extension in every part of application lifecycle.
  • It is highly testable no matter if you are using the TDD or BDD style of unit testing;
  • It is provided by Microsoft – big player on the market, what at least in theory guarantee that the solution will be supported for a long time;
  • It contains a lot of elements known from classic ASP.NET like notion of session, modules, handlers, HTTP context, views based on ASPX pages and ASCX controls. This is quite important if employees have to switch to the ASP.NET MVC and previously they have used classic ASP.NET, because the learning curve is smaller;
  • It does not use the ASP.NET postback and view state models what improves testability and separation between user interface and business logic;
  • It has a routing functionality what enables cleaner URLs;
  • It gives the full control over all aspects of developed application. Many elements of the ASP.NET MVC can be easily replaced with its custom implementation (i.e. view engine, controller factory);
  • It gives the full control over HTML and how views are rendered;
  • It has a great AJAX and JSON support so usage of JavaScript frameworks like jQuery is trivial;
  • It can be easily integrated with any of popular Inversion of Control frameworks;
  • It has quite big community, there is a lot of online documentation and books;

Weaknesses:

  • It is based on the Convention over Configuration principle, what means more magic working in a background (probably harder debugging in some cases);
  • It is not event driven, so can be difficult for people who know only ASP.NET Web Forms to wrap their minds around it;
  • Third party libraries support is not that strong. Not to many companies write extensions for this framework what means more work for internal team;
  • Current version (1.0) requires some additional effort to reduce usage of magic strings to the minimum;

Opportunities:

  • Allows for Test Driven Development – it is build with TDD in mind, so it is much easier to write unit tests, mock objects and to intercept the program flow;

Threats:

  • Bigger ramp-up and training time is required for developers with no or little experience in web application development;

For the time being this is all what came up to my mind. If you have some other thought I will be grateful if you will share them with me.

ASP.NET MVC in a corporation – part #1

Posted by – August 25, 2009

.NET LogoEach big organization like this in which I work is mostly based on processes. Everything from purchase orders to computer hardware is described by them. To be honest I am not a big fan of this way of work. My mind is closer to Agile way of thinking rather than stiff procedures for solving problems but from a bigger perspective this approach seems to work because my current employer has over 100 years and is in very good health.

One thing which is quite funny with processes is that someone has to figure out how each of them should work. In case of my department, which is very young and in its nature very different than rest of the organization, there is no process for many things and we have to develop them for our own. One of our processes is “software development process”. Because the department consists of about 300 developers, administrators and IT specialists and we are using wide range of tools and technologies, the process I mentioned above is very general and describes things in a high level. In order to be able to use it and be safe in case of internal or external audit we need many supporting documents which customize it to a needs of particular team. This detailed documents describe how we should do development in a particular technology (for example .NET Framework), what tools, libraries, methodologies can we use etc. Of course we do not choose tools with which we will work only basing on our subjective opinions and feelings. During choosing process each technology or tool is evaluated by a group of specialist (developers, administrators) and compared to its competitors/equivalents which are available on the market.

Currently I have a pleasure to initialize a process of ASP.NET MVC evaluation. Its purpose is to check if this framework can be used as the replacement for ASP.NET Web Forms and Model-View-Presenter pattern which we are using now. Because the evaluation process does not touch only ASP.NET MVC but also other presentation framework for web .NET application me and my teammates had to prepare a list of things to check and evaluate:

  • Data binding
  • Validation
  • Navigation
  • State saving
  • Embedded controls support
  • Testability
  • Security
  • Collaboration between developers and UI designers
  • Adoption to existing projects
  • Extensibility
  • Community support
  • Documentation availability
  • Development tools support

Order in which topics on the list appear is accidental and all items are in my meaning equal in theirs importance.

Because I am currently at the beginning of the ASP.NET MVC evaluation I do not have to much more I could share with you. Only thing I have prepared is a mind map with detailed topics I will have to take a look at. I will provide more information about pros and cons of the framework for a big companies in a next posts. If you would like to hear about something regarding this topic please leave your comment below.