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

时间:2014-05-08 14:48:49

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

我正在使用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>

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

1 个答案:

答案 0 :(得分:0)

我明白了。我修改了视图。创建了一个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();
}