Alternative way of show / hide html element

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.