如果 WebGrid MVC c# 中的列中的文本过多，则显示更多或显示更少链接

【问题标题】：Show More or Show Less link if text is too much in Column in WebGrid MVC c#如果 WebGrid MVC c# 中的列中的文本过多，则显示更多或显示更少链接
【发布时间】：2020-01-24 12:47:32
【问题描述】：

我正在使用 jquery 开发 MVC 的 WebGrid，在我的网格中，有一个评论列，其中包含更多正在创建滚动的文本。

我想在这个网格中显示更多或更少的链接。

我该怎么做。

这是我的网格

【问题讨论】：

只要保留一个条件，如果评论的长度大于显示 ShowMore 。如果评论长度选择模式保持评论的标志或长度相等，则启用显示更少。将此值保留在隐藏字段中，同时将数据绑定到您的 webgrid。然后玩这个值。而不是继续调用服务器的请求
在 jqGrid 中 - 我们有一个选项 - { key: false, name: 'Message', index: 'Message', classes: "more" }，Mvc WebGrid 中的任何此类选项？？跨度>

标签： asp.net-mvc webgrid

【解决方案1】：

我写了一个jquery函数--

 $('.more').each(function () {
        var content = $(this).html();

        if (content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar, content.length - showChar);

            var html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

            $(this).html(html);
        }

});

并更改标签文本--

 $(".morelink").click(function () {
        if ($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });

最后，我在 WebGrid 中添加了.more 类。

grid.Column("outBoundMoveOrder.Comment", header: "Comment", style: "more"),

学习愉快！！

【讨论】：