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

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

    这就是
  • 相关阅读:
    清除Jpanel组件并重绘
    idea配置ssm框架
    java异常机制
    JavaSwing关于GridBagLayout(网格袋布局)的使用
    (趣味哈哈镜)JMF中摄像头相关的问题
    三大WEB服务器(apache lighttpd nginx) 对比分析
    在前台接收jsonp数据(练习)
    cookie存数组的方法
    接口验证每个ip每小时只能访问2次(自己实验:有待改进)
    DOM操作xml数据
  • 原文地址:https://www.cnblogs.com/zhangrCsharp/p/8387106.html
Copyright © 2011-2022 走看看