@{
    ViewBag.Title = "打印模板管理";
    Layout = "~/Views/Shared/Master.cshtml";
}
<link href=@Url.Content("~/Content/fileinput/css/fileinput.min.css") rel="stylesheet" />
<script src=@Url.Content("~/Content/fileinput/js/fileinput.min.js")></script>
<script src=@Url.Content("~/Content/fileinput/js/fileinput_locale_zh.js")></script>
<script>
    var viewModel;
    $(function () {
        viewModel = new myViewModel_Menus(@Html.Raw(Json.Encode(Model)));
        ko.applyBindings(viewModel, $(".container")[0]);
    })
    function myViewModel_Menus(data)
    {
        var self = this;
        self.seve = function () {
            window.location.href = "@Url.Action("Noticeinfo", "Backstage")" ;
        }
        ko.mapping.fromJS(data, mapping, self)
    }
    var mapping = {
        'MenusList': {
            create: function (options) {
                return new MenusList(options.data);
            }
        }
    }
    function MenusList(data)
    {
        self = this;
        self.Download = function ()
        {
            var fileName = data.Contents;
           
            var form = $("<form>");   //定义一个form表单
            form.attr('style', 'display:none');   //在form表单中添加查询参数
            form.attr('target', '');
            form.attr('method', 'post');
            form.attr('action', "@Url.Action("DownloadFile", "Backstage")");

            var input1 = $('<input>');
            input1.attr('type', 'hidden');
            input1.attr('name', 'fileName');
            input1.attr('value', fileName);
            $('body').append(form);  //将表单放置在web中
            form.append(input1);   //将查询参数控件提交到表单上
            form.submit();
        }
        self.Upload = function (data)
        {
            $("#myModal").modal();
            var oFileInput = new FileInput();
            oFileInput.Init("txt_file", "@Url.Action("FileUpload", "Backstage")" + "?id=" + data.Id());
        }
        ko.mapping.fromJS(data, {}, self)
    }
   
    var FileInput = function () {
        var oFile = new Object();

        //初始化fileinput控件（第一次初始化）
        oFile.Init = function (ctrlName, uploadUrl) {
            var control = $('#' + ctrlName);

            //初始化上传控件的样式
            control.fileinput({
                language: 'zh', //设置语言
                uploadUrl: uploadUrl, //上传的地址
                allowedFileExtensions: ['jpg', 'png', 'gif','doc'],//接收的文件后缀
                showUpload: true, //是否显示上传按钮
                showCaption: false,//是否显示标题
                browseClass: "btn btn-primary", //按钮样式
             
                maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
                //minFileCount: 0,
                maxFileCount: 100,
                enctype: 'multipart/form-data',
                validateInitialCount: true,
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",

                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            });

            //导入文件上传完成之后的事件
            $("#txt_file").on("fileuploaded", function (event, data, previewId, index) {
                $("#myModal").modal("hide");
                var data = data.response;
                var x = data.file
                alert("上传成功");
               
                //1.初始化表格
                var oTable = new TableInit();
                oTable.Init();

            });
        }
        return oFile;
    };
</script>
<div class="container">
    
    <div class="row">
        <table class="table table-bordered">
            <caption style="background:#5fb4d0;">打印模板管理列表</caption>
            <thead>
                <tr>
                    <th>模板名称</th>
                    <th>下载模板</th> 
                    <th>覆盖模板</th>          
                </tr>
            </thead>
            <tbody data-bind="foreach:MenusList">
                <tr>
                    <td data-bind="text:Name"></td>
                    <td>
                        <button class="btn btn-default btn-sm" data-bind="click:Download" >
                            <span class="glyphicon glyphicon-save"></span>
                        </button>
                    </td>
                    <td>
                        <button class="btn btn-default btn-sm" data-bind="click:Upload" >
                            <span class="glyphicon glyphicon-calendar"></span>
                        </button>
                    </td>
                </tr>
              
            </tbody>
        </table>
    </div>
    <div class="row">
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">请选择你要上传的文件</h4>
                    </div>
                    <div class="modal-body">
                        <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>