1

私は ASP.NET MVC3 アプリケーションに取り組んでいます。@HTML.BeginForm私のメイン ビューには、ほぼすべてのマークアップが1 つしかありません。部分的には、すべての情報を一度に送信したいためです。テキスト、画像などがあり、ユーザーが [保存] をクリックするとすべてが保存されます。

ただし、画像を扱うときは、ユーザーが何度でも画像を追加/削除できるようにしたいのですが、永続的に保存される情報は、フォーム送信時に取得するものでなければなりません。そのため、画像をサーバーにアップロードしてビューに表示する方法を模索していますが、フォームを使用せずにこれが可能かどうか疑問に思っています。

多分ある種のAjaxだと思います。今のところ私はこれを持っています：

<span class="document-image-frame">
        <input type="file" name="file" id="file"/>
        @Html.ActionLink("Upload Picture", "UploadPicture", new { documentID = Model[0].DocumentId })

しかし、私が最後にこれに取り組んだのは1週間前で、今では次のように宣言されているコントローラーです:

public ActionResult UploadPicture(HttpPostedFileBase file, FormCollection collection)
        {
         //code goes here...

この例外をスローしています:

Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable.  Please review the following URL and make sure that it is spelled correctly.

しかし、これは、画像にセパレートを使用していたときにこのコードが残ったためだと思い@Html.BeginFormます。

これを行うための MVC3 の方法や、これを作成するために使用できる AJAX ヘルパーはありますか?

4

1 に答える 1

1

ソリューションへのアプローチ方法については、以下をご覧ください。

ステップ 1: 最初にサーバーにイメージを追加/アップロードする

  • 2 つのアクション メソッドを作成して、1 番目はデータを保存し、2 番目は画像をアップロードします。たとえば、 SaveInformationでデータを保存し、UploadPictureで画像をアップロードします。

  • ユーザーがアップロードした画像を表示するコードの部分ビューを作成します。

  • すべての HTML があるメイン ビューで、フォーム タグを作成し、action 属性を割り当てて、SaveInformationアクション メソッドを呼び出します。

  • 画像のアップロード ボタンで呼び出す必要がある JQuery 関数を作成します。この関数では、最初に action 属性を SaveInformation から UploadImage に動的に変更して、サーバーに画像をアップロードできるようにする必要があります。このタスクは、次のようなコードを記述して実行できます。

    var action = "/ControllerName/UploadImage";

    $("#IdOfYourFormTag").attr("action", action);

  • 同じ関数で、JQuery ajax 呼び出しのコードを記述し、アクション メソッド UploadImage にヒットしてサーバーに画像をアップロードするフォームを送信します。同じアクション メソッド UploadImage で、新しい画像パスを渡して部分ビューを更新し、それを ajax 呼び出しの応答として返し、JQuery メソッドで Ajax 呼び出しの成功イベントを処理して部分ビューを更新します。

また、フォームタグにenctype = "multipart/form-dataピースのコードを追加してください。これがないと、ビューからコントローラーに画像を送信できなくなり、UploadImage アクションメソッドに 1 つのパラメーターHttpPostedFileBase FileUploadを追加して、ファイルを取得することもできます。

ステップ 2: 最後にイメージ パスをサーバーに永続的に保存する

  • 画像のパスを格納するImagePathという名前のプロパティを作成します。
  • 画像を表示するために作成した部分ビューに隠しファイルを作成し、それを ImagePath プロパティにバインドします。隠しフィールドをここに配置する背後にある考え方は、画像のアップロード時に新しい画像パスでも更新されるということです。
  • フォームを送信して残りの情報を更新すると、この非表示フィールドから画像のパスも取得され、データベースに保存されます。

それで全部です。これがあなたを助けることを願っています。

まだ質問がある場合は、お気軽にお尋ねください。

編集：

まず最初に、Ajax 呼び出しを使用していないことをお伝えしたいと思います。ajax 呼び出しでは、セキュリティ上の理由から、アップロードする必要があるファイルの代わりに null 値が取得されます。Fileupload は通常の post メソッドで動作するか、いくつかの jquery プラグインを使用する必要があります。

では、まずModel を見てください:

モデルでは、ファイル パスを保持するプロパティを作成しました。

public class InformationModel
{       
    public string ImagePath { get; set; }
    // Your rest of properties
}

意見：

@using (Html.BeginForm("SaveInformation", "Home",null, FormMethod.Post, new { id =   "SaveInformation", enctype = "multipart/form-data" }))
{      
 @Html.HiddenFor(m => m.ImagePath)
<input type="file" name="FileUpload" id="FileUpload" />                   
<input type="button" id="Upload" name="Upload" value="Upload" />    
<input type="submit" id="Submit" name="Submit" value="Submit" /> 
}

上記のコードでは、1 つのファイル アップロード コントロールと 2 つのボタン (ファイルをアップロードするボタン、フォーム全体を送信するボタン)、およびファイル パスを保持する隠しフィールドを持つフォームを作成しました。

ファイルをアップロードするだけで、jquery で次のようなコードを記述しました。

<script type="text/javascript">
$(document).ready(function () {
    $("input#Upload").click(function () {
        $("#SaveInformation").attr("action", "/Home/UploadImage");
        $("#SaveInformation").submit();
    });
});
</script>

上記のコードは、フォーム アクション メソッドをヒットからSaveInformationアクションではなく UploadImage アクション メソッドに変更し、フォームを送信するだけです。

コントローラ：

    [HttpPost]
    public ActionResult UploadImage(InformationModel model, HttpPostedFileBase FileUpload)
    {
        //First write your code here to Upload the image
        string path = "/YourVirtualDirectoryPath/"; 
        path = System.IO.Path.Combine(Server.MapPath(path), FileUpload.FileName);
        FileUpload.SaveAs(path);

        model.ImagePath = path;
        //If you need to maintain the entire model you can do it like this or you can just assign the file path to the temp session 
        //and redirect to SaveInformation get method.
        this.TempData["FilePath"] = model;
        return RedirectToAction("SaveInformation");
    }

上記の方法では、ファイルをアップロードし、画像パスを ImagePath プロパティに割り当て、モデルを一時セッション データに割り当てて、モデル値を保持し、コントロールを "SaveInformation" get メソッドにリダイレクトしました。これは、読み込みに使用しています。私たちのメインフォーム。

   [HttpGet]
    public ActionResult SaveInformation()
    {
        InformationModel model = null;
        if (this.TempData["FilePath"] != null)
        {
            model = (InformationModel)TempData["FilePath"];
        }
        else
        {
            model = new InformationModel();
        }
        return View(model);
    }

上記のアクション メソッドには単純なロジックが含まれており、リクエストが UploadImage アクション メソッドからのものである場合は、一時セッション データからモデルを埋めるか、新しいインスタンスを作成してビューをロードするだけです。

    [HttpPost]
    public ActionResult SaveInformation(InformationModel model)
    {
        return RedirectToAction("SaveInformation");
    }

上記の方法は、すべての値を保存するだけです。[送信] ボタンをクリックすると、model.ImagePathに、残りの情報と共に保存する必要があるファイル パスが含まれていることがわかります。

問題の解決策が得られることを願っています。

于 2013-06-11T05:37:06.340 に答える