I am as I have posted before lazy. I am also very hesitant to using extension methods. There is nothing wrong with this but they pop up everywhere eventually. I did however create an extremely useful extension method for something as simple as getting the name of a specified dates month. This is displayed based on the current culture.

It is only one line of code but it’s one hell of a line to remember and that’s why I created the extension for it! :)

using System.Threading;
public static string MonthName(this DateTime date)
{
	return Thread
	.CurrentThread
	.CurrentCulture
	.DateTimeFormat
	.MonthNames[date.Month];
}

Tonight I had a problem with the Html.ActionLink. It would from one Controller not redirect to another one which was really pissing me off at the time. I tried using the RouteDebug from Phil Haack and it showed correct routing so I started to poke around in the Html helpers and found this great thing called RouteLink. Basically I can customize my links a bit better with this.

<%= Html.RouteLink("Throw", new 
		{ 
			controller = "Workday", 
			action = "DeleteWorkday", 
			Model.WorkdayID 
		})%>

With this helper I can make good use of any route I have mapped in global.asax. The reason I customize the routes is to be able to do these kinds of things. Not because I have to but because I can.

God I love the MVC framework. It’s like everything I’ve been missing with asp.net. No more configuring stupid not very configurable server controls!

The reason I want to do this is because I like to make everything very “visible” to the user. Readability is very important and the UI tends to get cluttered as it is. For now I am very happy with my little hack.

It’s extremely late and “real” work is getting the better of me but I’ll post what I have for now. There are two types of input. Workdays and products and yes they are different! ;) (or it’s some baggage from a not so well design previous system.

First of all this is in the invoice controller. I was thinking of using a separate controller for the by-products of the Invoice namely products and workdays but decided that those should neither exist nor be accessible without an invoice so pardon my relentless effort to strive for domain driven design. This means I need to hax the ActionResult EditInvoice. Basically I just add a new Product and a new workday to it.

ViewData["Product"] = new Product();
ViewData["Workday"] = new Workday();

return View(invoice);

I know it is extremely ugly but the hour is late and my MVC foo isn’t exactly bar! There are two divs then. One for the AddWorkdayControl and one for the AddProductControl (I am going to use only one div and load them dynamically whenever I figure out how, duplication is your enemy :) ).

<div class="addProduct" runat="server" style="position: absolute;
    background-color: #fff; border: solid 2px #000; z-index: 200;">
    <% Html.RenderPartial("CreateProductControl", ViewData["Product"]);  %>
    <a href="#" class="hideAddProduct">Close</a>
</div>

<div class="addWorkday" runat="server" style="position: absolute;
    background-color: #fff; border: solid 2px #000; z-index: 200;">
    <% Html.RenderPartial("CreateWorkdayControl", ViewData["Workday"]);  %>
    <a href="#" class="hideAddWorkday">Close</a>
</div>

Now I have to add the two links for showing the div

<a href="#" class="showAddWorkday">Add Workday</a>
<a href="#" class="showAddProduct">Add Product</a>

And finally comes the extremely nice and very fluent jQuery which does the magic. I really love javascript now that I am getting to know it a bit better. It’s extremely powerful and no website should be totally without since it enhances the user experience so much with so little effort. Note the hide(‘slow’) and show(‘slow’) which actually makes the div expand in an animated way.

<script src="/Scripts/jquery-1.3.1.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $('div.addProduct').hide();
		$('div.addWorkday').hide();

        $('a.showAddProduct').click(function() {
            $('div.addProduct').show('slow');
            return false;
        });

        $('a.hideAddProduct').click(function() {
            $('div.addProduct').hide('slow');
            return false;
        });

        $('a.showAddWorkday').click(function() {
            $('div.addWorkday').show('slow');
            return false;
        });

        $('a.hideAddWorkday').click(function() {
            $('div.addWorkday').hide('slow');
            return false;
        });
    });
</script>

That’s it for today. Tomorrow I have to figure out how to use only one div and load the usercontrol dynamically in that div. It would also be very nice to get to learn why I cannot use the id of the divs and links. I don’t like assigning missing classes to an object just to be able to manipulate it but then again this is all probably a hack so if you have any suggestions for improvements I’d really appreciate to hear about it!

Till next time

EDIT: I saw I I made a couple of typos on hiding the div elements I use for input.

First of all I must start with saying, javascript and jQuery is very different from anything I have ever used before and I have been searching high and low for a simple way to simply toggle the visibility of a div. The reason for this is that I want to ‘popup’ a insertion div when the user requests it and reason for that is because I want to learn :)

Let’s start with the html elements needed:

<a href="#" id="linkId">Link</a>

<div id="divId" runat="server" style="visibility: hidden; position: absolute;
    background-color: Aqua; border: solid 10px black; width: 400px; height: 400px;">
    <!-- Some input elements here -->
</div>

As you can see I have chosen to REALLY display the div when it’s visibility is toggled but never mind my wanna-be-a-designer-skills!!  This is where I started and I was searching forever and frankly no one had posted a solution I could make work for me. After searching for a few hours I decided to use the google hosted jqúery.js you need to add a valid reference to something that contains jQuery.js for me that was

<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" />

Now comes the tricky part, and this is where FireBugfor FireFox comes in handy.

$(document).ready(function() {
    $("a").click(function() {
        $("div").css('visibility', 'visible');
    });
});