web-dev-qa-db-ja.com

multipart / form-dataでASP.NET MVC Ajaxフォームポストを実行する方法

私はASP.NET MVC Webサイトで作業しています

<form enctype="multipart/form-data" method="post" action='<%= Url.Action("Post","Entries",new {id=ViewData.Model.MemberDetermination.DeterminationMemberID})  %>'>

代わりにASP.NET MVC Ajaxフォームポストを行うためにこれをどのように書くのですか？

asp.nethtmlasp.net-mvc
24
dswatik
  1. いくつかの追加のアップローダーを使用できます（例 jQuery multiple file uploader ）（私はこの方法を好み、MS Ajaxは使用しないことを好みます）

  2. 使用する：

    AjaxHelper.BeginForm("Post", "Entries", new {id=ViewData.Model.MemberDetermination.DeterminationMemberID}, new AjaxOptions(){/*some options*/}, new {enctype="multipart/form-data"})

しかし、2番目のケースでは、それが機能するかどうかわかりません。

6
zihotki

可能ですが、長い道のりです。ステップ1：フォームを書く

例：

_@using (Ajax.BeginForm(YourMethod, YourController, new { id= Model.Id }, new AjaxOptions {//needed options }, new { enctype = "multipart/form-data" }))
{
    <input type="file" id="image" name="image" />
    <input type="submit" value="Modify" />
}
_

ステップ2：リクエストをインターセプトしてサーバーに送信する

_<script type="text/javascript">
    $(function() {
        $("#form0").submit(function(event) {
            var dataString;
            event.preventDefault();
            var action = $("#form0").attr("action");
            if ($("#form0").attr("enctype") == "multipart/form-data") {
                //this only works in some browsers.
                //purpose? to submit files over ajax. because screw iframes.
                //also, we need to call .get(0) on the jQuery element to turn it into a regular DOM element so that FormData can use it.
                dataString = new FormData($("#form0").get(0));
                contentType = false;
                processData = false;
            } else {
                // regular form, do your own thing if you need it
            }
            $.ajax({
                type: "POST",
                url: action,
                data: dataString,
                dataType: "json", //change to your own, else read my note above on enabling the JsonValueProviderFactory in MVC
                contentType: contentType,
                processData: processData,
                success: function(data) {
                    //BTW, data is one of the worst names you can make for a variable
                    //handleSuccessFunctionHERE(data);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    //do your own thing
                    alert("fail");
                }
            });
        }); //end .submit()
    });
</script>
_

ステップ3：ajax呼び出しを行うため、おそらくいくつかの画像または_multipart/form-data_の何かを置き換えたい

例：

_handleSuccessFunctionHERE(data)
{
    $.ajax({
        type: "GET",
        url: "/Profile/GetImageModified",
        data: {},
        dataType: "text",
        success: function (MSG) {
            $("#imageUploaded").attr("src", "data:image/gif;base64,"+msg);
        },
        error: function (msg) {
            alert(msg);
        }
    });
}
_

MSG変数はbase64で暗号化された文字列です。私の場合は、画像のソースです。

このようにして、プロフィール写真を変更し、その後すぐに写真を更新しました。また、必ずApplication_Start（global.asax）ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());を追加してください。

追伸：このソリューションは機能しますので、詳細についてはお気軽にお問い合わせください。

34
Demian Flavius

私はこの小さなハックに出会いましたが、それはうまく解決します

window.addEventListener("submit", function (e) {
    var form = e.target;
    if (form.getAttribute("enctype") === "multipart/form-data") {
        if (form.dataset.ajax) {
            e.preventDefault();
            e.stopImmediatePropagation();
            var xhr = new XMLHttpRequest();
            xhr.open(form.method, form.action);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    if (form.dataset.ajaxUpdate) {
                        var updateTarget = document.querySelector(form.dataset.ajaxUpdate);
                        if (updateTarget) {
                            updateTarget.innerHTML = xhr.responseText;
                        } 
                    }
                }
            };
            xhr.send(new FormData(form));
        }
    }
}, true);
33
James 'Fluffy' Burton

jquery forms plugin は、この方法で file uploads をサポートします。

5
Marc Gravell

私が使用したコードとそれは動作します!! @James 'Fluffy' Burtonソリューションのコピーです。 MVCに不慣れな人でもすぐに結果を理解できるように、私は彼の答えを即興で作りました。

私の見解は次のとおりです。

