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

在这种情况下，你如何使用jQuery来实现不显眼的JavaScript（event onfocus和onclick）?

- TheMentor

---

我的意思是，在MVC 3中进行这种编程有其价值。而且我发现Web开发正在尝试避免以那种方式使用HTML事件。 - TheMentor

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

还有其他的方法来解决这个问题，但希望这能给你一个大致的想法。

- StriplingWarrior

Answer 2

利用HTML5中的数据属性传递数据给JavaScript。

因此，我会将您的视图代码更改为以下内容：

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

    foreach (var imageInGallery in Model.ImageListGallery)
    {
        <div id="[e-mail]" 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..
   }
});

- Rob Stevenson-Leggett

---

我更喜欢你的答案，但你能修复一下 'var id=...' 这行吗？ - Zruty

好的。谢谢大家。我很感激。一般来说，我知道不侵入式JS的优点，但是在页面执行方面，旧方法是否更快？还是这个问题实际上无关紧要？ - TheMentor

@TheMentor：如果您将所有的CSS和JavaScript放在静态的、可缓存的文件中，页面执行方面就不应该有太大的差异。您会在某种程度上减少页面中HTML的大小（这可能会使事情更快），同时也会导致jQuery在页面加载时进行一些额外的处理（这可能会使事情变慢）。然而，这两种影响都是微不足道的，很可能永远不会被用户注意到。 - StriplingWarrior