我有一个带有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 回答
在使用Telerik的惊人支持后,我说得对 - 这是一个绑定问题,因为MVVM不知道我的更改 . 为了让它了解我的更改,我需要在上面的脚本更改后添加一行:
现在,它完美无缺!