Create a large form with 15 or more fields #7367

17 Answer(s)

• 

  0

  exlnt created 5 years ago

  I have used Wizard and Tabbed Portlets from the Metronic UI for my large forms.

  I have also used Profile form from Metronic UI. Try these out.

  Save Cancel
• 

  0

  maliming created 5 years ago

  Support Team

  but I get an error: HTTP Error 415.

  What is the ContentType and request body of your http request header?

  You can see it in the browser's network panel.

  Save Cancel
• 

  0

  oaalvarado created 5 years ago

  Hi,

  Thanks exInt, I'll check the links you provided.

  Maliming, the ContentType is 'application/x-www-form-urlencoded'.

  I tried to do the call from javascript like this:

  (function () { $(function () { var _portsAppService = abp.services.app.ports;

      var portForm = null;
             
      $('#Save').click(function () {
          portForm = $('#CreatePortForm').serializeFormToObject();
          
          _portsAppService.create({
              port: portForm
          }
          );
      })
              
  });
  

  })();

  and I'm getting a Validation error message: "Your request is not valid!", which is correct, because I don't know how to call the validation from javascript. How can I call the validation from javascript for a View?

  Thanks.

  Save Cancel
• 

  0

  oaalvarado created 5 years ago

  I did some searching and I think the code in in the Login.cshtml, Login.js, EmailActivation.cshtml and EmailActivation.js files is what I need to do. I'm I right Maliming?

  Save Cancel
• 

  0

  oaalvarado created 5 years ago

  I'm still getting error HTTP Error 415:

  This is the Header info from Developer Tool:

  Save Cancel
• 

  0

  exlnt created 5 years ago

  @oaalvarado - If you have the below code in your js when calling the app service, it should handle the validation.

        var address = _$addressInformationForm.serializeFormToObject();
        _modalManager.setBusy(true);
        _addresssService
          .createAddress(address)
          .done(function(result) {
            abp.event.trigger("addressCreated", {
              id: result
            });
            _modalManager.close();
            abp.event.trigger("app.createAddressModalSaved");
          })
          .always(function() {
            _modalManager.setBusy(false);
          })
          .fail(function() {
            _modalManager.setBusy(false);
          });
  

  Your app service method should be like this.

          public async Task<long> CreateAddress(CreateAddressInput input)
          {
              var address = ObjectMapper.Map<Address>(input);
              if (AbpSession.TenantId != null)
              {
                  address.TenantId = (int)AbpSession.TenantId;
              }
              //Create address
              var newId = await _addressRepository.InsertAndGetIdAsync(address);
              return newId;
          }
  

  Save Cancel
• 

  0

  oaalvarado created 5 years ago

  Hi exInt,

  Thanks for the code. If I understand the code correctly, it is for a modal View. But I am not using a modal View, and want to use a normal View, because in the form I have to include several datatables, and this datatables will have modal Views to add or edit data.

  Also, I don't know how to fix the "HTTP Error 415". How can I specify the Content Type in the submit? I believe the correct Content Type would be "application/JSON", right?

  Save Cancel
• 

  0

  exlnt created 5 years ago

  I have used the Metronic Wizard for updating multiple tables. Each step in my wizard calls a different app service and updates a different table. I think you can use the wizard to do the same for your use case.

  Save Cancel
• 

  0

  maliming created 5 years ago

  Support Team

  hi oaalvarado

  Can you share the code for the create method of your portsAppService?

  At the same time, if you type in the chrome console: abp.services.app.ports.create So what is the output code?

  You can double-click the output to locate it in a JavaScript file.

  eg:

  

  Save Cancel
