Unobtrusive JavaScript with jQuery in MVC 3

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?

I mean there is a value in that kind of programming in mvc 3. And as I see web development is trying to avoid using html events in that kind of way — TheMentor
– TheMentor, Commented Nov 18, 2011 at 14:15

StriplingWarrior · Accepted Answer · 2011-11-18 14:31:01Z

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.

Rob Stevenson-Leggett · Accepted Answer · 2011-11-18 15:34:53Z

0

Make use of data attributes (new in HTML5) to pass data to your javascript.

So I would change your view code to something like:

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

    foreach (var imageInGallery in Model.ImageListGallery)
    {
        <div id="[email protected]" class="editable-image" data-image-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 })
            <button disabled="disabled" id="btn@(imageInGallery.IdImage)" >@CommonTranslations.Save</button>
            <img class="delete-image" src="@Href("~/Content/delete.png")" title="@ImagesTranslation.DeleteImage" alt=""/>
        </div>
    }
}

Javascript (jQuery)

$(function() { 
   $('.editable-image').each(index,elem) {

      elem = $(elem);
      var id = elem.attr('data-image-id');      
      var delete = elem.find('.delete-image');
      var save = elem.find('button');
      var area = elem.find('textarea');

      delete.click(function() { deleteImage(id) });
      //etc..
   }
});

edited Nov 18, 2011 at 15:34

answered Nov 18, 2011 at 14:24

Rob Stevenson-Leggett

35.8k21 gold badges93 silver badges142 bronze badges

3 Comments

Zruty Over a year ago

I like your answer better, but could you fix the 'var id=...' line?

TheMentor Over a year ago

Ok. Tnx guys. I appreciate it. Generally I know advantages of unobtrusive JS, but isn't the old way faster in terms of page execution? Or is this actually irrelevant question

StriplingWarrior Over a year ago

@TheMentor: If you have all your CSS and javascript in static, cacheable files, there shouldn't be much difference in terms of page execution. You're reducing the size of the HTML in the page somewhat (which could make things faster), while at the same time causing jQuery to do some additional processing as the page loads (which could make things slower). However, both of those effects are minimal and will most likely never be noticed by your users.

Collectives™ on Stack Overflow

Unobtrusive JavaScript with jQuery in MVC 3

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related