在 Telerik 网格绑定列中将 html 标记显示为字符串答案

【问题标题】：Display html markup as string in telerik grid bound column在 Telerik 网格绑定列中将 html 标记显示为字符串
【发布时间】：2014-05-09 04:23:01
【问题描述】：

我正在使用 Telerik 编辑器来存储格式化的字符串并显示消息。我所做的是首先将模型绑定到网格。单击编辑时，我打开一个 ajax telerik 编辑器，该编辑器将字符串作为 html 解码字符串存储在数据库中。

我的问题是这个消息字段是 Telerik 网格中的绑定列。我正在尝试将解码的 html 显示为 html 呈现的字符串而不显示标记。

型号：

    public class MessageViewModel
    {
        public string Id { get; set; }

        public string MessageType { get; set; }

        public string MessageTitle { get; set; }

        public string MessageText { get; set; }
}

控制器：

[GridAction]
public ActionResult MessageAdministration(GridCommand command)
{
    var msgList=MessageRepository.GetMessages();
    IEnumerable<MessageViewModel> messageVM = AutoMapper.Mapper.Map<IEnumerable<MessageViewModel>>(msgList);
    return View(new GridModel
    {
        Data = messageVM,
        Total = messageVM.Count()
    });

查看：

@{Html.Telerik().Grid<.Web.Models.MessageViewModel>()
    .Name("MessageGrid")
    .Columns(columns =>
    {
        columns.Bound(m => m.Id).Hidden().HtmlAttributes(new { @class = "messageid" });
        columns.Bound(m => m.MessageType);
        columns.Bound(m => m.MessageTitle);
        columns.Bound(m => m.MessageText);
}

网格列显示：

<p><span style="color:#ed1c24;">RED</span></p>

我希望它以红色背景显示 RED。

【问题讨论】：

标签： c# html telerik-grid telerik-mvc

【解决方案1】：

我明白了。我修改了视图。创建了一个 javascript 函数来获取行中的数据并将 td html 设置为存储在 db 中的 html。

查看：

**<script type="text/javascript">
    //@@mesagerowbound.js        

    function OnRowDataBound(e) {
        var grid = $(this).data('tGrid');
        var row = e.row;
        var dataItem = e.dataItem;
        var html = e.dataItem.MessageText;
        $(row).find(".messagetextcolumn").html(html);
    }
    </script>**

@{Html.Telerik().Grid<LARHC.Web.Models.MessageViewModel>()
    .Name("MessageGrid")
    .Columns(columns =>
    {
        columns.Bound(m => m.Id).Hidden().HtmlAttributes(new { @class = "messageid" });
        columns.Bound(m => m.MessageType);
        columns.Bound(m => m.MessageTitle);
        **columns.Bound(m => m.MessageText).Width(100).HtmlAttributes(new { @class = "messagetextcolumn" });**
        columns.Bound(m => m.ActivationDate).Format("{0:MM/dd/yyyy}");
        columns.Bound(m => m.ExpirationDate).Format("{0:MM/dd/yyyy}");
        columns.Bound(m => m.Status).Title("Status");
        columns.Bound(m => m.UserName);
                columns.Command(commands =>
        {
            commands.Edit()
                .ButtonType(GridButtonType.ImageAndText);
            commands.Delete()
            .ButtonType(GridButtonType.ImageAndText);
        })
                        .HtmlAttributes(new { @class = "namecmdcolumn" })
                        .Width(50)
                        .Title("Commands");
    })
    .DataBinding(dataBinding =>
    {
        dataBinding.Ajax()
            .Select("GetMessages", "Admin")
            .Insert("NewMessage", "Admin")
            .Update("SaveMessage", "Admin")
            .Delete("DeleteMessage", "Admin");
    })

        .ClientEvents(events => events
            .OnEdit("onMessageEdit")
            .OnRowDataBound("OnRowDataBound")
            )
    .Render();
}

【讨论】：