2

クライアントを編集できるページがあります。このページでは、クライアントのファイルをアップロードすることもできます。ボタンをクリックすると、jQuery ダイアログが開き、ファイルをアップロードして [保存] をクリックします。

これが私の /Clients/Edit ビューです:

<script type="text/javascript" language="javascript">

    $(document).ready(function () {

        // add file click event
        $("a#addFile").click(function () {
            $.ajax({
                url: '@Url.Content("/ClientFiles/Create/")' + @Model.ClientId,
                context: document.body,
                success: function (data) {
                    // open dialog with Create partial view data
                    $("#dialog-add").html(data).dialog("open");
                }
            });

            return false;
        });


        // add file dialog settings
        $("#dialog-add").dialog({
            modal: true,
            buttons: {
                "Save": function () {
                    $.validator.unobtrusive.parse("#AddFileForm");
                    if ($("#AddFileForm").valid()) {
                        $.post("/ClientFiles/Create", $("#AddFileForm").serialize(),
                            function (data) {
                                $("#dialog-add").dialog("close");   // close dialog
                            });
                    }
                }
            }
        });
    });

</script>

@using (Html.BeginForm("Edit", "Clients", FormMethod.Post))
{
    @Html.HiddenFor(m => m.ClientId)            

    <a id="addFile">Add a new file</a>
    <div id="dialog-add" title="" style="display:none"></div>        

    <input type="submit" value="Save" />            
}

これが私の /ClientFiles/Create 部分ビューです:

@model Models.ClientFileViewModel

@using (Html.BeginForm("Create", "ClientFiles", FormMethod.Post, new { @id = "AddFileForm", enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary(true)

    @Html.HiddenFor(model => model.ClientId)    
    @Html.TextBoxFor(model => model.ModelFile, new { type = "file" })

    @Html.ValidationSummary()
}

ここに私の ClientFileViewModel があります:

public class ClientFileViewModel
{
    [ScaffoldColumn(false)]
    public int ClientFileId { get; set; }

    public int ClientId { get; set; }
    public HttpPostedFile ModelFile { get; set; }
}

そして最後に、私の ClientFilesController メソッド:

public ActionResult Create(int id)
{
    return PartialView(new ClientFileViewModel { ClientId = id  } );
}

public JsonResult Create(ClientFileViewModel viewModel)
{
    if (ModelState.IsValid)
    {
        if (viewModel.ModelFile != null)
        {
            // upload file here
        }
    }

    return Json(new { success = true });
}

に投稿するまで、すべてがうまくいきCreate(ClientFileViewModel viewModel)ます。デバッガーを使用すると、ビュー モデルには が含まれていますがClientId、ModelFilenull です。

ビューモデルでファイルが渡されない原因となっている何か間違ったことをしていますか?

4

1 に答える 1

5

基本クラス（HttpPostedFileBase）を使用する必要があります。つまり、次を置き換えます。

public HttpPostedFile ModelFile { get; set; }

と：

public HttpPostedFileBase ModelFile { get; set; }

ビューモデルで。

そうは言っても、それはあなたの問題の半分にすぎません。フォームを送信するためにAJAXリクエストを使用しているようです。

$.post("/ClientFiles/Create", $("#AddFileForm").serialize(),

AJAXを使用してファイルをサーバーにアップロードすることはできません。この制限を回避するために、ファイル入力フィールドをサポートし、非表示のiframeを生成するjquery.formなどのプラグインを使用できます。したがって、プラグインを使用することにした場合は、次のようにしてAJAXifyすることができます。

"Save": function () {
    $.validator.unobtrusive.parse("#AddFileForm");
    if ($("#AddFileForm").valid()) {
        $("#AddFileForm").ajaxSubmit(function() {
            $("#dialog-add").dialog("close");
        });
    }
}

ファイルをアップロードできる他の人気のあるプラグインは、 Uploadify、Blueimp File Upload、Ajax Upload、...です。

于 2012-04-24T17:29:15.797 に答える