• Mvc使用Partial View 来封装上传控件


      在Shared中创建一个uc/_upload.cshtml

      这里面的主要的代码是  

    public class UploadContent
        {
            private UploadContent()
            {
    
            }
            public UploadContent(string name,string src,string style="")
            {
                this.Name = name;
                this.Src = src;
                if(!string.IsNullOrEmpty(style))
                this.Style = style;
            }
            public string Title { get; set; } = "图片";
            public string Name { get; set; }
            public string Id { get; set; } = "_uploadpic" + new Random().Next(1000);
            public string Tip { get; set; } = "点击上传,或将文件拖拽到此处";
            public string Src { get; set; }
            public string Style { get; set; } = "200px";
        }

        

    @model UploadContent
    @{
        Layout = null;
        var title = Model.Title;
        var name = Model.Name;
        var id = Model.Id;
        var tip = Model.Tip;
        var src = Model.Src;
        var style = Model.Style;
    }
    
    
    <div class="layui-form-item">
        <label class="layui-form-label">@title</label>
        <div class="layui-input-block">
            <div class="layui-upload-drag" id="@id">
                <i class="layui-icon">�</i>
                <p>@tip</p>
            </div>
    
            <div>
                <img id="@(id)UrlImg" src="@(BaseUrl+src)" class="@(!string.IsNullOrEmpty(src.SafeToString())?"true":"hide")" style="@style" />
            </div>
            <input type="hidden" name="@name" id="@(id)Url" value="@src"/>
            @*@Html.ValidationMessageFor(model => model.pic, "", new { @class = "text-danger" })*@
        </div>
    </div><script>
        setTimeout(function () {
            //拖拽上传
            layui.upload.render({
                elem: '#@(id)'
                , url: '/api/ajax/upload'
                , multiple: true
                , done: function (result) {
                    result.msg && layer.msg(result.msg);
                    if (result && result.data && result.data.length > 0 && result.data[0]) {
                        $('#@(id)Url').val(result.data[0]);
                        $('#@(id)UrlImg').attr('src', baseUrl + result.data[0]).removeClass('hide');
                    }
    
                }
            });
        },2000)
    </script>

    使用 @Html.Partial("uc/_upload", new UploadContent("pic", Model?.pic))

    可以在同一个页面使用多此

    这就是
  • 相关阅读:
    git切换分支报错解决
    网上看到的一个布局神器
    js获取滚动条,文档,浏览器高度
    使用iView-cli创建一个pc端网页(1)
    ajax详解与用途
    JavaScript中for/in和for的区别
    排序
    Java中getResourceAsStream的用法
    java程序打包成exe的总结
    使用7zip把jre集成到绿色运行程序内
  • 原文地址:https://www.cnblogs.com/zhangrCsharp/p/8387106.html
Copyright © 2020-2023  润新知