@using (Ajax.BeginForm("FileUploader", null, new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "AjaxUpdatePanel" }, new { enctype = "multipart/form-data", id = "frmUploader" })){
<div id="AjaxUpdatePanel">     
    <div class="form-group">
        <input type="file" id="dataFile" name="upload" />
    </div>

    <div class="form-group">
        <input type="submit" value="Upload" class="btn btn-default" id="btnUpload"/>
    </div>

</div>}

<script>
window.addEventListener("submit", function (e) {
    var form = e.target;
    if (form.getAttribute("enctype") === "multipart/form-data") {
        if (form.dataset.ajax) {
            e.preventDefault();
            e.stopImmediatePropagation();
            var xhr = new XMLHttpRequest();
            xhr.open(form.method, form.action);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    if (form.dataset.ajaxUpdate) {
                        var updateTarget = document.querySelector(form.dataset.ajaxUpdate);
                        if (updateTarget) {
                            updateTarget.innerHTML = xhr.responseText;
                        }
                    }
                }
            };
            xhr.send(new FormData(form));
        }
    }
}, true);

私のコントローラーは次のとおりです。

[HttpPost]
    public JsonResult FileUploader(HttpPostedFileBase upload)
    {
        if (ModelState.IsValid)
        {
            if (upload != null && upload.ContentLength > 0)
            {

                if (upload.FileName.EndsWith(".csv"))
                {
                    Stream stream = upload.InputStream;
                    DataTable csvTable = new DataTable();
                    using (CsvReader csvReader = new CsvReader(new StreamReader(stream), true))
                    {
                        csvTable.Load(csvReader);
                    }
                }
                else
                {
                    return Json(new { dataerror = true, errormsg = "This file format is not supported" });
                }
            }
            else
            {
                return Json(new { dataerror = true, errormsg = "Please Upload Your file" });
            }
        }
        return Json(new { result = true });
    }

上記のコードの簡単なメモを次に示します。Ajaxを介して、Excel（* .csv）ファイルをサーバーに投稿し、Nugetパッケージ（LumenWorksCsvReader）を使用してDataTableに読み取りました。

ほら！できます。ありがとう@ジェームス

5
Karthick Jayaraman

実際に自分で質問に答えました...

<% using (Ajax.BeginForm("Post", "Entries", new { id = ViewData.Model.MemberDetermination.DeterminationMemberID }, new AjaxOptions { UpdateTargetId = "dc_goal_placeholder" }, new { enctype = "multipart/form-data" }))
2
dswatik

OnSuccess AjaxOptionを使用する必要がある場合、および/またはコントローラーでRequest.IsAjaxRequest()を使用して、要求タイプを確認します。

_@using (Ajax.BeginForm("FileUploader", null, new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "elementToUpdate", OnSuccess = "mySuccessFuntion(returnedData)", OnFailure = "myFailureFuntion(returnedData)"}, new { enctype = "multipart/form-data" }))
_

その後、次のコードを使用できます（@James 'Fluffy' Burtonの回答を変更しました）。これにより、応答テキストがJSONオブジェクトに変換できる場合も変換されます（必要に応じてこれを省略できます）。

_<script>
if(typeof window.FormData === 'undefined') {
    alert("This browser doesn't support HTML5 file uploads!");
}
window.addEventListener("submit", function (e) {
    var form = e.target;
    if (form.getAttribute("enctype") === "multipart/form-data") {
        if (form.dataset.ajax) {
            e.preventDefault();
            e.stopImmediatePropagation();
            var xhr = new XMLHttpRequest();
            xhr.open(form.method, form.action);
            xhr.setRequestHeader("x-Requested-With", "XMLHttpRequest"); // this allows 'Request.IsAjaxRequest()' to work in the controller code
            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                    var returnedData; //this variable needs to be named the same as the parameter in the function call specified for the AjaxOptions.OnSuccess
                    try {
                        returnedData = JSON.parse(xhr.responseText); //I also want my returned data to be parsed if it is a JSON object
                    }catch(e){
                        returnedData = xhr.responseText;
                    }
                    if (form.dataset.ajaxSuccess) {
                        eval(form.dataset.ajaxSuccess); //converts function text to real function and executes (not very safe though)
                    }
                    else if (form.dataset.ajaxFailure) {
                        eval(form.dataset.ajaxFailure);
                    }
                    if (form.dataset.ajaxUpdate) {
                        var updateTarget = document.querySelector(form.dataset.ajaxUpdate);
                        if (updateTarget) {
                            updateTarget.innerHTML = data;
                        }
                    }
                }
            };
            xhr.send(new FormData(form));
        }
    }
}, true);
</script>
_

N.B. javascript関数eval()を使用して、文字列を関数に変換します...より良い解決策があれば、コメントしてください。また、JQuery JSON.parse()も使用しているため、これはバニラのjavascriptソリューションではありませんが、スクリプトを機能させる必要がないため、削除できます。

1
oli_taz

マルチパートenctypes/MVCでのファイルアップロードに@Ajax.BeginFormを使用するのにまだ問題がある場合

診断と提案された解決策

@Ajax.BeginFormヘルパーによって生成されたフォーム要素で「Inspect element」ツールを実行すると、ヘルパーが、不可解なことに、指定されたコントローラーパラメーターをオーバーライドすることがわかります。これは、部分的なポストバック用に別のコントローラーを実装した場合です。

問題の簡単な解決策は、htmlアクション属性値を/<yourcontrollername>/<youractionname>として明示的に指定することです。

例

@using (Ajax.BeginForm("", "", new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "<TargetElementId>", InsertionMode = InsertionMode.Replace }, new { enctype = "multipart/form-data", action = "/<Controller>/<Action>" }))
1
user3083619

Bradの回答では応答を処理する方法が提供されず、Amirhosseinが2つのポストバックを引き起こしていたため、Brad Larsonの回答とAmirhossein Mehrvarziを混合しました。送信する前にモデル検証を呼び出すために（$（ '＃formBacklink'）。valid（））を追加しました。

window.addEventListener("submit", function (e) {
        if ($('#formBacklink').valid()) {
            var form = e.target;
            if (form.getAttribute("enctype") === "multipart/form-data") {
                if (form.dataset.ajax) {
                    e.preventDefault();
                    e.stopImmediatePropagation();

                    var dataString;
                    event.preventDefault();
                    var action = $("#formBacklink").attr("action");
                    if ($("#formBacklink").attr("enctype") == "multipart/form-data") {
                        //this only works in some browsers.
                        //purpose? to submit files over ajax. because screw iframes.
                        //also, we need to call .get(0) on the jQuery element to turn it into a regular DOM element so that FormData can use it.
                        dataString = new FormData($("#formBacklink").get(0));
                        contentType = false;
                        processData = false;
                    } else {
                        // regular form, do your own thing if you need it
                    }
                    $.ajax({
                        type: "POST",
                        url: action,
                        data: dataString,
                        dataType: "json", //change to your own, else read my note above on enabling the JsonValueProviderFactory in MVC
                        contentType: contentType,
                        processData: processData,
                        success: function (data) {
                            //BTW, data is one of the worst names you can make for a variable
                            //handleSuccessFunctionHERE(data);   
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            //do your own thing       
                        }
                    });
                }
            }
        }
    }, true);
1
Claudio

Evalの代わりにこのコードを使用できます

  var body = "function(a){ " + form.dataset.ajaxSuccess + "(a) }";
  var wrap = s => "{ return " + body + " };"
  var func = new Function(wrap(body));
  func.call(null).call(null, returnedData);
0
Abdullah Sheikh

Ajax.BegineForm（）はマルチパートフォームデータで動作し、同じものの動作コードの例を次に示します。

表示：

@using(Ajax.BeginForm("UploadFile","MyPOC",
        new AjaxOptions { 
            HttpMethod = "POST"
        }, 
        new 
        {
            enctype = "multipart/form-data"
        }))
    {
        <input type="file" name="files" id="fileUploaderControl" />
        <input type="submit" value="Upload" id="btnFileUpload" />
    }

コントローラーアクションメソッド：

public void UploadFile(IEnumerable<HttpPostedFileBase> files)
    {
        HttpPostedFileBase file = files.FirstOrDefault(); //Attach a debugger here and check whether you are getting your file on server side or null.
        if (file != null && file.ContentLength > 0)
        {
            //Do other validations before saving the file

            //Save File
            file.SaveAs(path);
        }
    }

追伸ファイルアップローダーコントロールの「name」属性と、ActionメソッドUploadFile（）に渡されるパラメーターの名前が同じである必要があります（この場合は「files」）。

0
Rachit Pandey

私の小さな調査から。上記のすべての答えは、Ajax.BeginFormで抱えている問題に応じて正しいようです。ただし、場合によっては問題が〜/ Scripts/jquery.unobtrusive-ajax.min.js javascriptライブラリにあることがわかりました。そのため、私の場合はビューモデルから削除し、代わりにHTMLフォームと共に必要なJQueryフォームプラグインを使用することにしました。これは上で提案されています。

0
Godwin Larry