zoukankan      html  css  js  c++  java
  • 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))

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

    这就是
  • 相关阅读:
    pydev 下Django 1.7 undefined variables from import问题的解决
    前端CDN公共库整理
    BugFix:URL or HTTP headers are too long (IP=127.0.0.1)
    目前最好用的软件下载网站
    mysql数据库优化之表的设计和慢查询定位
    Hadoop-08-Hive本地独立式安装
    AspNetPager真假分页对照实例
    Android从无知到有知——NO.6
    Xpath—解决这个问题的良药
    C# Json反序列化 数据协定类型 无法反序列化 由于未找到必需的数据成员
  • 原文地址:https://www.cnblogs.com/zhangrCsharp/p/8387106.html
Copyright © 2011-2022 走看看