在 MVC 3 中使用 jQuery 的不显眼的 JavaScript

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