使用javascript无法在c＃asp.net mvc 4中动态加载内容

Question

我正在一个拥有所有者可以添加，编辑和删除展览的网站上工作。 单击“阅读更多”按钮，每年都会举办展览。 我的页面遇到了一个奇怪的问题，因为一旦单击“阅读更多”，我就将内容加载到了一个新的div中，并且我需要该div的唯一标识符。 我正在使用id="@Year here"标识此div，但是遇到了这个问题：

如您所见，它没有正确加载。 我有以下代码可加载到每个组的所有展览中：

@if(Model.Exhibitions.Count() > 0)
{
<h3 style="text-align: left; margin-left: 10px; padding-top: 10px;">@Model.Year</h3>
<table class="extable">
    <tr>
        <th style="width: 15%">@Translations.EXHIBITIONSTARTDATE</th>
        <th style="width: 15%">@Translations.EXHIBITIONENDDATE</th>
        <th style="width: 15%">@Translations.EXHIBITIONEVENT</th>
        <th style="width: 40%">@Translations.EXHIBITIONDESCRIPTION</th>
        <th style="width: 15%">@Translations.GALLERY</th>
    </tr>

@foreach (Exhibition item in Model.Exhibitions)
{
    @Html.Partial("_Exhibition", item)
}

</table>

}

<div class="more-exhi" id="@Model.Next"></div>

<script type="text/javascript">
(function () {
    $('.more-exhi#@Model.Year').attr('class', '');
    $('.show-more').attr('data-year', '@Model.Next');
}) ();
</script>

@ Model.Year是发送到控制器的年份（例如，2014）。 @ Model.Next是下一个存在的年份，展览按降序排列（例如2010）。 但是上面的代码无法正常工作，我不确定为什么。 一旦有人点击“阅读更多”按钮，这就是我的JavaScript：

<script type="text/javascript">

(function () {

    var div = $('#exhibitions');

    div.find('.show-more').click(function () {
        div.find('.more-exhi').hide().load('@Url.Action("Exhibitions", "Exhibition")', { year: $(this).attr('data-year') } ).fadeIn('1500');
        div.find('.show-less').show();
    });

})();
</script>

有人可以帮我解决这个问题吗？ 我认为我在这里监督了一个问题，因为这应该不太困难。

Answer 1

尝试将以下代码行更改为：

 $('.more-exhi#' + @Model.Year).attr('class', '');

:)