8

アプリケーションに画像をアップロードしようとしていますが、常に null が返されます。ここで問題を見つけることができません。あなたは私を助けることができます？これが私のコードです。

モデル

[Table("Slider")]
public partial class Slider : BaseModel
{
    [Required]
    [StringLength(200)]
    public string FileName { get; set; }

    [StringLength(200)]
    public string Title { get; set; }

    [StringLength(1000)]
    public string Description { get; set; }

    public int? Order { get; set; }
}


[NotMapped]
public class SliderImage : Slider
{
    public HttpPostedFileBase ImageFile { get; set; }
}

意見

@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken()
<div class="modal-body">
    <div class="form-horizontal">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)

        <div class="form-group">
            @Html.LabelFor(model => model.FileName, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.FileName, new { @class = "form-control", @readonly = "readonly" })
                @Html.ValidationMessageFor(model => model.FileName, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.ImageFile, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(m => m.ImageFile, new { @class = "form-control", type = "file" })
               //This is Same as below
               //<input class="form-control" id="ImageFile" name="ImageFile" type="file" value="">
            </div>
        </div>

コントローラ

    public ActionResult Edit(int id)
    {
        Slider slider = _db.Sliders.Find(id);
        if (slider == null)
        {
            return HttpNotFound();
        }
        Mapper.CreateMap<Slider, SliderImage>();
        SliderImage sliderImage = Mapper.Map<Slider, SliderImage>(slider);
        return PartialView("_Edit", sliderImage);
    }


    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult EditSlider([Bind(Include = "Id,FileName,Title,Description,Order,IsActive,Name,ImageFile")] SliderImage sliderImage)
    {
        if (ModelState.IsValid)
        {
            Mapper.CreateMap<SliderImage, Slider>();
            Slider slider = Mapper.Map<SliderImage, Slider>(sliderImage);
            _db.Entry(slider).State = EntityState.Modified;
            _db.SaveChanges();
            return Json(new { success = true });
        }
        return PartialView("_EditSlider");
    }

私はこれで何が間違っていますか？

問題を発見

ブートストラップモーダルポップアップ内に部分ビューをバインドしています。ポップアップからアップロードすると、アップロードが null を返します。代わりに、ブラウザーで部分ビューを直接開くと、ファイルがモデルに存在します。したがって、ファイルのアップロードに問題はありません。問題はモーダルポップアップか何かにあります。

Bootstrap モデルを使用する場合 Bootstrap モデルを使用する場合

部分的な View Direct を使用する場合 部分的な View Direct を使用する場合

次の画像で、Bootstrap Modal Submit と Using the partial View Directly の間でフィドラーを使用したときに見つかった違いをそれぞれ確認してください

Fiddler リクエストの比較

モーダルポップアップから投稿する場合、コンテンツタイプはapplication/x-www-form-urlencoded、部分ビューを直接使用する場合と同じように変更されますmultipart/form-data

根本的な問題が見つかりました。

$('form', dialog).submit(function () {
                    var $form = $(this);
                    var enctype = $form.attr('id');
                    $.ajax({
                        url: this.action,
                        type: this.method,
                        data: $(this).serialize(),
                        success: function (result) {
                            if (result.success) {
                                $('#myModal').modal('hide');
                                //Refresh
                                location.reload();
                            } else {
                                $('#myModalContent').html(result);
                                bindForm();
                            }
                        }
                    });
                    return false;
                });

AJAX 投稿を使用して、フォームからデータを送信しています。ajaxを使用$(this).serialize()すると成功が呼び出されますが、コンテンツタイプが異なるためファイルが返されません。どうすればこれを変更できますか??

4

6 に答える 6

0

通常、モーダル ポップアップは の最後にレンダリングされますbody。ブートストラップが同じことを行うと確信しています。これは、モーダルのコンテンツが新しい場所に移動され、要素から取り出されることを意味しますform。並べ替えをお勧めしformます。モーダル ウィンドウ内を移動します。

<div class="modal-body">
    @using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        @Html.AntiForgeryToken()
        ...
    }
</div>

これにより、モーダルが構築されるときにフォーム全体 (フォーム要素だけでなく) が移動します。

于 2014-10-28T07:36:14.960 に答える
0

アップロードされたファイルのみが null を返しますか? または他のテキストボックスもnullを返しますか? @Andreiがコメントしているように、通常、モーダルは新しい場所に移動され、フォームが存在しないか、モーダルが機能するようにパーシャルビューを移動できます。

jqueryUI でも同様の問題がありました。ajax を使用してデータを送信している場合、質問で見つけることができませんでした。.ajax() を使用してフォームを送信し、画像がアップロードされたかどうかを確認できます。

$.ajax({
            url: "@Url.Action("Action", "Controller")",
            type: "POST",
            cache: false,
            data: $("#YourFormID").serialize(),
            success: function (result) {
               //your success data

            },
            error: function (jqXHR, textStatus, errorThrown) {
               //your error handler
            },
        });

         return false;

$.ajax() を使用したくない場合は、jquery で .appendTo() を使用してみてください。フォーム内のすべてのものを ID を持つ div でラップし、すべてのデータを取得した後、ボタンのクリック時、または好きなように appendTo("#YourFormID") することを指定します。私がモーダルを使用していたとき、これは私にとってうまくいきました。幸運を

于 2014-10-28T16:17:43.183 に答える
-1

これが私のために働いた次の方法で試してください：

見る ：

@using (Html.BeginForm("ComplaintAndSuggestion", "RegisterComplaints", FormMethod.Post, new { enctype = "multipart/form-data", id = "ajaxUploadForm" }))
{
:
:
:

                    <div class="row mb10">
                        <div class="col-sm-3 col-md-3">
                            <label for="file1">Upload Image 1</label>
                            <input type="file" name="images" id="file1" accept="image/*" />
                        </div>
                        <div class="col-sm-3 col-md-3">
                            <label for="file2">Upload Image 2</label>
                            <input type="file" name="images" id="file2" accept="image/*" />
                        </div>
                        <div class="col-sm-3 col-md-3">
                            <label for="file3">Upload Image 3</label>
                            <input type="file" name="images" id="file3" accept="image/*" />
                        </div>
                        <div class="col-sm-3 col-md-3">
                            <label for="file4">Upload Image 4</label>
                            <input type="file" name="images" id="file4" accept="image/*" />
                        </div>
                    </div>

   <input type="submit" value="Create" />

}

コントローラー：

     [HttpPost]
        public ActionResult ComplaintAndSuggestion(Register register, IEnumerable<HttpPostedFileBase> images, IEnumerable<HttpPostedFileBase> videos)
        {


 foreach (var file in images)
                {

                    if (file != null)
                    {
                        string filenameWithDateTime = AppendTimeStamp(file.FileName);
                        file.SaveAs(Server.MapPath(Path.Combine("~/Images/", filenameWithDateTime)));
                        fileUploadModel.FilePath = (Server.MapPath(Path.Combine("~/Images/", filenameWithDateTime)));
                        fileUploadModel.FileName = filenameWithDateTime;
                        fileUploadModel.FileType = "Image";
                        fileUploadModel.RegisterId = register.RegisterId;
                        mediaRepository.Add(fileUploadModel);
                        mediaRepository.Save();
                    }

                }

}

お知らせ下さい。

于 2014-10-25T15:55:11.400 に答える