Records on the Character search page deep link to the profile pages for

their relevant Book records

Author: GaProgMan

Angular2/ClientApp/app/components/characters/characters.component.html

@@ -22,7 +22,9 @@ <h1>Character Search</h1>
         <tbody>
         <tr *ngFor="let char of characters">
             <td colspan="2">{{ char.characterName }}</td>
-            <td>{{ char.booksAsString() }}</td>
+            <td>
+                <span [innerHTML]="char.booksWithLineBreaksAndAnchors()"></span>
+            </td>
         </tr>
         </tbody>
     </table>

Angular2/ClientApp/app/components/characters/characters.component.ts

@@ -39,7 +39,7 @@ export class CharacterComponent {
                 if(resultJson.success) {
                     this.characters = [];
                     result.json().result.forEach((character:ApiCharacter) => {
-                        this.characters.push(new Character(character.characterName,  character.books));
+                        this.characters.push(new Character(character.characterName, character.books));
                     });
                 }
 
@@ -53,5 +53,5 @@ export class CharacterComponent {
 
 interface ApiCharacter {
     characterName: string;
-    books: string[];
+    books: { [key: number]: string };
 }

Angular2/ClientApp/app/models/Book.ts

@@ -66,7 +66,7 @@ export class Book extends BookBaseViewModel {
             for(let index = 0; index < this.series.length; index++) {
                 let seriesRecord = this.series[index];
                 returnString +=
-                    `<a href='/seriesProfile/${seriesRecord.seriesId}'>${seriesRecord.seriesName}</a>`;
+                    `<a href='/seriesProfile/${seriesRecord.seriesId}'>${seriesRecord.seriesName}</a></br>`;
             }
             return returnString;
         };

Angular2/ClientApp/app/models/Character.ts

@@ -1,19 +1,43 @@
 export class Character {
-    constructor(characterName: string, books: string[]) {
+    constructor(characterName: string, books: { [key: number]: string }) {
         this.characterName = characterName;
-        this.books = books;
+
+        if (books) {
+            this.books = [];
+            for (let key in books) {
+                let value = books[key];
+                this.books.push(new BookIdNameViewModel(key, value));
+            }
+        }
 
         this.registerFunctions();
     }
     characterName: string;
-    books: string[];
-    booksAsString: () => string;
+    books: BookIdNameViewModel[];
+    booksWithLineBreaksAndAnchors: () => string;
 
     registerFunctions = () => {
-        this.booksAsString = (): string =>{
-            return this.books.length > 0
-                ? this.books.join(',')
-                : '';
+        this.booksWithLineBreaksAndAnchors = (): string =>{
+            if (this.books.length == 0) {
+                return '';
+            }
+            
+            let returnString = '';
+            for(let index = 0; index < this.books.length; index++) {
+                let bookRecord = this.books[index];
+                returnString +=
+                    `<a href='/bookProfile/${bookRecord.bookId}'>${bookRecord.bookName}</a></br>`;
+            }
+            return returnString;
         }
     }
+}
+
+export class BookIdNameViewModel {
+    constructor(bookId: string,  bookName: string) {
+        this.bookId = bookId;
+        this.bookName = bookName;
+    }
+    bookId: string;
+    bookName: string;
 }