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)
-
0
@AstarIT
- Do you use Angular version or jQuery version ?
- Which type of documents do you want to support ? Mardown for example ?
-
0
I am using JQuery version. Type of document PDF only I am trying to use google document viewer.
-
0
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.
-
0
Hi,
For your last question, we can continue on https://support.aspnetzero.com/QA/Questions/8906
-
0
<div class="modal-body"> <div id="TenantDocumentInformationsTab"> <form name="TenantDocumentInformationsForm" role="form" novalidate class="form-validation">
@if (Model.IsEditMode) { <input type="hidden" name="id" value="@Model.TenantDocument.Id" /> } <div class="form-group"> <label for="TenantDocument_Name">@L("Name")</label> <input class="form-control" id="TenantDocument_Name" value="@Model.TenantDocument.Name" type="text" name="name" required maxlength="@OneServDemo.TenantDocuments.TenantDocumentConsts.MaxNameLength" minlength="@OneServDemo.TenantDocuments.TenantDocumentConsts.MinNameLength" /> </div> <div class="form-group"> <label for="TenantDocument_Description">@L("Description")</label> <input class="form-control" id="TenantDocument_Description" value="@Model.TenantDocument.Description" type="text" name="description" required maxlength="@OneServDemo.TenantDocuments.TenantDocumentConsts.MaxDescriptionLength" minlength="@OneServDemo.TenantDocuments.TenantDocumentConsts.MinDescriptionLength" /> </div> <div class="form-group"> <label for="documentTypeId">@L("DocumentType")</label> @Html.DropDownList("documentTypeId", new SelectList(Model.TenantDocumentDocumentTypeList, "Id", "DisplayName", (Model.IsEditMode ? Model.TenantDocument.DocumentTypeId.ToString() : "")), @L("SelectADocumentType"), new { @class = "form-control" }) </div> <div class="form-group"> <label for="TenantDocument_SignDate">@L("SignDate")</label> <input class="form-control m-input date-picker" id="TenantDocument_SignDate" type="text" name="signDate" value="@Model.TenantDocument.SignDate" /> </div> <div class="form-group"> <label for="TenantDocument_StartDate">@L("StartDate")</label> <input class="form-control m-input date-picker" id="TenantDocument_StartDate" type="text" name="startDate" value="@Model.TenantDocument.StartDate" /> </div> <div class="form-group"> <label for="TenantDocument_ExpirationDate">@L("ExpirationDate")</label> <input class="form-control m-input date-picker" id="TenantDocument_ExpirationDate" type="text" name="expirationDate" value="@Model.TenantDocument.ExpirationDate" /> </div> <div class="form-group"> <label for="TenantDocument_ReviewDate">@L("ReviewDate")</label> <input class="form-control m-input date-picker" id="TenantDocument_ReviewDate" type="text" name="reviewDate" value="@Model.TenantDocument.ReviewDate" /> </div> <div class="form-group"> <label for="TenantDocument_Assignees">@L("Assignees")</label> <input class="form-control" id="TenantDocument_Assignees" value="@Model.TenantDocument.Assignees" type="text" name="assignees" /> </div> <div class="form-group"> <label for="documentStatuId">@L("DocumentStatu")</label> @Html.DropDownList("documentStatuId", new SelectList(Model.TenantDocumentDocumentStatuList, "Id", "DisplayName", (Model.IsEditMode ? Model.TenantDocument.DocumentStatuId.ToString() : "")), @L("SelectADocumentStatu"), new { @class = "form-control" }) </div> </form> <!-- // single file upload using DropZone Plug in Version 1 --> <div class="row"> @*<div style="margin-left:auto;margin-right:auto;" class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading" id="my-dropzone"> <div class="panel-title"> Drag n' drop Logo File format PDF </div> </div> was here </div>*@ <form id="uploadDoc" method="post" class="dropzone" enctype="multipart/form-data" > <div class="dz-message"> Drag n' drop Logo File format PDF</div> </form> </div> <br /> <br /> <br /> <br /> <br /> @*This Div is to present the documents*@ <div id="gdvId"> @*<iframe src="https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>*@ </div> </div></div>
@await Html.PartialAsync("~/Areas/App/Views/Common/Modals/_ModalFooterWithSaveAndCancel.cshtml")
-
0
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.
-
0
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('<iframe src="https://docs.google.com/viewer?embedded=true&url=' + seedocument + '" width="' + settings.width + '" height="' + settings.height + '" style="border: none;margin : 0 auto; display : block;"></iframe>'); //alert('<iframe src="https://docs.google.com/viewer?embedded=true&url=' + seedocument + '" width="' + settings.width + '" height="' + settings.height + '" style="border: none;margin : 0 auto; display : block;"></iframe>') $('#gdvId').append('<iframe src="https://docs.google.com/viewer?embedded=true&url=' + seedocument + '" width="' + settings.width + '" height="' + settings.height + '" style="border: none;margin : 0 auto; display : block;"></iframe>'); //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.
