Question

我已经实现了一些代码来将crud操作添加到我的mvc应用程序中。我对编辑项目的看法是：

<div id='myModal' class='modal fade in'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='myModalContent'></div>
        </div>
    </div>
</div>
@foreach (var p in @Model.Photos)
{
    <div class="pull-right">
        @Html.NoEncodeActionLink("<span class='glyphicon glyphicon-star'></span>", "Add", "Create", "Photo"
            , new { id = p.PhotoId }
            , new { data_modal = "", @class = "btn btn-danger" })
}

用于处理按钮的

modalform.js脚本：

$(function () {
    $.ajaxSetup({ cache: false });
    $("a[data-modal]").on("click", function (e) {
        $('#myModalContent').load(this.href, function () {
            $('#myModal').modal({
            /*backdrop: 'static',*/
                keyboard: true
            }, 'show');
            bindForm(this);
        });
        return false;
    });
});
function bindForm(dialog) {
    $('form', dialog).submit(function () {
        $('#progress').show();
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                if (result.success) {
                    $('#myModal').modal('hide');
                    $('#progress').hide();
                    location.reload();
                } else {
                    $('#progress').hide();
                    $('#myModalContent').html(result);
                    bindForm(dialog);
                }
            }
        });
        return false;
    });
}

现在我想将上传图片功能添加到我的部分视图中。我编辑了部分视图并阅读了有关js上传文件的一些信息。我知道我需要将$(this).serialize()替换为FormData($('form-group').get(0))。但我不知道如何将表单数据与其他字段合并。有人可以帮我这么做吗？下面显示了我的部分观点之一：

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <div class="modal-body">
        <div class="form-horizontal">
            <div class="form-group">
                @Html.LabelFor(m => Model.Name, new { @class = "control-label col-sm-3" })
                <div class="col-sm-9">
                    @Html.TextBoxFor(m => m.Name, new { @class = "form-control required"})
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(m => Model.Description, new { @class = "control-label col-sm-3" })
                <div class="col-sm-9">
                    @Html.TextBoxFor(m => m.Description, new { @class = "form-control required"})
                </div>
           </div>
        <div class="form-group" enctype="multipart/form-data">
            <div style="position:relative;">
                <label>Image</label>
                <a class='btn' href='javascript:;'>
                    Choose the faile...
                    <input type="file" name="Image" size="40"
                           style="position:absolute;z-index:2;top:0;
                                    left:0; filter: alpha(opacity=0); opacity:0;
                                    background-color:transparent;color:transparent;"
                       onchange='$("#upload-file-info").html($(this).val());'>
                </a>
            <span class='label label-info' id="upload-file-info"></span>
        </div>
        @if (Model.ImageData == null)
        {
            <div class="form-control-static">No image</div>
        }
        else
        {
            <img class="img-thumbnail" width="150" height="150"
                 src="@Url.Action("GetImage", "Photo",
                        new { Model.UserId })" />
        }
            </div>
            <div class="form-group">
                <div class="col-sm-9 col-sm-offset-3">
                    <h3>
                        <span class="label label-success">
                        Are you sure to create this photo?
                        </span>
                    </h3>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal">No</button>
        <input class="btn btn-success" type="submit" value="Yes" />
    </div>

我想在控制器中获取HttpPostedFileBase个对象。现在它始终为空。非常感谢你帮助我！

上传twitter bootstrap模式中的文件

0 个答案: