Ненавязчивый JavaScript с помощью jQuery в MVC 3

Question

Допустим, где-то в приложении MVC 3 у меня есть

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>
    }
}

Как бы вы использовали ненавязчивый JavaScript с jQuery в такой ситуации (события onfocus и onclick?

Answer 1

Добавляя класс в родительский div, вы можете идентифицировать каждое из изображений галереи как нечто, для чего нужно добавить обработчики к его элементам:

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);
        });
    });
});

Есть и другие способы сделать это, но, надеюсь, это даст вам общее представление.

Answer 2

Используйте атрибуты данных (новые в HTML5) для передачи данных в ваш javascript.

Поэтому я бы изменил ваш код представления на что-то вроде:

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

    foreach (var imageInGallery in Model.ImageListGallery)
    {
        <div id="image_@imageInGallery.IdImage" 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..
   }
});