【问题标题】:Kendo grid image column剑道格子图栏
【发布时间】:2014-09-20 18:33:11
【问题描述】:

在一个 MVC4 项目上工作,我正在尝试在我的剑道网格中添加一个显示图像的列。

<div id="datagrid">
    @(Html.Kendo().Grid<SustIMS.Models.ConcessionModel>()
    .Name("datagrid_Concessions")
    .Columns(columns =>
    {
        columns.Bound(c => c.Code).Title(ViewBag.lblCode);
        columns.Bound(c => c.Description).Title(ViewBag.lblDescription);
        columns.Template(@<text>
                <img src='@item.Image' /> 
            </text>
            ).Title("Image");
    })

我试过了,但没有运气。也试过了:

columns.Template(@<text>
         <img src='../../Images/pic.png' /> 
    </text>
    ).Title("Image");

图像不显示,无论我在控制器中定义图像src还是直接在视图中写入。

我检查了thisthis 的问题,但没有显示图像。

谁能帮忙?

编辑

这是特许经营模式:

public class ConcessionModel
    {
        public string Id { get; set; }
        public string Code { get; set; }
        public string Description { get; set; }
        public string TrafficOpeningDate { get; set; }
        public string CreationDate { get; set; }
        public string CreationUser { get; set; }
        public string Image { get; set; }
        ...

Image 属性是一个包含类似“C:\whatever\pic.png”的字符串

【问题讨论】:

  • @item.Image的值是多少?
  • @Brett,这就是我想要的:../../Images/pic.png/Images/pic.png~/Images/pic.png,...我尝试了几种可能性

标签: asp.net-mvc asp.net-mvc-4 kendo-ui kendo-grid kendo-asp.net-mvc


【解决方案1】:

这样试试,

columns.Template(e => { }).ClientTemplate("<img src='../../Images/pic.png'/>").Width(140).Title("Image");

演示:

查看

@(Html.Kendo().Grid<Category>().Name("people")
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(m => m.Id);
        })
            .Read(read => read.Action("GetCategory", "Category"))
    )
    .Columns(columns =>
    {
        columns.Bound(c => c.Id);
        columns.Bound(c => c.ImageUrl).ClientTemplate("<img src='" + Url.Content("~/CategoryImage/") + "#=ImageUrl#' alt='#=Name #' Title='#=Name #' height='62' width='62'/>");

    })
)

型号

public class Category
    {
        [ScaffoldColumn(false)]
        public int Id { get; set; }

        public string Name { get; set; }

        [UIHint("FileUpload")]
        [Required]
        public string ImageUrl { get; set; }

        public string FileName { get; set; }

        internal static object ToDataSourceResult(Kendo.Mvc.UI.DataSourceRequest dsRequest)
        {
            throw new NotImplementedException();
        }
    }

控制器

 public static List<Category> Category = new List<Category>();

        private int _nextid = 4;

        static CategoryController()
        {
            Category.Add(new Category { Id = 1, Name = "Desert", ImageUrl = "Desert.jpg" });
            Category.Add(new Category { Id = 2, Name = "Hydrangeas", ImageUrl = "Hydrangeas.jpg" });
            Category.Add(new Category { Id = 3, Name = "Tulips", ImageUrl = "Tulips.jpg" });
        }

        public ActionResult Index()
        {
            ViewData["Category"] = Category;
            return View();
        }

        public ActionResult GetCategory([DataSourceRequest] DataSourceRequest dsRequest)
        {
            var result = Category.ToDataSourceResult(dsRequest);
            return Json(result);
        }

【讨论】:

  • 谢谢,我正在测试您之前的答案,您的两个答案都有效!但是,现在我可以通过编写像 &lt;img src='../../Images/pic.png'/&gt; 这样的 img src 来显示图像,我希望这个 src 被模型中存在的图像 src 填充。怎么绑定?
  • @chiapa 请展示您的模型,以便我理解。您到底想要什么。
  • Jaimin,我刚刚在我的问题中发布了模型
  • 非常感谢 Jaimin,它现在可以工作了。最后我找到了一个使用 Kendo asp.Net MVC 并理解它的人。我已经在剑道控制上苦苦挣扎了一段时间,你能看看我的一些问题(thisthis),这些问题涉及剑道,但仍然没有答案,我想会保持这种状态......?再次,非常感谢
  • @chiapa 欢迎您,我会调查您的问题并让您知道。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-11-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-05-20
  • 1970-01-01
相关资源
最近更新 更多