在 Webmatrix 中自定义 FileUpload Helper

Question

我一直在尝试自定义 Webmatrix 中的 FileUpload 助手。通过将 'includeFormTag' 设置为 false 并设置我自己的表单标签，成功地使用 Bootstrap 设置了我的提交按钮的样式，我真的很想在输入旁边放置提交按钮。

我的代码如下。有人可以告诉我如何实现吗？

非常感谢

<div class="input-group">
 <form method="post" name="myForm" enctype="multipart/form-data">
        @FileUpload.GetHtml(
        initialNumberOfFiles:1,
        allowMoreFilesToBeAdded:false,
        includeFormTag:false) 
    <span class="input-group-btn">
        <button class="btn btn-primary" type="submit" name="myButton">Upload</button>
    </span>
 </form>
</div>

Answer 1

不要使用 FileUpload 助手。它根本不提供任何价值。事实上，它阻碍了，因为它在 div 中输出文件上传控制，这很难访问，因此在不使用 jQuery 或类似的情况下影响其行为。请改用 <input type="file" />。然后按照Bootstrap documentation for inline forms。

<form method="post" name="myForm" enctype="multipart/form-data" role="form" class="form-inline"> <div class="form-group"> <input type="file" name="file" /> </div> <button class="btn btn-primary" type="submit" name="myButton">Upload</button> </form>

在 Webmatrix 中自定义 FileUpload Helper

Customise FileUpload Helper in Webmatrix

file-upload

webmatrix

twitter-bootstrap