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; } = "width: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))

 

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