Base solution for your next web application
Open Closed

CreateRecordModal.js Issue #6899


User avatar
0
dntframework created

Hi,

We are creating our project under the "ASP.NET CORE MVC & JQUERY" development model and after several revisions we find the following problem when trying to save a record in a table of the database following the tutorial provided by asp.net.zero (https://docs.aspnetzero.com/documents/aspnet-core-mvc/latest/Developing-Step-By-Step-Core-Saving-Person)

Uncaught TypeError: Cannot read property 'createRecord' of undefined
at app.modals.CreateRecordModal.save (<anonymous>:24:24)
at _saveModal (common-scripts.min.js?v=vA1O4M4uaZQnqZ9HNaBPBzScMHs9G2pV771ZD1B3Pqo:1321)
at HTMLDivElement.<anonymous> (common-scripts.min.js?v=vA1O4M4uaZQnqZ9HNaBPBzScMHs9G2pV771ZD1B3Pqo:1362)
at HTMLDivElement.dispatch (app-layout-libs.min.js?v=kiKOH3Y_fJm5plIXFqEXEi1gXe_Aq_p_UmJ3EA2xe-k:5666)
at HTMLDivElement.elemData.handle (app-layout-libs.min.js?v=kiKOH3Y_fJm5plIXFqEXEi1gXe_Aq_p_UmJ3EA2xe-k:5474)

The error occurs in the file "_CreateRecordModal.js" since the object "_myService" has an "undefined" value

(function($) {
    app.modals.CreateRecordModal = function() {
        var _modalManager;
        var _myService = abp.services.app.productsBrands;
        var _$form = null;
        this.init = function(modalManager) {
            _modalManager = modalManager;
            _$form = _modalManager.getModal().find('form');
            _$form.validate();
        };
        this.save = function() {
            if (!_$form.valid()) {
                return;
            }
            var record = _$form.serializeFormToObject();
            _modalManager.setBusy(true);
            _myService.createRecord(record).done(function() {
                _modalManager.close();
                location.reload();
            }).always(function() {
                _modalManager.setBusy(false);
            });
        };
    };
})(jQuery);

Analyzing the content of the object "abp.services.app" we can see the following properties:

{
    timing: {…},
    tenantDashboard: {…},
    session: {…},
    organizationUnit: {…},
    notification: {…},
    …
}
account: { isTenantAvailable: ƒ, resolveTenantId: ƒ, register: ƒ, sendPasswordResetCode: ƒ, resetPassword: ƒ, …}
auditLog: { getAuditLogs: ƒ, getAuditLogsToExcel: ƒ, getEntityHistoryObjectTypes: ƒ, getEntityChanges: ƒ, getEntityTypeChanges: ƒ, …}
caching: { getAllCaches: ƒ, clearCache: ƒ, clearAllCaches: ƒ}
chat: { getUserChatFriendsWithSettings: ƒ, getUserChatMessages: ƒ, markAllUnreadMessagesOfUserAsRead: ƒ}
commonLookup: { getEditionsForCombobox: ƒ, findUsers: ƒ, getDefaultEditionName: ƒ}
demoUiComponents: { sendAndGetDate: ƒ, sendAndGetDateTime: ƒ, sendAndGetDateRange: ƒ, getCountries: ƒ, sendAndGetSelectedCountries: ƒ, …}
edition: { getEditions: ƒ, getEditionForEdit: ƒ, createEdition: ƒ, updateEdition: ƒ, deleteEdition: ƒ, …}
friendship: { createFriendshipRequest: ƒ, createFriendshipRequestByUserName: ƒ, blockUser: ƒ, unblockUser: ƒ, acceptFriendshipRequest: ƒ}
hostDashboard: { getDashboardStatisticsData: ƒ, getIncomeStatistics: ƒ, getEditionTenantStatistics: ƒ}
hostSettings: { getAllSettings: ƒ, updateAllSettings: ƒ, sendTestEmail: ƒ}
install: { setup: ƒ, getAppSettingsJson: ƒ, checkDatabase: ƒ}
invoice: { getInvoiceInfo: ƒ, createInvoice: ƒ}
language: { getLanguages: ƒ, getLanguageForEdit: ƒ, createOrUpdateLanguage: ƒ, deleteLanguage: ƒ, setDefaultLanguage: ƒ, …}
notification: { getUserNotifications: ƒ, setAllNotificationsAsRead: ƒ, setNotificationAsRead: ƒ, getNotificationSettings: ƒ, updateNotificationSettings: ƒ, …}
organizationUnit: { getOrganizationUnits: ƒ, getOrganizationUnitUsers: ƒ, getOrganizationUnitRoles: ƒ, createOrganizationUnit: ƒ, updateOrganizationUnit: ƒ, …}
payPalPayment: { confirmPayment: ƒ, getConfiguration: ƒ, cancelPayment: ƒ}
payment: { getPaymentInfo: ƒ, createPayment: ƒ, cancelPayment: ƒ, getPaymentHistory: ƒ, getActiveGateways: ƒ, …}
permission: { getAllPermissions: ƒ}
profile: { getCurrentUserProfileForEdit: ƒ, updateGoogleAuthenticatorKey: ƒ, sendVerificationSms: ƒ, verifySmsCode: ƒ, prepareCollectedData: ƒ, …}
role: { getRoles: ƒ, getRoleForEdit: ƒ, createOrUpdateRole: ƒ, deleteRole: ƒ}
session: { getCurrentLoginInformations: ƒ, updateUserSignInToken: ƒ}
stripePayment: { confirmPayment: ƒ, createSubscription: ƒ, updateSubscription: ƒ, getConfiguration: ƒ}
subscription: { upgradeTenantToEquivalentEdition: ƒ, disableRecurringPayments: ƒ, enableRecurringPayments: ƒ}
tenant: { getTenants: ƒ, createTenant: ƒ, getTenantForEdit: ƒ, updateTenant: ƒ, deleteTenant: ƒ, …}
tenantDashboard: { getMemberActivity: ƒ, getDashboardData: ƒ, getSalesSummary: ƒ, getRegionalStats: ƒ, getGeneralStats: ƒ}
tenantRegistration: { registerTenant: ƒ, getEditionsForSelect: ƒ, getEdition: ƒ}
tenantSettings: { getAllSettings: ƒ, updateAllSettings: ƒ, clearLogo: ƒ, clearCustomCss: ƒ, sendTestEmail: ƒ}
timing: { getTimezones: ƒ, getTimezoneComboboxItems: ƒ}
uiCustomizationSettings: { getUiManagementSettings: ƒ, changeThemeWithDefaultValues: ƒ, updateUiManagementSettings: ƒ, updateDefaultUiManagementSettings: ƒ, useSystemDefaultSettings: ƒ}
user: { getUsers: ƒ, getUsersToExcel: ƒ, getUserForEdit: ƒ, getUserPermissionsForEdit: ƒ, resetUserSpecificPermissions: ƒ, …}
userLink: { linkToUser: ƒ, getLinkedUsers: ƒ, getRecentlyUsedLinkedUsers: ƒ, unlinkUser: ƒ }
userLogin: { getRecentUserLoginAttempts: ƒ }
webLog: { getLatestWebLogs: ƒ, downloadWebLogs: ƒ }
proto: Object

Here we can see that the proxy is not being generated dynamically as indicated at the end of the tutorial ("Notice that; We used PersonAppService's createPerson method directly from javascript. This is possible by ABP's dynamic javascript proxy system.")

Could you help us with this?

Thanks


10 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team

    Does your application service layer have IProductsBrandsAppService interfaces and implementation classes?

    Such as: https://docs.aspnetzero.com/documents/aspnet-core-mvc/latest/Developing-Step-By-Step-Core-Creating-Person-Application-Service

  • User Avatar
    0
    dntframework created

    Yes, we have the corresponding interface and implementation. Up to here "https://docs.aspnetzero.com/documents/aspnet-core-mvc/latest/Developing-Step-By-Step-Core-Using-GetPeople-Method-From-MVC-Controller" the project works correctly.

    Then, in the "Creating a new person" stage, it works well until the "Opening the person modal" step, but the next step "Saving person" is where the error occurs and, as indicated in the previous ticket, we have detected that the problem is because the proxy "abp.services.app.person" has the value "undefined"

    Thanks

  • User Avatar
    0
    aaron created
    Support Team

    Show your implementation.

  • User Avatar
    0
    dntframework created

    Could you please confirm what part of code would you like to see (I've included in the first email part of the function).

    Thanks

  • User Avatar
    0
    aaron created
    Support Team

    IProductsBrandsAppService.

  • User Avatar
    0
    dntframework created
    using Abp.Application.Services;
    using Abp.Application.Services.Dto;
    using System.Threading.Tasks;
    using cscDemo.Dto.ProductsBrands;
    
    namespace cscDemo
    {
       public interface IProductsBrandsAppService : IApplicationService
       {
           ListResultDto<GetTableDto> GetTable(GetTableFilters input);
           //Task<GetRecordDto> GetRecord(IEntityDto input);
           //Task DeleteRecord(EntityDto input);
           Task CreateRecord(CreateRecordInput input);
       }
    }
    
  • User Avatar
    0
    dntframework created

    I've just copied the code, thanks!

  • User Avatar
    0
    aaron created
    Support Team

    Show your implementation of IProductsBrandsAppService.

  • User Avatar
    0
    dntframework created
    using System;
    using System.Collections.Generic;
    using System.Diagnostics;
    using System.Globalization;
    using System.Linq;
    using System.Linq.Dynamic.Core;
    using System.Threading.Tasks;
    using Abp.Application.Services.Dto;
    using Abp.Authorization;
    using Abp.Domain.Repositories;
    using Abp.Extensions;
    using Abp.Localization;
    using Abp.MultiTenancy;
    using Abp.UI;
    using cscDemo.Authorization;
    using cscDemo.Localization.Dto;
    
    using Abp.AutoMapper;
    using System.Linq.Dynamic;
    using Abp.Linq.Extensions;
    //using System.Data.Entity;
    //using System.Web.Http;
    using cscDemo.Dto.ProductsBrands;
    
    namespace cscDemo
    {
       class ProductsBrandsAppService : cscDemoAppServiceBase, IProductsBrandsAppService
       {
           private readonly IRepository<cscDemo.ProductsBrands> _myRepository;
           public ProductsBrandsAppService(IRepository<cscDemo.ProductsBrands> myRepository)
           {
               _myRepository = myRepository;
           }
    
           public ListResultDto<GetTableDto> GetTable(GetTableFilters input)
           {
               var retValues = _myRepository
                   .GetAll()
                   .WhereIf
                   (
                       !input.FilterName.IsNullOrEmpty(),
                       p => p.bnd_name.Contains(input.FilterName)
                   )
                   .OrderBy(p => p.bnd_name)
                   .ToList();
    
               return new ListResultDto<GetTableDto>(ObjectMapper.Map<List<GetTableDto>>(retValues));
           }
    
           public async Task CreateRecord(CreateRecordInput input)
           {
               var person = ObjectMapper.Map<ProductsBrands>(input);
               await _myRepository.InsertAsync(person);
           }
    
       }
    }
    
  • User Avatar
    0
    maliming created
    Support Team

    Please make your ProductsBrandsAppService class public.

    public class ProductsBrandsAppService : cscDemoAppServiceBase, IProductsBrandsAppService