Kendo Grid Popup Editor图像浏览器

时间:2014-07-09 00:00:10

标签: c# asp.net-mvc kendo-ui kendo-grid kendo-asp.net-mvc

我对kendo popup编辑器图像浏览器功能有疑问。我想将图像路径存储到数据库中,但是Kendo似乎想要将完整的图像标记放入数据库中。

如何让图片浏览器只将路径放入数据库?

这是图片浏览器自定义模板:

@model com.RomanceCoachOnTheGo.MVC.Models.MaleCategory

@(Html.Kendo().Editor()
.Name(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))
//.Value(Model.Icon)
.Tools( tools => tools.Clear().InsertImage())
.ImageBrowser(imageBrowser => imageBrowser
    .Image("~/Mobile/Images/{0}")
    .Read("Read", "ImageBrowser")
    .Create("Create", "ImageBrowser")
    .Destroy("Destroy", "ImageBrowser")
    .Upload("Upload", "ImageBrowser")
    .Thumbnail("Thumbnail", "ImageBrowser"))
)    

这是MaleCategory View:

@{
ViewBag.Title = "MaleCategory";
Layout = "~/Views/Shared/_Layout.cshtml";
}

@(Html.Kendo().Grid<com.RomanceCoachOnTheGo.MVC.Models.MaleCategory>()
.Name("MaleCategories")
.ToolBar(toolbar =>
{
    toolbar.Create();
})
.DataSource(dataSource => dataSource
            .Ajax()
            .Model(item => { item.Id(m => m.MaleCategoryKey); })
            .Create(c => c.Action("CreateMaleCategory", "Administrator"))
            .Read(r => r.Action("ReadMaleCategory", "Administrator"))
            .Update(u => u.Action("UpdateMaleCategory", "Administrator"))
            .Destroy(d => d.Action("DeleteMaleCategory", "Administrator"))
        )
.Columns(col =>
            {
                col.Bound(c => c.Title);
                col.Bound(c => c.Description);
                col.Bound(c => c.SortOrder);
                col.Bound(c => c.Icon);
                col.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
            })
    .Editable(editing => editing.Mode(GridEditMode.PopUp).TemplateName("EditCreateMaleCategory"))
    .Sortable()
    .Pageable()

    .Filterable()
)

这是MaleCategory模型

 public class MaleCategory : FiveTalentLookupModelBase
{
    [Key]
    [ScaffoldColumn(false)]
    [DisplayName("Male Category")]
    public Int64 MaleCategoryKey { get; set; }

    [UIHint("MaleCatIcon")]
    public String Icon { get; set; }
}

以下是引用的EditCreateMaleCategory模板:

@model com.RomanceCoachOnTheGo.MVC.Models.MaleCategory

@Html.HiddenFor(model => model.MaleCategoryKey)
@Html.HiddenFor(model => model.BusinessActions)
@Html.HiddenFor(model => model.IsDefault)
@Html.HiddenFor(model => model.IsActive)


@*Display Titles*@
<div class="editor-label">
    @Html.LabelFor(model => model.Title)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Title)
    @Html.ValidationMessageFor(model => model.Title)
</div>

@*Display Description*@
<div class="editor-label">
    @Html.LabelFor(model => model.Description)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Description)
@Html.ValidationMessageFor(model => model.Description)
</div>

@*Display Sort Order*@
<div class="editor-label">
    @Html.LabelFor(model => model.SortOrder)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.SortOrder)
    @Html.ValidationMessageFor(model => model.SortOrder)
</div>

@*Display Icon*@
<div class="editor-label">
    @Html.LabelFor(model => model.Icon)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Icon)
    @Html.ValidationMessageFor(model => model.Icon)
</div>

1 个答案:

答案 0 :(得分:0)

我只是通过Javascript使用图片浏览器,但我希望这是相同的:

替换:

.Image("~/Mobile/Images/{0}")

使用:

.Image("{0}")