Base solution for your next web application
Open Closed

Retrieve Id in _CreateOrEditModal.js #5199


User avatar
0
Mitch created

I need to change the standard behavior of _CreateOrEditModal.js for one of my Entities. Normally when saving, the modalManager closes the modal form and refreshes the underlying list. Instead I want to redirect to a different page and pass the Id of the newly created item.

However, I'm not sure how to obtain the new Id which in this case is a Guid. Using the example below I can easily access all of other fields from xyzClient, but not the Id which makes sense as it hasn't been generated at this point.

As I'm fairly new to Boilerplate/Zero, does anyone have any guidance how to get the new Id?

this.save = function () {
            if (!_$xyzClientInformationForm.valid()) {
                return;
            }

            var xyzClient = _$xyzClientInformationForm.serializeFormToObject();
			
			 _modalManager.setBusy(true);
			 _xyzClientsService.createOrEdit(
				xyzClient
			 ).done(function () {
               abp.notify.info(app.localize('SavedSuccessfully'));
               _modalManager.close();
              //Get rid of the following line
              // abp.event.trigger('app.createOrEditXyzClientModalSaved');
              //Replace with something like this
              //window.location.href = "/App/XyzClients/OpenFile?id=" + xyzClient.id;
			 }).always(function () {
               _modalManager.setBusy(false);
			});
        };

5 Answer(s)
  • User Avatar
    0
    alper created
    Support Team

    do you mean to do this in Rad Tool?

  • User Avatar
    0
    Mitch created

    No, I'm more than happy to use some new or existing code. I just don't want to duplicate any existing methods that might be available that I'm not aware of.

    As I mainly code in C#/MVC I often find JS less than easy to navigate so I was hoping for a bit of guidance from someone a with a bit more experience of JS/Boilerplate/Zero to show the best approach.

  • User Avatar
    0
    alper created
    Support Team

    first you need to change your application service method signature so that it returns the GUID of the entity. Let's say you save User entity.

    public interface IUserAppService : IApplicationService
    {
            Task<Guid> SaveUser(SaveUserInput input);
    }
    
    public class UserAppService : AbpZeroTemplateAppServiceBase, IUserAppService
        {
    
     public async  Task<Guid> SaveUser(SaveUserInput input)
            {
                if (input.User.Id.HasValue)
                {
                    await UpdateUserAsync(input);
                    return input.User.Id.Value;
                }
                else
                {
                  var newUserId = await CreateUserAsync(input);
                  return newUserId;
                }
            }
    
    }
    

    In your JavaScript code

    this.save = function () {
                if (!_$userForm.valid()) {
                    return;
                }
    
                var  user = _$userForm.serializeFormToObject();
             
              _modalManager.setBusy(true);
              _userService.save(user ).done(function (userId) {
                   abp.notify.info(app.localize('SavedSuccessfully'));
                   window.location.href = "/App/Users?id=" + userId;           
                }).always(function () {
                   _modalManager.setBusy(false);
             });
            };
    

    PS: it's some pseudo code to show you how to retrieve the Ajax data from server.

  • User Avatar
    0
    Mitch created

    That's great, thanks so much for pointing me in the right direction. I'm under a lot of time pressure so all help is appreciated.

    By the way, I'm looking forward to Blazor becoming mainstream to minimize my need to use Javascript!

  • User Avatar
    0
    alper created
    Support Team

    yeah Blazor is awesome and we all prefer writing C# instead of JavaScript