web-dev-qa-db-ja.com

ASP.Net Core MVCでAJAXを使用してフォームを送信します

ASP.Net Core 2.1を使用していて、ページを更新せずに、URLを返しながらファイルをアップロードしようとしています。

_RenderPartial（ "scripts"）がページの最後にすべてのスクリプトをレンダリングするため、かみそりビューでスクリプトタグを直接使用しても機能しないため、site.jsにJavaScriptを記述しようとしています。次に、それをsite.jsに追加すると、サイトビュー全体でスクリプトを呼び出す機会が得られます。

コントローラのアクションは次のようになります。

    [HttpPost]
    [DisableRequestSizeLimit]
    public async Task<IActionResult> Upload()
    {
      // Read & copy to stream the content of MultiPart-Form
      // Return the URL of the uploaded file
      return Content(FileName);
    }

私の見解は次のようになります：

<form id="FileUploadForm" action="~/Resources/Upload" method="post" enctype="multipart/form-data">
<input name="uploadfile" type="file" />
<button name="uploadbtn" type="submit" onclick="SubmitForm(this.parentElement, event)">Upload</button>

現在、site.jsは次のようになっています。

function SubmitForm(form, caller) {
caller.preventDefault();
$.ajax(
    {
        type: form.method,
        url: form.action,
        data: form.serialize(),
        success: function (data) { alert(data); },
        error: function (data) { alert(data); }
    })}

現在、コードはスクリプト全体をバイパスし、ファイルがアップロードされ、ファイル名を表示する新しいビューが返されます。 JavaScriptを作成するのに助けが必要です。

javascriptjqueryfile-uploadasp.net-coreasp.net-core-mvc-2.1
6
Praveen Rai

私のために働いたコードを共有し、@ Shyjuの答えを実装します。

表示（かみそりのページ）：

<form name="UploadForm" action="~/Resources/Upload" method="post" enctype="multipart/form-data">
<input name="uploadfile" type="file" />
<button name="uploadbtn" type="submit" onclick="SubmitForm(this.parentElement, event)">Upload</button>

Site.jsに追加されたAJAXコード（再利用可能にするため）：

// The function takes Form and the event object as parameter
function SubmitForm(frm, caller) {
caller.preventDefault();

var fdata = new FormData();

var file = $(frm).find('input:file[name="uploadfile"]')[0].files[0];
fdata.append("file", file);

$.ajax(
    {
        type: frm.method,
        url: frm.action,
        data: fdata, 
        processData: false,
        contentType: false,
        success: function (data) {
            alert(data);
        },
        error: function (data) {
            alert(data);
        }
    })

};

1
Praveen Rai