在MVC EditorTemplate的部分中包含脚本

时间:2013-08-10 21:26:56

标签: c# asp.net-mvc asp.net-mvc-4 fine-uploader

我为FineUploader创建了一个编辑器模板,执行以下操作:

    @model String
    @using System.Web.Mvc;

    @{
        var controlId = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(String.Empty);
        var uploaderId = (Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(String.Empty) + "-" + "uploader");
        var kValue = Model;
    }

    <div style="text-align: center;">
    @if(kValue == null || kValue == "")
    {
        <div class="blue">
            <img src="/Images/profilepics/blank-person.jpg" title="No Picture" id="@(controlId + "-pic")" />
        </div>
    }
    else
    {
        <div class="blue">
            <img src="@kValue"  />
        </div>
    }
        <div id="@uploaderId"></div>
    </div>
        <script type="text/javascript">
            $(document).ready(function () {
                var uploader = new qq.FineUploader({
                    element: document.getElementById('@uploaderId'),
                    request: {
                        endpoint: '/Uploads/ImageUpload/',
                        params: {
                            UploadType: '@controlId',
                            RelatedId: '@ViewData["kuser"]'
                        }
                    },
                    multiple: false,
                    text: {
                        uploadButton: '<div><i class="icon-upload icon-white"></i>Change picture</div>'
                    },
                    template: '<div class="qq-uploader">' +
                                '<div class="qq-upload-button btn btn-success" style="width: auto;  margin-top: 10px;">{uploadButtonText}</div>' +
                                '<span class="qq-drop-processing"><span class="qq-drop-processing-spinner"></span></span>' +
                                '<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
                              '</div>',
                    classes: {
                        success: 'alert alert-success',
                        fail: 'alert alert-error'
                    },
                    callbacks: {
                        onComplete: function (id, name, response) {
                            var img = document.getElementById("@(controlId + "-pic")");
                            img.src = response.path;
                        }
                    }
                });
            });

        </script>

这很好用......但我想做的是在模板中执行以下操作:

@section head {

    @Styles.Render("~/uploaderCss")
    @Scripts.Render("~/uploaderJs")
}   

但是,似乎在头部/脚本部分包含Script.Render和Styles.Render时,它们不会呈现。如果我直接链接它们,如果页面上有多个上传器控制器,脚本将尝试加载两次...有没有办法在EditorTemplate中包含脚本引用,以便父页面知道脚本已经装?作为一种解决方法,我不得不在父页面上包含脚本,但这确实不是最佳的,因为我需要记住在我最终使用ImagePath EditorFor时将它们放在页面上......

感谢您的帮助!

0 个答案:

没有答案