【问题标题】:List HttpPostedFileBase with knockout列出具有淘汰赛的 HttpPostedFileBase
【发布时间】:2015-11-27 18:23:03
【问题描述】:

我有一个带有表单的创建视图。它有一个输入文本(环境)、输入文件(徽标)下拉列表(平台)和视图模型列表(天)。

这工作正常。现在我想添加一个“动态字段”来插入文件。典型的添加文件、删除文件。我已经看到这是通过淘汰赛完成的。我的问题是如何处理 HttpPostedFileBase 和淘汰赛,最糟糕的是 HttpPostedFileBase 和淘汰赛的列表。

我已经这样做了,但它不起作用。任何帮助将不胜感激。

创建视图:

@model HPRWT.ViewModels.ReportViewModel

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout-2.1.0.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout.namepathbinding.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Files.js")" type="text/javascript"></script>

@using (Html.BeginForm("Create", "Service", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Report</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Enviroment)

            @Html.EditorFor(model => model.Enviroment, new { data_bind = "value: enviroment" })
            @Html.ValidationMessageFor(model => model.Enviroment)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Logo)
            @Html.TextBoxFor(model => model.Logo, new { type = "file", data_bind = "value: logo" })
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.PlatformID)
            @Html.DropDownListFor(model => model.PlatformID, Model.Platforms.Select(f => new SelectListItem { Text = f.name, Value = f.ID.ToString() })) 
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.InputFiles)
            @for (int j = 0; j < Model.InputFiles.Count; j++)
            {
                @Html.TextBoxFor(model => model.InputFiles[j], new { type = "file", data_bind = "value: inputFile"  })
            }
            <button data-bind="click: addFile">Add Log</button>
            <button data-bind="click: removeFile">Remove Log</button>
        </div>

        <table id="hours">
            @for (int i = 0; i < 7; i++)
            {
                <tr>
                    <td>@Model.Days[i].Label</td>
                    @for (int j = 0; j < 24; j++)
                    {
                        <td><div>@Html.CheckBoxFor(model => model.Days[i].Hours[j].Selected)@Html.LabelFor(model => model.Days[i].Hours[j].Selected, @" ")</div></td>
                    }
                </tr>
            }
        </table>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

Files.js

function createViewModel() {

    var createFile = function () {
        return {
            inputFile: ko.observable()
        };
    };

    var addFile = function () {
        inputFiles.push(createFile());
    };

    var removeFile = function () {
        inputFiles.pop();
    };

    var enviroment = ko.observable();
    var logo = ko.observable();
    var inputFiles = ko.observableArray();

    return {
        enviroment: enviroment,
        logo: logo,
        inputFiles: inputFiles,
        addFile: addFile,
        removeFile: removeFile
    };

}

$(document).ready(function () {
    var viewModel = createViewModel();
    ko.applyBindings(viewModel);
});

ReportViewModel:

public class ReportViewModel
    {

        public int ID { get; set; }
        public IEnumerable<Platform> Platforms { get; set; }
        public int PlatformID { get; set; }
        public string Enviroment { get; set; }
        public HttpPostedFileBase Logo { get; set; }
        public IList<HttpPostedFileBase> InputFiles { get; set; }
        public IList<DayViewModel> Days { get; set; }


        public ReportViewModel()
        {
            Days = Enumerable.Range(1, 7).Select(day => new DayViewModel { Value = day }).ToList();
            InputFiles = new List<HttpPostedFileBase>();
        }

    }

DayViewModel:

public class DayViewModel
    {

        public int Value { get; set; }    
        public virtual IList<HourViewModel> Hours { get; set; }

        public DayViewModel()
        {
            Hours = Enumerable.Range(0, 24).Select(hour => new HourViewModel { Value = hour }).ToList();
        }

    }

HourViewModel:

public class HourViewModel
{
    public int Value { get; set; }
    public bool Selected { get; set; }
}

【问题讨论】:

  • 您是尝试通过敲除显示文件还是尝试上传文件?

标签: asp.net-mvc-3 knockout.js


【解决方案1】:

尝试制作 InputFiles 数组而不是 IList

我不确定 IList 但是当您将属性作为 List 时,您必须将 html 字段 name 保留为 fieldlist.propname.index (和 Id 将是 fieldlist_propname_index),您的索引将从 0 开始作为默认或第一个字段,当您添加新控件时,其名称应该像 fieldlist.propname 一样递增。 0(第一个)然后 fieldlist.propname.1 等等... 那么只有模型绑定器才能绑定。

如果 Array 可行,最好尝试一下,那么我认为你很好

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-03-27
    • 2014-03-07
    • 1970-01-01
    • 2012-08-08
    • 1970-01-01
    相关资源
    最近更新 更多