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));
        }

第一次加载所有内容时，一切正常。问题是当我改变我的下拉值时，服务器端的代码被调用了两次，我不知道为什么。我在 firebug 中调试，第一次是正常的 ajax 调用 ($('#ImageType').change) 但第二次调用返回并成功 ($('#Uploader').html(data);) 在那里执行是对服务器代码的另一个调用，我找不到发生这种情况的原因

4

1 回答 1

1

我在想这条线

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

因为您在准备函数中调用它，所以每次加载页面时都必须执行它。

但老实说，我对此不是 100% 确定的

于 2012-11-08T14:26:56.257 回答