$(document).ready(function () { // Shawsons' Teeny-Tiny Drop Downs!
    $('.drop-down-menu li ul').hide().mouseleave(function () {
        $(this).hide();
    });
    $('.drop-down-menu>li>a').mouseenter(function () {
        $('ul', $(this).parent().parent()).hide();
        $('ul', $(this).parent()).show();
    }).mouseleave(function (o) {
        if ($(this).parent().has($(o.relatedTarget)).length < 1) {
            $('ul', $(this).parent()).hide();
        }
    });
});

The Markup:

<ul class="drop-down-menu">
        <li>Available Actions : </li>
        <li><a href="">Menu 1</a>
            <ul>
                <li><a href="a.htm">a</a></li>
                <li><a href="b.htm">b</a></li>
                <li><a href="c.htm">c</a></li>
            </ul>
        </li>
        <li><a href="">Menu 2</a>
            <ul>
                <li><a href="d.htm">d</a></li>
                <li><a href="e.htm">e</a></li>
                <li><a href="f.htm">f</a></li>
            </ul>
        </li>
    </ul>

Some CSS:

.drop-down-menu { display:block; }
.drop-down-menu li { float:left; padding: 8px; }
.drop-down-menu li a { padding:8px; }
.drop-down-menu li ul
{
    position:absolute;
    background-color:#fff;
    border: 1px solid #999;
    border-radius: 0px 7px 7px 7px; -moz-border-radius:0px 7px 7px 7px; -webkit-border-radius:0px 7px 7px 7px;
    padding:5px;
}
.drop-down-menu li ul li { float:none; }
.drop-down-menu li ul li a { color:#000; }
.drop-down-menu li ul li:hover { background-color:#F68833; }

Related posts:

• OO & Inheritance with Javascript
• Processingjs & Box2d Physics!
• jqZoomage jQuery component

Screenshot

Installation

Just add a reference to the script at the bottom of your page (where all your js should be anyway!)- as shown in the demo, this is a basic example;

$(window).ready(function() {
	$("#dinky-img").zoomage({
		zoomedImageContainer: "#big-img",
		zoomedImageUrl: "big-image.gif",
		stayActiveOnMouseOut: false,
		zoomedImageStartsCentered: true
	});
});

There are a couple of styles which are required for the view finder, and the mask which goes over the image (allowing you to customise the look)- add these rules to your style sheet somewhere;

#zoomage-view-finder { border: 1px solid #fff; }
.zoomage-view-finder-surround { background-color:#fff; opacity:0.7; }

As a general point, it’s best to run the script in a $(window).load() rather than the standard $(document).load(), as this ensures that all the images are loaded before the script begins, otherwise the script runs and grabs the width() and height() of the image to work out ratios, but these get returned as 0′s! More info on this can be found on the stack overflow issue about this

Configuration

zoomedImageContainer * Required *
Default Value : “#zoom-image-container”
This is the jQuery selector for the div which will act as the close up view for your image.

zoomedImageUrl * Required *
Default Value : “”
This is the URL of the zoomed image file. I generally use images 3 times larger than the original, however there isn’t a limit. The scale ratio is calculated on load.

stayActiveOnMouseOut
Default Value : false
If this is set to true, the view finder will continue to show in it’s last position even when the mouse pointer is moved off of the image. If false, the view finder will disappear on mouse out.

zoomedImageStartsCentered
Default Value : true
Indicates that, on load, the zoomed image view shows the center of the image.

centerOnMouseOut
Default Value : true
If true, on mouse out, the zoomed view will return to the center of the zoomed image.

Live Demo

You can check out a real life working version of it here!

Tested across all the major modern browsers (IE9/ FF4/ Chrome10)- give me a shout if you spot an issue.

Download

Current Version 1.2 – 2011-09-10
Unminified Development Version
Minified Production Version

Licence

This plugin is available for use under the MIT licence. For more info see http://codeblog.shawson.co.uk/storage/jquery.zoomage/licence.txt

jQuery Plugin Site Link

The official jQuery Plugin catalogue link for this plugin is http://plugins.jquery.com/project/jqZoomage

Related posts:

• Adding minification and obfuscation of your Javascript and CSS to your ASP.net build process using Yahoo YUI Compressor
• JQuery Accordion Control links not working
• ASP.net update panel’s and jQuery

Related posts:

• Classic ASP SQL Injection vulnerability analyser
• Machine Key Generator
• More Manic Spaceman (8weekgame) documentation done

Related posts:

• 8WeekGame – I Won!
• 8WeekGame Competition Over – Vote Now!
• Couple of interesting news items today

<input data-bind="value: ChargedShipping, uniqueName: true" class="required number"/>

Related posts:

• KnockoutJS won’t bind to fields with numbers at the end?
• JQuery Validate() method for JQueryUI AutoComplete drop down boxes, while using KnockoutJS
• ASP.net update panel’s and jQuery

$("select").combobox({
            selected: function(event, ui) {
                $(ui.item.parentNode).change();
            }
        });

Thanks go out to the “Rob on programming” blog, which helped me get my head around what was going on in the events in combobox.

Related posts:

• JQuery Validate() method for JQueryUI AutoComplete drop down boxes, while using KnockoutJS
• JQueryUI
• ASP.net update panel’s and jQuery

see “Creating an Order/ Order Details style view using ASP.net MVC2 & Entity Framework 4″

So following on from my last MVC post I posed my question to Scott Hanselman himself via email, and he took the time to write me a very helpful response;

Interesting solution. Good job getting it working.

Take a look at maybe using some cleaner JS on the client…check out my last podcast on Knockout and check out this demo: http://knockoutjs.com/examples/contactsEditor.html

Related posts:

• Creating an Order/ Order Details style view using ASP.net MVC2 & Entity Framework 4
• KnockoutJS won’t bind to fields with numbers at the end?
• Using JQueryUI combobox() with KnockoutJS

I’ve just started my very first MVC2 project- it’s a pretty simple web based back office Warehouse/Order management system, tying into a frontend website. I boshed out a whole bunch of simple list/edit screens for Parts/ Couriers/ Stock movements etc saving the Order entry form till last as I couldn;t immidiatly imagine how this would work. What I wanted was the equivilant of an old school Access form with a sub form- like so;

(Obviously, once everything’s working I will substitute the crazy GUID fields for some kind of swanky jQuery lookup!)

I started MVC following through Scott Hanselmans’ tutorials over on the Microsoft MVC site which shows building up a database, using Entity Framework 4 as an ORM, and extending those Model classes to set validation meta data- then building your simple controllers and a bunch of strongly typed views against these Entity Framework model classes (and some view models as required).

This all works fine when building one set of views per table- so I have a Parts database table, which I create a Parts controller for, then have a simple List, Create and Edit view which all works very well- the UpdateModel method happily updated my Model class from the form data on the strongly typed views.  It all becomes a little less clear though when you have a record which has a bunch of other associated records.  I need to not only Bind to a single records field, but also Bind to a List<> of associated records.

So I started googling and I found a bunch of links on google about binding to lists in MVC, including 3 quite pivotal ones all linked off of this StackOverFlow article;

• http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx
• http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/
• http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx

There’s also an additional article off the back of one of those articles;

• http://blog.donnfelker.com/2010/02/27/editable-grid-list-binding-in-mvc2/

These links are all great and give good working examples of Binding to an object with a property which is a List<> of another object– but none of these are tied to any kind of data persistance which seems contrary to most of the MVC tutorials which show how easily you can write your controllers and view straight against the EF objects.  I can understand that in a full blown enterprise system you’re not going to be tying yourself straight to the EF classes anyway and you’de probably have a ViewModel or some kind of DTO which you pass between your data layer and your controllers- but I wanted to see this done with the EF objects, as I don’t think its something which should be difficult.

So I tried following the various methods but using my Entity Framework objects and had a whole world of problems.  Using Donn felker’s method I recieved this error;

“Templates can be used only with field access, property access, single-dimension array index, or single-parameter custom indexer expressions.”

I think I did eventually get past this error, but then I was hit by the same erorr I got using Steve Sanderson’s original method which was

“UpdateModel The EntityCollection has already been initialized. The InitializeRelatedCollection method should only be called to initialize a new EntityCollection during deserialization of an object graph”

This caused a Model error and stopped the form going through – I read various forum posts about removing this error from the ModelState error stack, but the save still failed.  I also experienced a bunch of other problems with the html field’s not being given the correct ID’s to map back to the models when using the HtmlPrefixScopeExtensions class that was part of the solution in the above articles. So I tried a whole bunch of variations of various articles I’d read and eventually gave up and decided to do something a bit different.

My Approach

In the model I have the entity model of my database, which gives me the Sale and SaleLine class- I create partial classes for these which hold the validation metadata.  I then created a ViewModel which will hold a single Sale and a List<SaleLine>, which are the lines which correspond to that sale.

If I bound the view straight to the Sale, then I would get SaleLines for free as a navigation item on the Sale class- i could dump the properties of the Sale to the form like normal, then just do a for loop going round Model.Salelines- when I post back then I have a single Sale object, with its attached records which can be automatically updated. But this seemed to be one of the issues I was having- when posting back, MVC was trying to rebuild my Sale object from the view data, which it did with no problems, but when it came to reattaching all the associated SaleLines, entity framework would start complaining that they already exist. So splitting them out in the ViewModel breaks the SaleLines out of the EntityCollection and just creates a generic List of SaleLines which I can itterate through using an index and then process manually on the post back.

// Model Partial Classes

[MetadataType(typeof(SaleMetadata))]
public partial class Sale
{
public Sale() {
this.Id = Guid.NewGuid();
this.CreateDate = DateTime.Now;
}
class SaleMetadata
{
// TODO
}
}

[MetadataType(typeof(SaleLineMetadata))]
public partial class SaleLine
{
class SaleLineMetadata {
[Required(ErrorMessage = "Please enter a quantity.")]
[Range(1,99999,ErrorMessage="Quantity must be at least 1!")]
public object Qty { get; set; }
}
}

// ViewModel

public class SaleViewModel
{
public Sale Sale { get; set; }
public List<SaleLine> SaleLines { get; set; }
}

On my SaleController’s Edit method, I setup the ViewModel and return it to the View.

public ActionResult Edit(Guid id)
{
SaleViewModel svm = new SaleViewModel()
{
Sale = db.Sales.Single(x => x.Id == id),
SaleLines = db.SaleLines.Where(x => x.SaleId == id).ToList()
};

return View(svm);
}

The View is a standard Edit view, with the for loop at the bottom to render out the Salelines;

<fieldset><legend>Items</legend>

<table id="rows">
<tr>
<th>Part Id</th>
<th>Qty</th>
<th>Sale Price</th>
<th>&nbsp;</th>
</tr>

<% for (int i = 0; i < Model.SaleLines.Count; i++ )
{ %>
<tr>
<td>
<%: Html.HiddenFor(model => model.SaleLines[i].Id) %>
<%: Html.TextBoxFor(model => model.SaleLines[i].PartId)%>
<%: Html.ValidationMessageFor(model => model.SaleLines[i].PartId)%>
</td>

<td>
<%: Html.TextBoxFor(model => model.SaleLines[i].Qty)%>
<%: Html.ValidationMessageFor(model => model.SaleLines[i].Qty)%>
</td>

<td>
<%: Html.TextBoxFor(model => model.SaleLines[i].SalePrice)%>
<%: Html.ValidationMessageFor(model => model.SaleLines[i].SalePrice)%>
</td>

<td>
<%= Html.ActionLink("Remove", "DeleteRow", new { id = Model.SaleLines[i].Id }, new { Class = "removeItem" })%>
</td>

</tr>
<% } %>

</table>

<a href="#" id="addItem">Add another...</a>

To Handle the post back I can update the Sale as normal, then I grab a list of the SaleLines from the database, and itterate through them manually updating each one;

[HttpPost]
public ActionResult Edit(Guid id, SaleViewModel svm)
{
if (ModelState.IsValid)
{
Sale s = db.Sales.Single(x => x.Id == id);
UpdateModel(s, "Sale");

List<SaleLine> db_lines = s.SaleLines.ToList();

for (int i = 0; i < svm.SaleLines.Count; i++)
{
SaleLine form_line = svm.SaleLines[i];
SaleLine db_line = db_lines.FirstOrDefault(x => x.Id == form_line.Id);

if (db_line == null)
{
//create a new one
form_line.Id = Guid.NewGuid();
form_line.SaleId = id;
db.AddToSaleLines(form_line);
//db.SaveChanges();
}
else
{
UpdateModel(db_line, "SaleLines[" + i + "]");
}
}

db.SaveChanges();

return RedirectToAction("Index");
}
else
{
return View(svm);
}
}

Adding an extra row, is all done entirly with jQuery– and this is one of the bits that doesn’t feel right.. I grabbed the html from an existing row, then modify it myself adjusting the ID’s so it’s a new row. When the View gets posted back, MVC is clever enough to be able to pick up my new row along with the others, and I have some logic to check if this row has a corresponding row in the SaleLines list, and if not, to create a new one.

var current_count = <%=Model.SaleLines.Count %>;

$("#addItem").click(function () {
$("#rows").append('<tr><td><input type="text" value="" name="SaleLines[' + current_count + '].PartId"></td><td><input type="text" value="" name="SaleLines[' + current_count + '].Qty" ></td><td><input type="text" value="" name="SaleLines[' + current_count + '].SalePrice"></td></tr>');
current_count++;
return false;
});

$("a.removeItem").live("click", function () {
remove_row = $(this).parent().parent()
$.ajax({
url: this.href,
cache: false,
success: function(html) { $(remove_row).remove(); reNumber(); }
});
return false;
});

function reNumber() {
var i = -1;
$("#rows tr").each(function (element_id, element) {
$("input[id$='Id']", $(element)).attr('id', 'SaleLines_' + i + '__Id').attr('name', 'SaleLines[' + i + '].Id');
$("input[id$='PartId']", $(element)).attr('id', 'SaleLines_' + i + '__PartId').attr('name', 'SaleLines[' + i + '].PartId');
$("input[id$='Qty']", $(element)).attr('id', 'SaleLines_' + i + '__Qty').attr('name', 'SaleLines[' + i + '].Qty');
$("input[id$='SalePrice']", $(element)).attr('id', 'SaleLines_' + i + '__SalePrice').attr('name', 'SaleLines[' + i + '].SalePrice');

i++;
});
}

The above javascript also has a bit of code to remove rows- this calls a method on the controller (DeleteRow- see below) and then removes the table row from the html.

// AJAX GET : /Sales/DeleteRow/{RowId}
public bool DeleteRow(Guid id)
{
try
{
SaleLine line = db.SaleLines.Single(x => x.Id == id);
db.SaleLines.DeleteObject(line);
db.SaveChanges();
return true;
}
catch (Exception)
{
return false;
}
}

This broke the update method though as the indexes were no longer sequencial- the html which gets spat out by MVC puts an index number against each row, and putting gap in this numbering stops the full collectino of items being passed, so I have to renumber the remaining items (the reNumber function shown in the javascript listing above). This feel’s like a total hack; I’ve read some articles about non-sequencial indexing, but I don’t have enough MVC XP’s to be able to apply this and the interweb is a bit thin on the ground for code examples which include the all important UpdateModel and persistance part of the code!

Anyway- comments would be appreciated! Is this a completly mental way of doing things? Have you read any other articles which implement differently?

Related posts:

• Conditional DataAnnotations in c#
• MVC strongly typed view returns a null model on post back
• Entity Framework 4.1 Code First (With One to Many relationship) Code Example

$("span[id$='_txtName']") // match the section at the end

// you can also match text at the start, or in anywhere in the string using the following
$("span[id^=text]")
$("span[id*=text]")

Related posts:

• ASP.net update panel’s and jQuery
• Globalization “Current Culture” settings in the web.config (ASP.NET)
• jqZoomage jQuery component

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(){
      // ... your code here!
 });

Related posts:

• URL Routing with ASP.NET 4 Web Forms (VS 2010 and .NET 4.0 Series) – ScottGu’s Blog
• ASP.net update panel’s and jQuery
• JQuery Accordion Control links not working