Question

Let say somewhere in MVC 3 application I have

if (Model.ImageListGallery != null)
{
    <h3>@ImagesTranslation.Gallery</h3>

    foreach (var imageInGallery in Model.ImageListGallery)
    {
        <div id="@imageInGallery.IdImage">
            <a rel="group" href= "@Url.Action("displaybig", "news", new { idNews = Model.IdNews, idImage = imageInGallery.IdImage })">
                <img src= "@Url.Action("displaysmall", "news", new { idNews = Model.IdNews, idImage = imageInGallery.IdImage })" alt=""/></a>
            @Html.Label(ImagesTranslation.Description)
            @Html.TextArea("Description", imageInGallery.Description, new { id = "area" + imageInGallery.IdImage, onfocus = "removeDisabledBtnOnImage('" + imageInGallery.IdImage + "')" })
            <button disabled="disabled" id="btn@(imageInGallery.IdImage)" onclick="saveDescription('@imageInGallery.IdImage')">@CommonTranslations.Save</button>
            <img class="@imageInGallery.IdImage" src="@Href("~/Content/delete.png")" onclick="deleteImage('@imageInGallery.IdImage')" title="@ImagesTranslation.DeleteImage" alt=""/>
        </div>
    }
}

How would you use unobtrusive JavaScript with jQuery in that situation (event onfocus and onclick?

Answer 1

By adding a class to the parent div, you can identify each of the gallery images as something that needs to have handlers added to its elements:

foreach (var imageInGallery in Model.ImageListGallery)
{
    <div id="@imageInGallery.IdImage" class="gallery-image">
        <a rel="group" href= "@Url.Action(...)">
            <img src= "@Url.Action(..." alt=""/></a>
        @Html.Label(ImagesTranslation.Description)
        @Html.TextArea("Description", imageInGallery.Description, new { id = "area" + imageInGallery.IdImage })
        <button disabled="disabled" id="btn@(imageInGallery.IdImage)">@CommonTranslations.Save</button>
        <img class="@imageInGallery.IdImage" src="@Href("~/Content/delete.png")" title="@ImagesTranslation.DeleteImage" alt=""/>
    </div>
}

$(function() {
    $('.gallery-image').each(function() {
        var t = $(this);
        var imageId = t.attr('id');
        t.find('textarea').onfocus(function() {
            removeDisabledBtnOnImage(imageId);
        });
        t.find('btn').onclick(function(){
            saveDescription(imageId);
        });
        t.find('img').onclick(function(){
            deleteImage(imageId);
        });
    });
});

There are other ways to go about it, but hopefully that gives you the general idea.