Base solution for your next web application
Open Closed

ADDPHONE METHODS IN STEP BY STEP DEVELOPMENT #3432


User avatar
0
tteoh created

I am a developer and I followed the ASP.NET MVC 5.x & AngularJS 1.x project type of Developing an Application Step by Step. And now I'm stuck in AddPhone Method.

<ins>Here is the problems:</ins>

  1. I followed the codes there and why is it showing a "?" rather than the details that I entered. I checked the database and it's uploaded. As figure shown below. [attachment=2:py6nz3ys]AddMethod(Failed).PNG[/attachment:py6nz3ys]

phoneService.addPhone(phone)
                    .then(function (result) {
                        abp.notify.success(app.localize('SavedSuccessfully'));
                        person.phones.push(result);
                        phone.number = '';
                       **vm.getPeople();**
                    });

The one that I highlighted is a way to show the exact details but the view is collapsed if use this. As figure shown below. [attachment=0:py6nz3ys]AddMethod(Collapsed).PNG[/attachment:py6nz3ys]

  1. Is there anyway to update the details immediately but without collapse the view? As figure shown below. [attachment=1:py6nz3ys]AddMethod(Succeed).PNG[/attachment:py6nz3ys]

2 Answer(s)
  • User Avatar
    0
    tteoh created

    Dear Support,

    Managed to resolved the issue as below:

    1. The current form does not show the newly added phone number. Therefore, have to call vm.getPeople() function to refresh the screen

    2. As mentioned in (1), have to call vm.getPeople() function to refresh the view and remove the code phone.number = ''

    3. Have the make the following code changes:

    • Updated the ng-class directive to compare using person.id == vm.editingPersonId instead of person == vm.editingPerson
    • Change vm.editingPerson to vm.editingPersonId (use Id explicitly instead of entire person object)
    • Updated the function vm.editPerson(person) to use Person.id instead of entire person object.
    • Updated vm.addPhone(phone, person) with additional codes: --> vm.getPeople(); // To refresh the view --> vm.editingPersonId = person.id; // To keep the last edited person expanded

    The above the user experience I felt is incomplete on the PhoneBook exercise as part of learning the framework.

    Thanks. /Tommy

  • User Avatar
    0
    alper created
    Support Team

    thank you. we'll check again.