首页 文章

MVC:将上传的文件名返回到网格列中

提问于
浏览
1

我有一个带有Kendo网格的MVC剃刀形式 . 网格有一个异步图像上传器 .

@(Html.Kendo().Grid<CraftStore.Models.Catalog>()
.Name("CatalogGrid")
.Columns(columns =>
{
    columns.Bound(p => p.CatalogName).Filterable(true).Width(240);
    columns.Bound(p => p.CatalogDescription).Filterable(true).Width(340);
    columns.Bound(p => p.ModelNumber).Filterable(true).Width(110);
    columns.Bound(p => p.SerialNumber).Filterable(true).Width(110);
    columns.Bound(p => p.InventoryCount).Filterable(true).Width(110);
    columns.Bound(p => p.WebPrice).Title("Price").Format("{0:C}").EditorTemplateName("Currency").Width(110);
    columns.Bound(p => p.ImagePath).ClientTemplate("<img height='80' src='" + Url.Content("~/Content/Images/catalog/Products/") + "#=data.ImagePath#' title='#=data.ImagePath#' alt='#=data.CatalogName#' />").EditorTemplateName("Image").Title("Picture").Width(300);
    columns.Command(command => command.Destroy()).Width(110);
})
.ToolBar(toolbar =>
{
    toolbar.Create();
    toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Filterable(filterable => filterable
    .Extra(false)
    .Operators(operators => operators
        .ForString(str => str.Clear()
            .Contains("Contains")
            .StartsWith("Starts with")
            .IsEqualTo("Is equal to")
            .IsNotEqualTo("Is not equal to"))
        .ForNumber(num => num.Clear()
            .IsEqualTo("Is equal to")
            .IsNotEqualTo("Is not equal to")
            .IsGreaterThan("Greater than")
            .IsLessThan("Greater than"))
    ))
.Navigatable()
.Selectable(selectable => selectable.Type(GridSelectionType.Row))
.Scrollable(scrollable => 
{
        scrollable.Virtual(true);
        scrollable.Height(400);
})
.Events(events =>
{
    events.Change("change");
})
.DataSource(dataSource => dataSource
    .Ajax()
    .Batch(true)
    .PageSize(20)
    .Model(model =>
        {
            model.Id(p => p.Id);

        }
        )
    .Events(events =>
    {
        events.Error("error_handler");
    })
    .Create("CatalogEditing_Create", "WebCatalog")
    .Read("CatalogEditing_Read", "WebCatalog")
    .Update("CatalogEditing_Update", "WebCatalog")
    .Destroy("CatalogEditing_Destroy", "WebCatalog")
)
)

一切正常! - 图像有文件名的工具提示...上传和删除工作很棒......

我有一个图像的编辑模板(Views / Shared / EditorTemplates中的image.cshtml)

模板是:

@model string 

<div style="width:100%">
    <div class="section">
        @Html.TextBoxFor(model => model, new {@class="k-textbox result-box" })
         @(Html.Kendo().Upload()
          .Name("files")
          .Events(events=>events.Success("OnUploadSuccess"))
          .Multiple(false)
          .Async(a => a
             .Save("Save", "Upload")
             .Remove("Remove", "Upload")
             .AutoUpload(true)
          )
      )
    </div>
</div>

OnUploadSuccess js函数(在剃刀视图中定义)具有成功函数

<script type="text/javascript">
    //file upload scripts
    function getFileInfo(e) {
        return $.map(e.files, function (file) {
            var info = file.name;

            // File size is not available in all browsers
            if (file.size > 0) {
                 info += " (" + Math.ceil(file.size / 1024) + " KB)";
            }
            return info;
         }).join(", ");
     }

     function OnUploadSuccess(e) {
            $(".result-box").value = getFileInfo(e);
            Model = getFileInfo(e);
     }

一切正常 - 变量'Model'确实得到了正确的文件名 .

现在...

如何将getFileInfo(e)返回的文件名值作为网格列的当前值?

我认为'模型'会起作用,但事实并非如此 .

Model = getFileInfo(e); 
//since this is in a template, I thought it would bind 'Model' to the column

然后,你可以看到上面,在OnUploadSuccess中,我也认为可以通过使用jQuery来完成:

$(".result-box").value = getFileInfo(e);

jQuery确实找到并设置了值,但是名为ImagePath的行的成员永远不会得到结果值 .

既不工作,我不知道如何将返回的文件名作为列值 .

任何帮助赞赏 .

UPDATE:

好吧,我已经更新了OnUpdateSuccess js函数:

var fn = getFileName(e);
$("#ImagePath").val(fn)

现在这会更新字段 - 但是当您跳出字段或立即点击保存时,这不会保存 . 在任何一种护理中,都会恢复旧值 .

我如何让它留下来?我想这是MVVM绑定有用的地方吗?

1 回答

  • 0

    在使用Telerik的惊人支持后,我说得对 - 这是一个绑定问题,因为MVVM不知道我的更改 . 为了让它了解我的更改,我需要在上面的脚本更改后添加一行:

    $("#ImagePath").trigger("change");
    

    现在,它完美无缺!

相关问题