Base solution for your next web application
Open Closed

Document Viewer #8906


User avatar
0
AstarIT created

Does anyone has a plug in (free) document viewer that works with asp.net zero? at least 5MB viewer I been trying with google docs viewer but it does not embed the viewer in the page, instead opend other page and then if I close the page the app closees All help will be really appreciated. Thank you


7 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    @AstarIT

    1. Do you use Angular version or jQuery version ?
    2. Which type of documents do you want to support ? Mardown for example ?
  • User Avatar
    0
    AstarIT created

    I am using JQuery version. Type of document PDF only I am trying to use google document viewer.

  • User Avatar
    0
    AstarIT created

    This is what I have fournd the page where I have my document viewer (google docs viewer) do not refresh and does not allow me to reload the viewer. I have the regular button that is created using the power tools to create a document file. Power files creeates the Index.chtml and the _CreteandEditModal.chtmlml forms and the rest of he code. looking at the form index.chtml it create this button <div class="kt-subheader__toolbar"> <div class="kt-subheader__wrapper"> @if (IsGranted(AppPermissions.Pages_Administration_TenantDocuments_Create)) { <button id="CreateNewTenantDocumentButton" class="btn btn-primary blue"><i class="fa fa-plus"></i> @L("CreateNewTenantDocument")</button> } </div> </div>

    This button does not refresh the _CreteandEditModal.chtml., and it is causing that my componet google documet viewer does not reaload for the case that I am creating a document where I filling some fiedls about the docuiment like document Name for insance and I decedid to cancel the document so I press the button Cancel, then I press the button Create a new Document this page is not refreh and causing not to load the google view document..

    How I can make that the page_CreteandEditModal.chtml refresh again so my componets get reload it.

    All help will be really appreciated.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    For your last question, we can continue on https://support.aspnetzero.com/QA/Questions/8906

  • User Avatar
    0
    AstarIT created

    <div class="modal-body"> <div id="TenantDocumentInformationsTab"> <form name="TenantDocumentInformationsForm" role="form" novalidate class="form-validation">

            @if (Model.IsEditMode)
            {
                &lt;input type=&quot;hidden&quot; name=&quot;id&quot; value=&quot;@Model.TenantDocument.Id&quot; /&gt;
            }
    
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;label for=&quot;TenantDocument_Name&quot;&gt;@L("Name")&lt;/label&gt;
                &lt;input class=&quot;form-control&quot; id=&quot;TenantDocument_Name&quot; value=&quot;@Model.TenantDocument.Name&quot; type=&quot;text&quot; name=&quot;name&quot; required maxlength=&quot;@OneServDemo.TenantDocuments.TenantDocumentConsts.MaxNameLength&quot; minlength=&quot;@OneServDemo.TenantDocuments.TenantDocumentConsts.MinNameLength&quot; /&gt;
            &lt;/div&gt;
    
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;label for=&quot;TenantDocument_Description&quot;&gt;@L("Description")&lt;/label&gt;
                &lt;input class=&quot;form-control&quot; id=&quot;TenantDocument_Description&quot; value=&quot;@Model.TenantDocument.Description&quot; type=&quot;text&quot; name=&quot;description&quot; required maxlength=&quot;@OneServDemo.TenantDocuments.TenantDocumentConsts.MaxDescriptionLength&quot; minlength=&quot;@OneServDemo.TenantDocuments.TenantDocumentConsts.MinDescriptionLength&quot; /&gt;
            &lt;/div&gt;
    
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;label for=&quot;documentTypeId&quot;&gt;@L("DocumentType")&lt;/label&gt;
                @Html.DropDownList("documentTypeId", new SelectList(Model.TenantDocumentDocumentTypeList, "Id", "DisplayName", (Model.IsEditMode ? Model.TenantDocument.DocumentTypeId.ToString() : "")), @L("SelectADocumentType"), new { @class = "form-control" })
            &lt;/div&gt;
    
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;label for=&quot;TenantDocument_SignDate&quot;&gt;@L("SignDate")&lt;/label&gt;
                &lt;input class=&quot;form-control m-input date-picker&quot; id=&quot;TenantDocument_SignDate&quot; type=&quot;text&quot; name=&quot;signDate&quot; value=&quot;@Model.TenantDocument.SignDate&quot; /&gt;
            &lt;/div&gt;
    
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;label for=&quot;TenantDocument_StartDate&quot;&gt;@L("StartDate")&lt;/label&gt;
                &lt;input class=&quot;form-control m-input date-picker&quot; id=&quot;TenantDocument_StartDate&quot; type=&quot;text&quot; name=&quot;startDate&quot; value=&quot;@Model.TenantDocument.StartDate&quot; /&gt;
            &lt;/div&gt;
    
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;label for=&quot;TenantDocument_ExpirationDate&quot;&gt;@L("ExpirationDate")&lt;/label&gt;
                &lt;input class=&quot;form-control m-input date-picker&quot; id=&quot;TenantDocument_ExpirationDate&quot; type=&quot;text&quot; name=&quot;expirationDate&quot; value=&quot;@Model.TenantDocument.ExpirationDate&quot; /&gt;
            &lt;/div&gt;
    
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;label for=&quot;TenantDocument_ReviewDate&quot;&gt;@L("ReviewDate")&lt;/label&gt;
                &lt;input class=&quot;form-control m-input date-picker&quot; id=&quot;TenantDocument_ReviewDate&quot; type=&quot;text&quot; name=&quot;reviewDate&quot; value=&quot;@Model.TenantDocument.ReviewDate&quot; /&gt;
            &lt;/div&gt;
    
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;label for=&quot;TenantDocument_Assignees&quot;&gt;@L("Assignees")&lt;/label&gt;
                &lt;input class=&quot;form-control&quot; id=&quot;TenantDocument_Assignees&quot; value=&quot;@Model.TenantDocument.Assignees&quot; type=&quot;text&quot; name=&quot;assignees&quot; /&gt;
            &lt;/div&gt;
    
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;label for=&quot;documentStatuId&quot;&gt;@L("DocumentStatu")&lt;/label&gt;
                @Html.DropDownList("documentStatuId", new SelectList(Model.TenantDocumentDocumentStatuList, "Id", "DisplayName", (Model.IsEditMode ? Model.TenantDocument.DocumentStatuId.ToString() : "")), @L("SelectADocumentStatu"), new { @class = "form-control" })
            &lt;/div&gt;
    
    
    
        &lt;/form&gt;
        &lt;!-- // single file upload using DropZone Plug in Version 1 --&gt;
    
    
        &lt;div class=&quot;row&quot;&gt;
            @*&lt;div style=&quot;margin-left:auto;margin-right:auto;&quot; class=&quot;col-md-6&quot;&gt;
        &lt;div class=&quot;panel panel-default&quot;&gt;
            &lt;div class=&quot;panel-heading&quot; id=&quot;my-dropzone&quot;&gt;
                &lt;div class=&quot;panel-title&quot;&gt;
                    Drag n' drop Logo File format PDF
                &lt;/div&gt;
    
            &lt;/div&gt;
                was here
        &lt;/div&gt;*@
            &lt;form id=&quot;uploadDoc&quot; method=&quot;post&quot; class=&quot;dropzone&quot; enctype=&quot;multipart/form-data&quot; &gt;
                 &lt;div class=&quot;dz-message&quot;&gt; Drag n' drop Logo File format PDF&lt;/div&gt;
    
            &lt;/form&gt;
    
    
    
        &lt;/div&gt;
        &lt;br /&gt;
        &lt;br /&gt;
        &lt;br /&gt;
        &lt;br /&gt;
        &lt;br /&gt;
    
        @*This Div is to present the documents*@
        &lt;div id=&quot;gdvId&quot;&gt;
            @*&lt;iframe src=&quot;https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&amp;embedded=true&quot; style=&quot;width:600px; height:500px;&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;*@
        &lt;/div&gt;
    
    &lt;/div&gt;
    

    </div>

    @await Html.PartialAsync("~/Areas/App/Views/Common/Modals/_ModalFooterWithSaveAndCancel.cshtml")

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    How do you open this model ? If you are making a requet to server and show returned html, then you can reload the iframe in your modal's javascript file using init function.

  • User Avatar
    0
    AstarIT created

    I GOT IT!!!!

    This is what I did, using Ajax look for document then I create and Iframe using Jquery and reload it to the paga $(document).ready(function () { debugger; var url = abp.appPath + 'App/TenantDocuments/UploadFile'; var docPatho = '@Model.TenantDocument.DocumentPath'; Dropzone.autoDiscover = false; $("#dzupload").dropzone({ url: url, uploadMultiple: false, thumbnailWidth: 80, thumbnailHeight: 80, paramName: "file", parallelUploads: 1, maxFiles: 1, maxFilesize: 5, //MB createImageThumbnails: true, autoProcessQueue: true, addRemoveLinks: true, headers: { "X-XSRF-TOKEN": abp.security.antiForgery.getToken() },

            success: function (file, response) {
                var settings = {
                    width: '600',
                    height: '700'
                };
                debugger;
                var seedocument = response.result.id;
                //console.log('&lt;iframe src=&quot;https://docs.google.com/viewer?embedded=true&amp;url=&#39; + seedocument + &#39;&quot; width=&quot;&#39; + settings.width + &#39;&quot; height=&quot;&#39; + settings.height + &#39;&quot; style=&quot;border: none;margin : 0 auto; display : block;&quot;&gt;&lt;/iframe&gt;');
                //alert('&lt;iframe src=&quot;https://docs.google.com/viewer?embedded=true&amp;url=&#39; + seedocument + &#39;&quot; width=&quot;&#39; + settings.width + &#39;&quot; height=&quot;&#39; + settings.height + &#39;&quot; style=&quot;border: none;margin : 0 auto; display : block;&quot;&gt;&lt;/iframe&gt;')
    
                $('#gdvId').append('&lt;iframe src=&quot;https://docs.google.com/viewer?embedded=true&amp;url=&#39; + seedocument + &#39;&quot; width=&quot;&#39; + settings.width + &#39;&quot; height=&quot;&#39; + settings.height + &#39;&quot; style=&quot;border: none;margin : 0 auto; display : block;&quot;&gt;&lt;/iframe&gt;');
    
                //pass the name of the document to be save latter
                //var hv = $('input[id$=hidClientField]').val();
                $('input[id$=DocPaths]').val(seedocument);
    
                //alert($('input[id$=DocPaths]').val());
    
    
                //$("#gdvId").dropzone();
               
            }
            
        });
    

    });

    Thank you for your advise. Much appreciated.