将文本框绑定到 Telerik 上传控件 MVC3答案

【问题标题】：Binding text box to telerik upload control MVC3将文本框绑定到 Telerik 上传控件 MVC3
【发布时间】：2012-10-01 23:56:56
【问题描述】：

我希望我的文本框显示 Telerik 上传控件选择的文件名。请在下面找到代码 sn-p。

<td>
@Html.TextBox(txtBox, null, new { style = string.Format("width:200px") })
</td>
<td style="padding-top: 1%; padding-left: 8%">
@(Html.Telerik().Upload().Name(BrowseButton)
//.HtmlAttributes(new { @class = "myCustomClass" }).Multiple(false))

当前文本框显示为空。

【问题讨论】：

标签： asp.net-mvc-3 upload textbox telerik

【解决方案1】：

Telerik 控件应该允许您显示文件名。您多余的文本框似乎是多余的。

阅读telerik documentation，特别是html and css section。上面写着：

在上传过程中和上传之后，会显示一个文件列表，其中显示每个上传文件的进度和状态。它的 HTML 输出如下：

<ul class="t-upload-files t-reset">
    <li class="t-file">
        <span class="t-icon t-success">uploaded</span>
        <span class="t-filename">some-uploaded-file.jpg</span>
        <button class="t-button t-button-icontext t-upload-action" type="button">
                 <span class="t-icon t-delete"></span>Remove</button>
    </li>
    <li class="t-file">
        <span class="t-icon t-fail">failed</span>
        <span class="t-filename">some-failed-file.jpg
            <span class="t-progress">
         <span style="width: 75%;" class="t-progress-status">
            </span></span>
        </span>
        <button class="t-button t-button-icontext t-upload-action" type="button">
                    <span class="t-icon t-retry"></span>Retry</button>
    </li>
</ul>

如果您想更新自己的文本框，只需在创建 Telerik 控件时添加它即可使用他们的客户端 api

@(Html.Telerik().Upload().Name(BrowseButton)
.ClientEvents(events => events.OnSelect("onSelect"))

在你的 javascript 中

function onSelect(e) {
        // Array with information about the uploaded files
        $('#yourTextboxId').val(e.files[0].name);  
    }

同样，所有详细信息都在documentation 中。

【讨论】：

我同意文件名显示在控件下方。但是我只想在相邻的文本框中显示该文件名。有没有办法我可以做到这一点。
@user1737742 不客气，感谢您接受回答。我看到你今天才加入，所以我不认为习惯上也赞成你认为有用的答案，就在你接受答案的地方。投票是 SO 起作用的原因。