MVC:获取网格列载的文件名后面网格、文件名、后面、MVC

2023-09-10 22:19:14 作者:时光卑微了彼此的承诺

我有一个剑道网格的MVC剃刀形式。网格有一个异步图片上传。

I have an MVC razor form with a Kendo grid. The grid has an asynch image uploader.

@(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")
)
)

所有做工精细! - 图像有文件名的提示... 上传和删除工作大...

All work fine! - the image has a tooltip of the filename... The upload and remove work great...

我有一个图像编辑模板(image.cshtml在查看/共享/ EditorTemplates)

I have an edit template for image (image.cshtml in Views/Shared/EditorTemplates)

模板是:

@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函数(这是在剃刀视图中定义)有成功的功能

The OnUploadSuccess js function (which is defined on the razor view) has the success function

<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);
     }

一切工作正常 - 变量模式也得到了正确的文件名

all works fine - the variable 'Model' does get the correct filename.

现在...

如何获得由getFileInfo(五)返回的文件名值是网格列???

How do I get that filename value returned by getFileInfo(e) to be the current value for the grid column???

我想'模式'会工作,但事实并非如此。

I thought 'Model' would work, but it does not.

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

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

Then, you can see above, in OnUploadSuccess, I also thought it could be done by using jQuery :

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

jQuery的不查找和设置的值,但该行的成员命名的ImagePath从来没有得到结果值。

The jQuery does find and set the value, but the row's member named ImagePath never gets the resulting value.

无论是工作,我不知道如何去得到返回的文件名是列值。

Neither work, and I'm not sure how to get the returned filename to be the column value.

任何帮助AP preciated。

Any help appreciated.

更新:

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

Well, I've updated the OnUpdateSuccess js function:

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

和现在这个更新的领域 - 但这不是或保存,当你卡出了场马上打救。在这两种护理,旧值将被恢复。

And this now updates the field - but this is not saving when you tab out of the field or immediately hit save. In either care, the old value is restored.

我如何得到它留下来吗?我想这是那里的MVVM结合将帮助?

How do I get it to stay? I imagine this is where the MVVM binding will help?

推荐答案

从该的Telerik支持惊人的工作后,我是对的 - 这是有约束力的问题,因为MVVM不知道我的变化。为了得到它知道我的变化,我需要剧本上述变化后添加一行:

After working with the amazing support from Telerik, I was right - it's a binding issue because the MVVM doesn't know about my change. To get it to know about my change I need to add a line after the script change above:

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

现在,它完美的作品!