none
jtable無法顯示圖片。 RRS feed

  • 問題

  • 我使用jtabl來顯示資料庫圖片,使用MVC預設的表單能成功顯示,但在Jtable 內確都都不到圖片內容,請網上的各位幫忙解,感謝。

    ProductsController.cs

     //show photo
            public FileResult ShowPhoto(int id)
            {
                byte[] content = db.Products.Find(id).Photo;
                return File(content, "img/*");
            }

    view

    @model IEnumerable<POSWeb.Models.Products>
    
    @{
        ViewBag.Title = "產品資訊";
        Layout = "~/Views/Shared/_Layout Back.cshtml";
    }
    
    @section styles
        {
        <link href="~/Theme/redmond/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />
        <link href="~/Scripts/jtable/themes/metro/blue/jtable.min.css" rel="stylesheet" />
        @*<link href="~/Scripts/jtable/themes/metro/purple/jtable.min.css" rel="stylesheet" />*@
        @*<link href="~/Scripts/jtable/themes/metro/lightgray/jtable.min.css" rel="stylesheet" />*@
        @*<link href="~/Scripts/jtable/themes/metro/green/jtable.min.css" rel="stylesheet" />*@
    }
    <h2>產品資訊</h2>
    
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
        資料詳細新增
    </button>
    
    
    
    
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">資料詳細新增</h5>
                    <button type="button" class="close" data- dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @Html.Partial("_Createother")
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    @*<input type="submit" value="Createother" class="btn btn-default" />*@
                </div>
            </div>
        </div>
    </div>
    <br />
    
    
    <!-- Button trigger modal -->
    @*產品名稱:@Html.DropDownList("ProductsName", ViewBag.ProductName as SelectList, "--所有記錄--", new { @class = "ui-selectable form-control" })*@
    <br />
    <div id="ProductsTableContainer"></div>
    
    @section  scripts
        {
        <script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
        <script src="~/Scripts/jtable/jquery.jtable.min.js"></script>
        <script>
            var cachedifor = null;
    
             $(document).ready( function( ) {
                 $('#ProductsTableContainer').jtable({
                    title:'產品資訊清單',
                    paging: true,
                    pageSize: 5,
                    sorting: true,
                     defaultSorting: 'ProductID ASC',
                    actions: {
                        listAction: '@Url.Action("List", "Products")',
                        deleteAction:'@Url.Action("Delete", "Products")',
                        updateAction:'@Url.Action("Update", "Products")',
                        createAction:'@Url.Action("Create", "Products")'
                     },
                    fields: {
                        Details: {
                            title: '檢視',
                            width: '5%',
                            sorting: false,
                            edit: false,
                            create: false,
                            listClass: 'child-opener-image-column',
                            display: function (masterRecord) {
                                //Create an image that will be used to open child table
                                var $img = $('<img src="@Url.Content("~/img/Expand.png")" title="產品圖案" />');
                                //Open child table when user clicks the image
                                $img.click(function () {
                                    var src = $(this).attr('src');
                                    if (src == '@Url.Content("~/img/Expand.png")') {
                                        $(this).attr('src', '@Url.Content("~/img/Collapse.png")');
                                        $('#ProductsTableContainer').jtable('openChildTable',
                                            $(this).closest('tr'),
                                            {
                                                title: masterRecord.record.ProductName + '類型的產品圖案',
                                                actions: {
                                                    listAction: '@Url.Action("GetProducts", "Products")/' + masterRecord.record.ProductID,
                                                },
                                                fields:
                                                {
                                                    Picture: {
                                                        title: '產品圖案',
                                                        width: "100%",
                                                        display: function (detailsRecord) {
                                                            return "<div><img style='width:100%;' src='" + "@Url.Action("ShowPhoto", "Products")/" + detailsRecord.record.ProductID + "' title='" + detailsRecord.record.ProductName + "' /></div>";
                                                        }
                                                    }
                                                }
                                            }, function (data) { //opened handler
                                                data.childTable.jtable('load');
                                            });
                                    }
                                    else {
                                        $('#ProductsTableContainer').jtable('closeChildTable', $(this).closest('tr'));
                                        $(this).attr('src', '@Url.Content("~/img/Expand.png")');
                                    }
                                });
                                //Return image to show on the person row
                                return $img;
                            }
                        },
                         ProductID: {
                             key: true,
                             create: false,
                             edit: false,
                             list: true,
                             title: "產品編號",
                             width: '10%'
                         },
                         ProductName:
                         {
                             title: '產品名稱',
                             width: '20%'
                         },
                         CategoryID:
                         {
                             title: '類別編號',
                             width: '10%',
                             options: '/Products/Getcategories'
                         },
                         UnitPrice:
                         {
                             title: '產品價格',
                             width: '10%'
                         },
                         Stock:
                         {
                             title: '數量',
                             width: '10%'
                         },
                         Discontinued:
                         {
                             title: '上下架',
                             width: '12%',
                             options: '/Products/Getcategories1'
                         },
                         Photo:
                         {
                             title: '產品圖片',
                             width: '20%',
                             create:false,
                             edit: false,
                             list: false,
                             sorting: false,
    
                             display: function (masterData)
                             {
                                 return '<img style="width:70px;height:120" src=' +
                                     "@Url.Action("ShowPhoto", "Products")/" +
                                     masterData.record.ProductID +
                                     " title=' " +
                                     masterData.record.ProductName +
                                     " ' />";
                             },
                         },
                     },
    
                 });
                 $('#ProductsTableContainer').jtable('load');
    
                 //$('#ProductName').change(function (e) {
                 //    $('#ProductsTableContainer').jtable('load', {
                 //        ProductName : ProductName.value,
                 //    });
                 //});
    
                 //Load all records when page is first shown
                 //$('#Filter').click();
                 //$('#ProductName').change();
            });
    
        </script>
        <script type="text/javascript">
            function F_Open_dialog() {
                document.getElementById("btn_file").click();
            }
        </script>
        @Scripts.Render("~/bundles/jqueryval")
        <script>
            function readURL(input, img) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        img.attr('src', e.target.result);
                    };
                    reader.readAsDataURL(input.files[0]);
                }
            }
            $("#File1").change(function () { readURL(this, $("#imgPreview")); });
    
            //function readURL(input, pdf) {
            //    if (input.files && input.files[0]) {
            //        var reader = new FileReader();
            //        reader.onload = function (e) {
            //            pdf.attr('src', e.target.result);
            //        };
            //        reader.readAsDataURL(input.files[0]);
            //    }
            //}
            $("#File2").change(function () { readURL(this, $("#PdfPreview")); });
        </script>
    }
    
    肯請解惑,謝謝。




    2019年10月29日 下午 03:12

所有回覆