Base solution for your next web application
Open Closed

Page _CreteandEditModal.chtml does not refresh ... causing my document viewer not to load. #8923

User avatar
0
AstarIT created

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.

Go to accepted answer
4 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @AstarIT,

    Normally, this button makes a request to server and loads the related cshtml file. Could you share your related cshtml and js files ?

    Thanks,

  • User Avatar
    0
    AstarIT created

    using System; using System.Threading.Tasks; using Abp.AspNetCore.Mvc.Authorization; using Microsoft.AspNetCore.Mvc; using OneServDemo.Web.Areas.App.Models.TenantDocuments; using OneServDemo.Web.Controllers; using OneServDemo.Authorization; using OneServDemo.TenantDocuments; using OneServDemo.TenantDocuments.Dtos; using Abp.Application.Services.Dto; using Abp.Extensions; using Microsoft.AspNetCore.Authorization; using Microsoft.Extensions.Hosting; using System.Linq; using Abp.UI; using Abp.IO.Extensions; using OneServDemo.Web.Helpers; using System.Drawing.Imaging; using System.IO; using Abp.Runtime.Session; using Abp.Web.Models;

    namespace OneServDemo.Web.Areas.App.Controllers { [Area("App")] [AbpMvcAuthorize(AppPermissions.Pages_Administration_TenantDocuments)] public class TenantDocumentsController : OneServDemoControllerBase { private readonly ITenantDocumentsAppService _tenantDocumentsAppService; private readonly IHostEnvironment _hostingEvironment;

        public TenantDocumentsController(ITenantDocumentsAppService tenantDocumentsAppService, IHostEnvironment hostingEvironment)
    {
        _tenantDocumentsAppService = tenantDocumentsAppService;
        _hostingEvironment = hostingEvironment;
    }

    public ActionResult Index()
    {
        

        var model = new TenantDocumentsViewModel
		{
			FilterText = ""
		};

        return View(model);
    } 

    [AbpMvcAuthorize(AppPermissions.Pages_Administration_TenantDocuments_Create, AppPermissions.Pages_Administration_TenantDocuments_Edit)]
    public async Task&lt;PartialViewResult&gt; CreateOrEditModal(int? id)
    {
		GetTenantDocumentForEditOutput getTenantDocumentForEditOutput;

		if (id.HasValue){
			getTenantDocumentForEditOutput = await _tenantDocumentsAppService.GetTenantDocumentForEdit(new EntityDto { Id = (int) id });
		}
		else {
			getTenantDocumentForEditOutput = new GetTenantDocumentForEditOutput{
				TenantDocument = new CreateOrEditTenantDocumentDto()
			};
			getTenantDocumentForEditOutput.TenantDocument.SignDate = DateTime.Now;
			getTenantDocumentForEditOutput.TenantDocument.StartDate = DateTime.Now;
			getTenantDocumentForEditOutput.TenantDocument.ExpirationDate = DateTime.Now;
			getTenantDocumentForEditOutput.TenantDocument.ReviewDate = DateTime.Now;
		}

        var viewModel = new CreateOrEditTenantDocumentModalViewModel()
        {
			TenantDocument = getTenantDocumentForEditOutput.TenantDocument,
				DocumentTypeName = getTenantDocumentForEditOutput.DocumentTypeName,
				DocumentStatuName = getTenantDocumentForEditOutput.DocumentStatuName,
				TenantDocumentDocumentTypeList = await _tenantDocumentsAppService.GetAllDocumentTypeForTableDropdown(),
				TenantDocumentDocumentStatuList = await _tenantDocumentsAppService.GetAllDocumentStatuForTableDropdown(),                
        };


        return PartialView("_CreateOrEditModal", viewModel);
    }

    public async Task&lt;PartialViewResult&gt; ViewTenantDocumentModal(int id)
    {
		var getTenantDocumentForViewDto = await _tenantDocumentsAppService.GetTenantDocumentForView(id);

        var model = new TenantDocumentViewModel()
        {
            TenantDocument = getTenantDocumentForViewDto.TenantDocument
            , DocumentTypeName = getTenantDocumentForViewDto.DocumentTypeName 

            , DocumentStatuName = getTenantDocumentForViewDto.DocumentStatuName 

        };

        return PartialView("_ViewTenantDocumentModal", model);
    }


    //UPLOAD FILE Person

    [HttpPost]
    [AllowAnonymous]
    public IActionResult UploadFile(string defaultFileUploadTextInput)
    {
        
        try
        {
            var file = Request.Form.Files.First();

            //Check input
            if (file == null)
            {
                throw new UserFriendlyException(L("File_Empty_Error"));
            }

            if (file.Length > 1048576) //1MB
            {
                throw new UserFriendlyException(L("File_SizeLimit_Error"));
            }

            byte[] fileBytes;
            using (var stream = file.OpenReadStream())
            {
                fileBytes = stream.GetAllBytes();
            }

            string extension = Path.GetExtension(file.FileName);
            if (!extension.IsIn(".doc",".docx", ".pdf", ".txt"))
            {
                throw new UserFriendlyException("File_Invalid_Type_Error");

            }
            //var imageFormat = ImageFormatHelper.GetRawImageFormat(fileBytes);

            //if (!imageFormat.IsIn(ImageFormat.Jpeg, ImageFormat.Png, ImageFormat.Gif,ImageFormat.Tiff, ImageFormat.Bmp))
            //{
            //    throw new UserFriendlyException("File_Invalid_Type_Error");
            //}
            //Image Load and Save
            string webRootPath = _hostingEvironment.ContentRootPath;

            // var files = HttpContext.Request.Form.Files;

            //Create a file path and folder for each tennat

            var folderPath = "Tenant" + "_" + AbpSession.GetTenantId().ToString()+"Documents";

            //files hass been uploaded
            var uploads = Path.Combine(webRootPath, "wwwroot\\assets\\"+ folderPath +"\\");

            //string uploads = Path.Combine(webRootPath, "SampleFiles");

            //var uploads = webRootPath;
           // string extension = Path.GetExtension(file.FileName);
            //part of the Name of the image.
            string guidNumber = Guid.NewGuid().ToString() + extension;
            // var newFileName = "Tenant" + "_" + AbpSession.GetTenantId().ToString() + "_" + file.FileName;

            if (!Directory.Exists(uploads))
            {
                Directory.CreateDirectory(uploads);
            }

            using (var filesStream = new FileStream(Path.Combine(uploads, guidNumber), FileMode.Create))
            {
                file.CopyTo(filesStream);
            }
            

            // This is the document location : TODO: add the real location of the 
            string seeDoc = "http://infolab.stanford.edu/pub/papers/google.pdf";

            //return this.View();
            //return new EmptyResult();
            //return Ok();

             return Json(new AjaxResponse(new { id = seeDoc}));
        }
        catch (UserFriendlyException ex)
        {
            throw new UserFriendlyException("Error Loading Photo",ex.Message);
        }


    }

    [HttpPost]
    [AllowAnonymous]
    public ActionResult PostAndShow()
    {
        //do the posting 
        //string result = requestStream.ReadToEnd(); //you can have similar code to fetch the server response
        string result= "https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true";
        return Content(result);
    }

    public string ReturnString()
    {
        string result = "https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true";

        return result;
    }
}

    }

  • User Avatar
    0
    AstarIT created

    This is the JQuery code. (function ($) {

    app.modals.CreateOrEditTenantDocumentModal = function () {

    var _tenantDocumentsService = abp.services.app.tenantDocuments;

    var _modalManager;
    var _$tenantDocumentInformationForm = null;

	        var _TenantDocumentdocumentTypeLookupTableModal = new app.ModalManager({
        viewUrl: abp.appPath + 'App/TenantDocuments/DocumentTypeLookupTableModal',
        scriptUrl: abp.appPath + 'view-resources/Areas/App/Views/TenantDocuments/_TenantDocumentDocumentTypeLookupTableModal.js',
        modalClass: 'DocumentTypeLookupTableModal'
    });        var _TenantDocumentdocumentStatuLookupTableModal = new app.ModalManager({
        viewUrl: abp.appPath + 'App/TenantDocuments/DocumentStatuLookupTableModal',
        scriptUrl: abp.appPath + 'view-resources/Areas/App/Views/TenantDocuments/_TenantDocumentDocumentStatuLookupTableModal.js',
        modalClass: 'DocumentStatuLookupTableModal'
    });

    this.init = function (modalManager) {
        _modalManager = modalManager;

		var modal = _modalManager.getModal();
        modal.find('.date-picker').datetimepicker({
            locale: abp.localization.currentLanguage.name,
            format: 'L'
        });

        _$tenantDocumentInformationForm = _modalManager.getModal().find('form[name=TenantDocumentInformationsForm]');
        _$tenantDocumentInformationForm.validate();
    };

	 $('#OpenDocumentTypeLookupTableButton').click(function () {

        var tenantDocument = _$tenantDocumentInformationForm.serializeFormToObject();

        _TenantDocumentdocumentTypeLookupTableModal.open({ id: tenantDocument.documentTypeId, displayName: tenantDocument.documentTypeName }, function (data) {
            _$tenantDocumentInformationForm.find('input[name=documentTypeName]').val(data.displayName); 
            _$tenantDocumentInformationForm.find('input[name=documentTypeId]').val(data.id); 
        });
    });
	
	$('#ClearDocumentTypeNameButton').click(function () {
            _$tenantDocumentInformationForm.find('input[name=documentTypeName]').val(''); 
            _$tenantDocumentInformationForm.find('input[name=documentTypeId]').val(''); 
    });
	
    $('#OpenDocumentStatuLookupTableButton').click(function () {

        var tenantDocument = _$tenantDocumentInformationForm.serializeFormToObject();

        _TenantDocumentdocumentStatuLookupTableModal.open({ id: tenantDocument.documentStatuId, displayName: tenantDocument.documentStatuName }, function (data) {
            _$tenantDocumentInformationForm.find('input[name=documentStatuName]').val(data.displayName); 
            _$tenantDocumentInformationForm.find('input[name=documentStatuId]').val(data.id); 
        });
    });
	
	$('#ClearDocumentStatuNameButton').click(function () {
            _$tenantDocumentInformationForm.find('input[name=documentStatuName]').val(''); 
            _$tenantDocumentInformationForm.find('input[name=documentStatuId]').val(''); 
    });
	


    this.save = function () {
        if (!_$tenantDocumentInformationForm.valid()) {
            return;
        }
        if ($('#TenantDocument_DocumentTypeId').prop('required') && $('#TenantDocument_DocumentTypeId').val() == '') {
            abp.message.error(app.localize('{0}IsRequired', app.localize('DocumentType')));
            return;
        }
        if ($('#TenantDocument_DocumentStatuId').prop('required') && $('#TenantDocument_DocumentStatuId').val() == '') {
            abp.message.error(app.localize('{0}IsRequired', app.localize('DocumentStatu')));
            return;
        }

        var tenantDocument = _$tenantDocumentInformationForm.serializeFormToObject();
		
		 _modalManager.setBusy(true);
		 _tenantDocumentsService.createOrEdit(
			tenantDocument
		 ).done(function () {
           abp.notify.info(app.localize('SavedSuccessfully'));
           _modalManager.close();
           abp.event.trigger('app.createOrEditTenantDocumentModalSaved');
		 }).always(function () {
           _modalManager.setBusy(false);
		});
    };
};

    })(jQuery);

    //function reloadPage() { // location.reload(true); //} // single file upload using DropZone Plug in Version 1 $(document).ready(function () {

    debugger;
var url = abp.appPath + 'App/TenantDocuments/UploadFile';

$(document).ready(function () {
    Dropzone.autoDiscover = false;
    $(".dropzone").dropzone({
        url: url,
        uploadMultiple: false,
        thumbnailWidth: 80,
        thumbnailHeight: 80,
        paramName: "file",
        parallelUploads: 1,
        maxFiles: 1,
        maxFilesize: 5, //MB
        createImageThumbnails: true,
        autoProcessQueue: false,
        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;');
            $('#form').append('&lt;input type=&quot;hidden&quot; name=&quot;DocumentPath&quot; value=&quot;&#39; + response.result.id + &#39;&quot; /&gt;');

        }

    });
});

    });

    ==================

    The fist time load the pace _CreateandEdit, everything works fine, loads the document and display the view of the document, If I press cancel to this page and call the page again the filds work fine but the Dropzone js stop working. No Errors are generated. Page is loaded but it seems that the _CreateandEdit.js is not loaded.

  • User Avatar
    0
    ismcagdas created
    Support Team

    You need to setup dropzone in the this.init function of your modal script.

Assignee
No one
Labels
None yet