1

Jquery ダイアログで MVC C# を使用しています。POST を実行すると、ダイアログ ボックスではなく通常のページにリダイレクトされます。

私のコードは次のようになります。

内部ビュー:

    <div id="dialog" title="" style="overflow: hidden;">
    </div>

私のクリックイベント内には、次のものがあります。

      $('#dialog').dialog({
                   autoOpen: false,
                   width: 500,
                   resizable: true,
                   title: 'PVT Report',
                   modal: true,           
                   buttons: {
                       "Close": function () {
                       $(this).dialog("close");
                        }
                      }
                  });


       $('#dialog').dialog('open');

                 $.ajax({
                           url: url,
                           type: 'GET',
                           success: function(result) {

                           if (result.success) 
                           {
                             $('#dialog').dialog('close');
                          } 
                           else 
                           {
                              $('#dialog').html(result);
                           }
                         }  
                  });
                 }

URL に問題なくアクセスし、ダイアログ ボックスを表示します。POST を実行すると、ダイアログ ボックスに戻らず、代わりに通常のページに移動します。

以下は私のGETとPOSTです：

     public ActionResult FileUpload(int id)
     {
        var model = new FileUpload { PlNum = id}           
        return PartialView(model);
     }


    [HttpPost]
    public ActionResult FileUpload(HttpPostedFileBase file, FileUpload model)
    {
        // Verify that the user selected a file
        if (file != null && file.ContentLength > 0)
        {
            // extract only the fielname
            var fileName = Path.GetFileName(file.FileName);
            string extension = Path.GetExtension(file.FileName);

            if (extension != ".pdf")
            {
                TempData["ErrMessage"] = "Error, wrong file type. File must be a PDF file.";
                return RedirectToAction("FileUpload", new { id = model.PlNum });
            }

.....

これが私の見解です：

@using (Html.BeginForm("FileUpload", "Plt", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
       @Html.HiddenFor(a => a.PlNum)     
       <p>File upload for Pl# @Model.PlNum</p>
       <input type="file" name="file" />
       <input type="submit" value="OK" />
}

$.ajax でやればいいと思いました。私の問題の 1 つは、redirecttoAction を実行すると、ダイアログ ボックスが開かなくなることだと思います。

いずれにせよ、成功した場合でも成功しなかった場合でも、ダイアログ ボックスに戻りたいと思います。成功すると、「成功しました」というメッセージが表示されます。成功しない場合は、エラー メッセージが表示されます。

4

1 に答える 1

1

私があなたの質問を正しく理解したことを確認するために、答える前に最初にあなたの目標を言い直させてください。私が間違っている場合は訂正してください。

  1. jQueryUIダイアログ内にフォームを含む部分ビューを表示したい
  2. このフォームには、ユーザーが自分のコンピューターからサーバーにファイルを選択してアップロードできるようにするファイルアップロード入力が含まれています
  3. このアップロードをAJAXを使用して非同期で実行する必要があります
  4. アップロードが成功した場合は、ファイルをアップロードしてくれたユーザーに感謝し、jQueryダイアログを閉じます。
  5. リクエスト中にエラーが発生した場合は、ユーザーにエラーメッセージを表示します。たとえば、このフィールドが必須であったとしても、彼がファイルを選択しなかった場合

私があなたの目標のいくつかを理解していなかった場合、あなたは私の答えを読むのをやめ、あなたの質問を更新して、あなたが正確に何を達成しようとしているのかについてのより多くの情報を提供することができます。

ここでの課題は、AJAXリクエストを含むファイルをアップロードすることです。ご存知のように、これは標準的な手法では不可能です。ただし、多くの回避策があります。Uploadifyまたはなどのプラグインを使用するか、それを実現できるFineUploader新しいプラグインHTML5 File APIを使用できます。これは、すべての最新のブラウザーでサポートされています（いいえ、IE9は最新のブラウザーではありません。申し訳ありません）。私たちは2013年にいるので、latsオプションについて説明します。私たちは皆、最新のブラウザーを使用しており、誰もIEについて...を提供していません。

したがって、すべてのASP.NET MVCアプリケーションと同様に、ビューの要件とアップロードフォームに必要な情報を満たすビューモデルを設計することから始めることができます。

public class MyViewModel
{
    public int Id { get; set; }

    [Required]
    public HttpPostedFileBase File { get; set; }
}

次に、プロセスを処理するコントローラーを作成できます。

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Upload(int id)
    {
        var model = new MyViewModel
        {
            Id = id
        };
        return PartialView(model);
    }

    [HttpPost]
    public ActionResult Upload(MyViewModel model)
    {
        if (!ModelState.IsValid)
        {
            // There was a validation error, probably the user didn't select any file
            // we set the status code to 400 (BadRequest) and return the 
            // same partial which will contain the validation error
            Response.StatusCode = (int)System.Net.HttpStatusCode.BadRequest;
            return PartialView(model);
        }

        // at this stage we know that the model is valid => 
        // we could process the uploaded file. In this particular example
        // I am saving the uploaded file to the App_Data folder on the server
        // and ignoring the Id parameter of the view model. Obviously
        // in a more real world application here you might want to store the
        // physical location of this file in your data store as well as it's MIME type
        // so that you could display it later
        var file = Path.Combine(
            Server.MapPath("~/App_Data"), 
            Path.GetFileName(model.File.FileName)
        );
        model.File.SaveAs(file);

        // we have finished => let's set the response status code to 
        // 204 (NoContent) so that the client side javascript that I will show
        // later in my answer could distinguish this case from the error scenario
        Response.StatusCode = (int)System.Net.HttpStatusCode.NoContent;

        // we will return an EmptyResult because in this particular example
        // I don't really care about returning some information to the client
        // from the server. If you care you could of course set the status code 
        // to 200 (Success) and return, say, a JsonResult here
        return new EmptyResult();
    }
}

このコントローラーについてはあまり言われません。かなり標準的なもの。Indexアップロードプロセスを開始するためのリンクを含むダミービューを提供するアクション。アップロードフォームを部分的に提供するUpload（GET）アクションと、もちろんUpload実際のファイルアップロードを処理する（POST）アクション（この非常に単純化された例では、ファイルをサーバーに保存しています）。

次に、対応する~/Views/Home/Index.cshtmlダミービューを作成できます。

@model MyViewModel
@Html.ActionLink(
    "click here to upload a file", 
    "Upload", 
    new { id = 154 }, 
    new { id = "uploadLink" }
)
<div id="dialog"></div>

簡単：jQueryダイアログ内のアップロード部分とダイアログのdivプレースホルダーを表示するために、後で（私の回答の後半を参照）AJAX化されるアンカーを含む強く型付けされたビュー。

~/Views/Home/Upload.cshtml次に、フォーム（ ）を含むアップロードパーシャルを記述できます。

@model MyViewModel

@using (Html.BeginForm(null, null, new { id = Model.Id }, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div>
        @Html.LabelFor(x => x.File)
        @Html.TextBoxFor(x => x.File, new { type = "file" })
        @Html.ValidationMessageFor(x => x.File)
    </div>
    <button type="submit">Upload</button>
}

繰り返しになりますが、ここではかなり標準的なもの=>ユーザーがアップロードするファイルを選択できるようにするファイル入力を含むHTMLフォーム。

そしてもちろん、最後のステップは、これをすべて実現するJavaScriptです。このjavascriptは、_Layoutから上書きしたインデックスビュー内のスクリプトセクションに配置できます。理想的には、スクリプトはドキュメントの最後、終了タグの前に配置する必要があります（これが、ハンドラーサブスクリプションをで</body>ラップしない理由です）。.click()document.ready

$('#uploadLink').click(function () {
    $.ajax({
        url: this.href,
        type: 'GET',
        cache: false,
        success: function (result) {
            $('#dialog').html(result).dialog({
                autoOpen: true,
                width: 500,
                resizable: true,
                title: 'PVT Report',
                modal: true,
                buttons: {
                    'Close': function () {
                        $(this).dialog("close");
                    }
                }
            });
        }
    });
    return false;
});

$('#dialog').on('submit', 'form', function () {
    var xhr = new XMLHttpRequest();
    xhr.open(this.method, this.action);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 204) {
                // upload was successful => thank the user and close
                // the dialog
                alert('Thank you for uploading the file');
                $('#dialog').dialog('close');
            } else if (xhr.status == 400) {
                // validation error occurred on the server => redisplay the form
                $('#dialog').html(xhr.responseText);
            }
        }
    };
    xhr.send(new FormData(this));
    return false;
});

2つのイベントがこのJavaScriptによって処理されます。jQueryダイアログを表示するメインビューのアンカーをクリックし、AJAXリクエストとHTML5ファイルAPIを使用してファイルをアップロードするフォーム送信です。

于 2013-02-04T21:01:39.530 に答える