Question

我使用MVC在我的页面上显示给定帖子的评论。这是我的代码：

@foreach (var comment in post.Comments)
{
    <div>
        <img src="@Url.Action("GetImage", "Post", new { userId = comment.UserId })" height="50" width="50"/>
        @Html.DisplayFor(c => comment.User.FirstName)
        @Html.DisplayFor(c => comment.User.LastName):
        @Html.DisplayFor(c => comment.Text)
        @Html.DisplayFor(c => comment.DateComment)
    </div>
    <hr />
}

所以它给出了给定帖子的所有评论。如何显示最新的3个帖子，其余的可以加载＆＃34;更多＆＃34;按钮使用jquery？

Answer 1

先按最新评论排序，然后再按每个节目排序

// if you have a comments class on each comment div
$('div.comments').not(':visible')[0].show();
$('div.comments').not(':visible')[1].show();
$('div.comments').not(':visible')[2].show();

Answer 2

你可以做这样的事情，但这不是一个好方法，因为你已经取得了所有结果。

@{
       var LatestComments = post.Comments..OrderByDescending( c => c.DateComment ).ToList();
 }    


@for(int i = 0 ; i<3 ; ++i)
{
    <div>
        <img src="@Url.Action("GetImage", "Post", new { userId = comment.UserId })" height="50" width="50"/>
        @Html.DisplayFor(c => LatestComments[i].User.FirstName)
        @Html.DisplayFor(c => LatestComments[i].User.LastName):
        @Html.DisplayFor(c => LatestComments[i].Text)
        @Html.DisplayFor(c => LatestComments[i].DateComment)
    </div>
    <hr />
}

更好的方法是在DAL中仅获取少量记录，然后发送到View。稍后您可以调用Ajax来获取更多评论。

Answer 3

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
    $(document).ready(function() {
      $('.nav-toggle').click(function(){
        //get collapse content selector
        var collapse_content_selector = $(this).attr('href');                   

        //make the collapse content to be shown or hide
        var toggle_switch = $(this);
        $(collapse_content_selector).toggle(function(){
          if($(this).css('display')=='none'){
                            //change the button label to be 'Show'
            toggle_switch.html('Show');
          }else{
                            //change the button label to be 'Hide'
            toggle_switch.html('Hide');
          }
        });
      });

    }); 
    </script>
    <style> 
    .round-border {
        border: 1px solid #eee;
        border: 1px solid rgba(0, 0, 0, 0.05);
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        padding: 10px;
        margin-bottom: 5px;
    }
    </style>

jQuery toggle（）隐藏/显示崩溃内容

节目

Bla bla bla bla

请试试这个

使用Jquery，MVC显示/隐藏内容

3 个答案:

jQuery toggle（）隐藏/显示崩溃内容