AspNetZero - User index view thumbnail image question - asp.net

Question

I replicated all of the code used in the AspNetZero solution for the "profile picture" functionality. I'm referring to the function that allows the user to upload their own photo.
I have copied the existing modal, JS file and controller methods into my employee controller and employee folders respectively, as I wanted the same functionality.
The upload of the image and saving into the binary objects table is all working just fine.
The issue comes up when I try to display the thumbnail of the uploaded photo in my employee index view datatable column. I copied this functionality from the user index view in the solution.
When my employee index view is rendered the thumbnail does not appear. When I click on the image thumbnail it opens the new tab and throws a 404 error for my copied controller method.
Here is the JS code that displays the thumbnail image in the users index view:
targets: 1,
data: "userName",
render: function (userName, type, row, meta) {
var $container = $("<span/>");
if (row.profilePictureId) {
var profilePictureUrl = "/Profile/GetProfilePicture?t=" + row.profilePictureId;
var $link = $("<a/>").attr("href", profilePictureUrl).attr("target", "_blank");
var $img = $("<img/>")
.addClass("img-circle")
.attr("src", profilePictureUrl);
$link.append($img);
$container.append($link);
}
$container.append(userName);
return $container[0].outerHTML;
}
Here is the same code in my employee index view:
targets: 4,
orderable: true,
autoWidth: true,
data: "fullName",
render: function(fullName, type, row, meta) {
var $container = $("<span/>");
if (row.employeePictureId) {
var profilePictureUrl = "/Employee/GetProfilePictureById?id=" + row.employeePictureId;
var $link = $("<a/>").attr("href", profilePictureUrl).attr("target", "_blank");
var $img = $("<img/>").addClass("img-circle").attr("src", profilePictureUrl);
$link.append($img);
$container.append($link);
}
$container.append(fullName);
return $container[0].outerHTML;
}
The line of code that does not work is the ProfilePictureUrl line.
var profilePictureUrl = "/Employee/GetProfilePictureById?id=" + row.employeePictureId;
If I replace the above line with the line from the user index.js and call the profile controller method, it works just fine. But when I try to call my employee controller method it keeps throwing the 404 error.
My employee controller is at the same level in my solution as the profile controller. Both controller are part of the same area in my MVC app.

Answer 1

I just solved my issue. There is another profile controller which sits outside of the area folder. So the URL used in the users index.js does not need to mention the full path.
The users photo function is hitting the profile controller at the root level of the app and not the one inside of the area.
In my case I had to treat the URL just like I do with all the modals and scripts that are in my area.
Here is the solution that worked.
var empPhotoUrl = abp.appPath + 'AreaName/Employee/GetProfilePictureById?id=';