1

mvc プロジェクトに jquery モーダル ポップアップを追加することを検討しています。http://www.weirdlover.com/2010/05/20/mvc-render-partial-modal-pop-up-via-jquery-and-colorbox-demo/の投稿を見てきました。

私のシナリオ: いくつかの入力フィールド (テキストボックス、チェックボックス) を持つページがあります。モーダルポップアップを開いて画像を選択するリンクが必要です。すべての画像を表示し、ユーザーが画像を選択できるようにするコントロールがあります。上記のサイトに従ってモーダル ポップアップを開く方法を理解しました。

私が今理解していないのは、選択した画像名 (myimage.jpg) を元のページ ビューに戻し、それをモデルのプロパティに設定し、他のすべてのモデルの変更をそのまま維持する方法です。

私が現在持っているもの: MyFormController > ActionMethod:ImageSelected(ImageSelectorModel モデル)

有効な場合、「MyFormModel」を (他のすべての変更と共に) 取得し、MyFormModel.ImageName = model.ImageName を設定して、View(myFormModel) を呼び出すにはどうすればよいですか。

ご協力いただきありがとうございます

ケビン

4

3 に答える 3

0

ユーザーが画像をアップロードしている場合は、AJAX Upload（http://valums.com/ajax-upload/ ）を確認することをお勧めします。画像ファイルを非同期で取得してディスクに保存し、保存した画像パス（など）をJsonResultとして返すことができます。javascriptは次のようになります。

new AjaxUpload('image-input', {
    action: '/Photo/Add',
    onComplete: function (file, response) {
        //using Fowler's json2
        var photo = JSON.parse(response);

        if (photo.IsValid) {
            //do what you want with your photo
            //photo.Path should contain the saved image's location
        }
        else {
            alert("Sorry. You tried to upload an invalid file.");
        }
    }
});

そしてあなたのフォトコントローラーで：

    [HttpPost]
    public JsonResult Add(HttpPostedFileBase UserFile)
    {
        if (UserFile == null)
        {
            //something bad happened, no file
        }

        string filePath = "/Path/To/Image/Image.jpg";

        //this isn't unit test friendly.
        //just quick and dirty:
        string fullPath = HostingEnvironment.MapPath(filePath);
        UserFile.SaveAs(fullPath);

        var model = new JsonPhotoAdd
        {
            IsValid = true,
            Path = filePath
        };

        return Json(model, "text/html");
    }

注意：ブラウザは非同期ファイルのアップロードを防ぐため、これは回避策です。そのため、フォーム送信プロセスに2番目のページを追加することを検討することをお勧めします。その2番目のページでは、ユーザーは標準のファイル入力フィールドとフォーム投稿を使用して画像のアップロードを処理できます。http://forums.asp.net/p/1237419/2253919.aspx

于 2010-07-16T06:49:03.330 に答える
0

メインフォームの非表示の入力フィールドでそれを行います。ユーザーがモーダル ポップアップの画像をクリックすると、jQuery を使用してクリック イベントを処理し、クリックされた画像の値 (ファイル名?) を非表示の入力フィールドに割り当てます。非表示の入力フィールドに正しい名前を付けると、ModelBinder はファイル名をモデル オブジェクトに自動的にバインドするため、手動で更新する必要はありません。

メインフォーム:

<%= Html.HiddenFor( x => x.ImageFileName ) %>

いくつかのjQuery：

$("#popup a.candidateImage").click(function() {
    $("form input[name=ImageFileName]").value = $("img", this).attr("src");
    // probably also close the modal?
}

私はこれをテストしませんでしたが、アイデアを得る必要があります...おそらく、メインフォームの ImageFileName にファイルのサムネイルが入力されている場合は、ファイルのサムネイルを表示しようとします。

于 2010-07-16T16:43:20.180 に答える
0

ASP.NET MVC2とAjaxUploaderの新しいバージョンを使用します。

コントローラーを呼び出すと:

public JsonResult AddImg(HttpPostedFileBase UserFile)

UserFile は常に null です...

スクリプト：

function createUploader() {  
var uploader = new qq.FileUploader({  
element: document.getElementById('file-uploader-demo1'),  
action: '/Evenement/AddImg',  
name: 'UserFile',  
});  
}

私の意見では、フォームは問題ありません

<% using (Html.BeginForm("AddImg", "Evenement", FormMethod.Post, new { enctype = "multipart/form-data" }))
{ %>
<div id="file-uploader-demo1"></div>
<% } %>

アイデアはありますか？どうもありがとう。下手な英語でごめんなさい^^私はフランス人です。

于 2010-07-26T11:11:48.247 に答える