1

部分ビュー _ImageUploader.cshtml があります

 @model Farmer.WebUI.Areas.Images.HelperClasses.UploaderHelper
    @using Farmer.Translations
    @using Farmer.Translations.Views.News

    @using System.Web.Optimization
    @Scripts.Render(Url.Content("~/Apps/FileUploader/fileuploader.js"))
    @Styles.Render(Url.Content("~/Apps/FileUploader/fileuploader.css"))

   <div id="file-uploader">
   </div>

<script type="text/javascript">
    var uploader = new qq.FileUploader({
        element: document.getElementById('file-uploader'),
        allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
        sizeLimit: 20971520,
        action: '@Url.Action("ImagesUpload", "Image", new { area = "Images"  })',
        multiple: true,
        dragText: 'Drop files here to upload',
        uploadButtonText: 'Upload a file',
        cancelButtonText: 'Cancel',
        failUploadText: 'Upload failed',
        messages: {
            typeError: "{file} has an invalid extension. Valid extension(s): {extensions}.",
            sizeError: "{file} is too large, maximum file size is {sizeLimit}.",
            minSizeError: "{file} is too small, minimum file size is {minSizeLimit}.",
            emptyError: "{file} is empty, please select files again without it.",
            noFilesError: "No files to upload.",
            onLeave: "The files are being uploaded, if you leave now the upload will be cancelled."
        },
        showMessage: function (message) {
            $.confirm({
                'title': 'Message',
                'message': message,
                'buttons': {
                    '@CommonTrl.Ok': {
                            'class': 'blue',
                            'action': function () {
                                //do nothing
                            }
                        }
                    }
            });
        },
        onComplete: function (id, fileName, data) {
            if (data.success == false && data.limitReached) {
                $.confirm({
                    'title': '@CommonTrl.Message',
                    'message': '@ImagesTrl.LimitReached ' + data.numberOfAllowed,
                    'buttons': {
                        '@CommonTrl.Ok': {
                            'class': 'blue',
                            'action': function () {
                                //do nothing
                            }
                        }
                    }
                });
            } else {
                addImage(data.idImage, data.imageType, data.showDescriptionOptions);
            }
        },
        params: {
            idSourceTable: '@Model.IdSourceTable',
            imageType: '@Model.ImageType',
            showDescriptionOptions: '@Model.ShowDescriptionOptions'
        }
    });

    function addImage(idImage, imageType, showDescriptionOptions) {
        $.ajax({
            type: 'POST',
            url: '@Url.Action("GetImagePartial", "Image", new { area = "Images" })',
            data:
            {
                __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val(),
                idImage: idImage,
                showDescriptionOptions: showDescriptionOptions
            },
            success: function (data) {
                $('#Images-' + imageType).append(data);
            }
        });
    }
</script>

次に、これを行う場所が表示されます

@Html.DropDownList("ddlImageType", Model.ImageTypeOptions, new { id = "ImageType" })
<div id="Uploader">
</div>
<script type="text/javascript">
    $(function () {
        //set default values
        $('#ImageType').val('@((int)ImageTypes.NewsGallery)');
        $('#ImageType').trigger('change');
    });
 $(function () {
        $('#ImageType').change(function () {
            $.ajax({
                type: 'GET',
                url: '@Url.Action("GetImageUploader", "Image", new { area = "Images" })',
                data:
                    {
                        idSourceTable: '@Model.IdGuid',
                        imageType: $('#ImageType').val(),
                        showDescriptionOptions: '@true'
                    },
                success: function (data) {
                    $('#Uploader').html(data);
                }
            });
        });
    });
</script>

これは私のサーバーコードです

public ActionResult GetImageUploader(Guid idSourceTable, int imageType, bool showDescriptionOptions)
        {
            return PartialView("Images/_ImageUploader", new UploaderHelper(idSourceTable, imageType, showDescriptionOptions));
        }

すべてが初めて読み込まれると、すべてが正常に機能します。問題は、ドロップダウン値を変更すると、サーバー側のコードが 2 回呼び出され、その理由がわからないことです。私はfirebugでデバッグし、1回目は通常のajax呼び出し($('#ImageType').change)ですが、2回目は呼び出しが返されて成功($('#Uploader').html(data);)がそこで実行されますサーバーコードへの別の呼び出しであり、これが発生する理由がわかりません

4

1 に答える 1

1

私はこの行について考えています

$('#ImageType').trigger('change');

準備完了関数で呼び出しているため、ページが読み込まれるたびに実行する必要があります。

でも正直なところ、100％確信はありません

于 2012-11-08T14:26:56.257 に答える