Question

我想在我的网站上有一个页面，我可以上传文件。对于每个文件，我想要一个名称和一个类别。

[Required(ErrorMessage = "Please choose a file")]
    [Display(Name = "File")]
    public HttpPostedFileBase file { get; set; }

    [Required(ErrorMessage = "A name is required")]
    [Display(Name = "Name")]
    public string name { get; set; }

    [Display(Name ="Category")]
    public string cat { get; set; }

这是我的模特。我想要一些动态表单，我的意思是带有一个按钮的表单，允许用户在页面上添加另一个表单，上传多个文件，每个文件都有一个名称和一个类别。我用Symfony2完成了这个，但我不知道如何用ASP.NET做到这一点。有谁可以帮助我吗？

Answer 1

首先创建另一个模型如下：

public class fileListModel{
    IList<yourModel> fileList {get;set;}
}

然后在剃刀视图中创建这样的形式：

@model fileListModel
<form>
    //dynamic html(you can also use partial for this). When button will be clicked append following html using jquery $(form).append()
    @{var key = [use some random id or guid]}
    <input type="hidden" name="fileList.Index" value="@key" />
    <input type="text" name="fileList[@key].name" value="Name" />
    <input type="text" name="fileList[@key].cate" value="Category" />
    <input type="file" name="fileList[@key].file" value="Upload"/>
    // end dynamic html

    @{ key = [use some random id or guid]}
    <input type="hidden" name="fileList.Index" value="@key" />
    <input type="text" name="fileList[@key].name" value="Name" />
    <input type="text" name="fileList[@key].cate" value="Category" />
    <input type="file" name="fileList[@key].file" value="Upload"/>
    // end dynamic html
</form>

现在创建一个控制器动作方法来接受fileList：

public ActionResult upload(fileListModel fileList){
    //save them to db
}

Answer 2

以下是基于this blogpost的最基本示例。出于演示目的，我将模型命名为Foo。因此，每当您阅读本文时，这应该是具有文件，名称和猫属性的模型。

首先，将https://www.nuget.org/packages/BeginCollectionItem/添加到您的项目中。

然后，将部分视图添加到Views文件夹。我把我的名字命名为“_AddFile.cshtml”：

@model WebApplication2.Models.Foo

@using (Html.BeginCollectionItem("files"))
{
    <div class="form-horizontal">
        <fieldset>
            <div class="form-group">
                @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                </div>

                @Html.LabelFor(model => model.Cat, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Cat, new { htmlAttributes = new { @class = "form-control" } })
                </div>
            </div>
        </fieldset>
    </div>
}

注意，Html.BeginCollectionItem("files")，这是创建一个集合，后来组合在一起并绑定到名为“files”的模型。

我们的控制器如下所示：

public ActionResult Index()
{
    //Initialize the view with an empty default entry
    var vm = new List<Foo> {
        new Models.Foo {
            Cat ="foo",
            Name =" bar"
        }
    };
    return View(vm);
}

//this calls your partial view and initializes an empty model 
public PartialViewResult AddFile()
{
    return PartialView("_AddFile", new Foo());
}

//note "files" name? The same as our collection name specified earlier
[HttpPost]
public ActionResult PostFiles(IEnumerable<Foo> files)
{
    //do whatever you want with your posted model here
    return View();
}

在您看来，请使用以下表单：

@model IEnumerable<WebApplication2.Models.Foo>

@using (Html.BeginForm("PostFiles","Home", FormMethod.Post))
{
    <div id="FileEditor">
        @foreach (var item in Model)
        {
            Html.RenderPartial("_AddFile", item);
        }
    </div>
    <div>
        @Html.ActionLink("Add File", "AddFile", null, new { id = "addFile" }) <input type="submit" value="Finished" />
    </div>

}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script>
        $(function () {
            $("#addFile").click(function () {
                $.ajax({
                    url: this.href,
                    cache: false,
                    success: function (html) { $("#FileEditor").append(html); }
                });
                return false;
            });
        })
    </script>

}

foreach循环为每个模型条目呈现部分视图，在我们的示例中只显示一个具有默认条目的视图。

javascript循环然后调用我们的PartialView并在现有的模板下面呈现一个空模板。

致电提交，然后让您以任何方式处理文件：

<小时/>

如何使用c＃

2 个答案: