码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-01-30 23:07:39      阅读:260      评论:0      收藏:0      [点我收藏+]

标签:rand   result   length   页面   mvc   layui   layout   ali   and   

  在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))

 

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

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

标签:rand   result   length   页面   mvc   layui   layout   ali   and   

原文地址:https://www.cnblogs.com/zhangrCsharp/p/8387106.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!