• 

  0

  oaalvarado created 5 years ago

  Hi maliming,

  This is the code for the Create method in portsAppService:

      [AbpAuthorize(AppPermissions.Pages_Ports_Create)]        
      public async Task Create(CreatePortDto input)
      {
          var organization = new Organization()
          {
              Name = input.Name,
              Logo =  null, //input.Logo,
              Address = input.Address,
              Phone1 = input.Phone1,
              Phone2 = input.Phone2,
              Fax = input.Fax,
              EMail1 = input.EMail1,
              EMail2 = input.EMail2,
              Website = input.Website,
              CategoryId =  input.CategoryId,
              CountryId = input.CountryId,
              CityId = input.CityId
          };
  
          var result = await _organizationRepository.InsertAsync(organization);
  
          var port = new PortDetail()
          {
              Code = input.Code,
              Governance = input.Governance,
              OrganizationId = result.Id
          };
  
          var result2 = await _portDetailRepository.InsertAsync(port);
      }
     
  

  This is the output for abp.services.

  

  

  I have noticed that when I click in the Save button, the code in the portsAppService is not called. Neither the code in the Javascript. I think maybe is something with the CSHTML? This is the Create.cshtml code (I removed part of the code that is irrelevant):

  @using CPMS.Authorization @using CPMS.Web.Areas.App.Models.Ports @using CPMS.Web.Areas.App.Startup

  @model CreatePortViewModel @{ ViewBag.CurrentPageName = AppPageNames.Application.Ports; }

  @section Scripts { <script abp-src="/view-resources/Areas/App/Views/Ports/Create.js" asp-append-version="true"></script> }

  **<form class="kt-form createPort-form" id="CreatePortForm" name="CreatePortForm" role="form" novalidate asp-action="Create" asp-controller="Ports" asp-area="App" method="post">**
      <div class="kt-subheader kt-grid__item">
          <div class="kt-subheader__main">
              <h3 class="kt-subheader__title">
                  <span>@L("CreateNewPort")</span>
              </h3>
              <span class="kt-subheader__separator kt-subheader__separator--v"></span>
              <div class="kt-subheader__desc">
                  @*<h3> @Model.Code - @Model.Name </h3>*@
              </div>
          </div>
          <div class="kt-subheader__toolbar">
              <div class="kt-subheader__wrapper">
                  <button id="ReturnPortList" class="btn btn-primary"><i class="fa fa-backward"></i> @L("PortsList")</button>
                 ** <button id="Save" type="submit" class="btn btn-secondary btn-outline-secondary"><i class="fa fa-save"></i> @L("Save")</button>**
                  <button id="SaveAndEdit" type="submit" class="btn btn-secondary btn-outline-secondary"><i class="fa fa-save"></i> @L("SaveAndEdit")</button>
              </div>
          </div>
      </div>
      
  

  When I click the submit button, it goes to this URL: http://localhost:62114/api/services/app/Ports/Create but displays the error: HTTP Error 415.

  Thanks for your help.

  Save Cancel
• 

  0

  ismcagdas created 5 years ago

  Support Team

  Hi @oaalvarado,

  You might have javascript problems. Can you try to enable preserve log in Google Chrome's Console and try again ?

  

  If you are redirected to this URL, then the 415 error is expected because browser makes a GET request to this URL instead of POST.

  Save Cancel
• 

  0

  oaalvarado created 5 years ago

  Hi @ismcagdas,

  Sorry for the late response, I was out of the office last week. I enabled the Preserve log in Dev Tools and tried to Save a new port. At first I had a javascript error, the script file was not loading. I fixed this, and now I get this error in the Dev Tool Console:

  POST http://localhost:62114/api/services/app/Ports/Create 415 (Unsupported Media Type)

  

  Thanks for your help.

  Save Cancel
• 

  0

  maliming created 5 years ago

  Support Team

  @oaalvarado Can I take a look at it remotely?

  If you can, please send a teamviewer connection info to [email protected]

  Save Cancel
• 

  0

  oaalvarado created 5 years ago

  Hi @maliming,

  The organization I work for doesn't allow the use of Teamviewer. I have Skype for Business. Is there another way to connect?

  Save Cancel
• 

  0

  oaalvarado created 5 years ago

  Hi @maliming,

  I did the following as a test, created a simple View with 2 fields, added the code in controller and model to save the data from the View, but when I click the button to do the Post action, it displays the error message HTTP Error 415. I did this in a demo project, not the one I'm working on.

  Save Cancel
• 

  0

  maliming created 5 years ago

  Support Team

  hi @oaalvarado Can you reproduce your problem using Zero's Demo project and share it with me([email protected])? I think it should be easy for you to reproduce the problem. This way I can locate and solve your problem as quickly as possible. : )

  Save Cancel
• 

  0

  oaalvarado created 5 years ago

  Hi maliming,

  The issue was with the javascript. It works now. Thanks for your help.

  Save Cancel