jQuery click event on view load

This is how to fire jQuery event on ASP.NET Core MVC view load;

HTML

<div class="container">
    <div class="nav">
        <ul id="menu">
            <li id="link1"><a href="#">Topic One</a></li>
            <li id="link2"><a href="#">Topic Two</a></li>
            <li id="link3"><a href="#">Topic Three</a></li>
        </ul>
    </div>
    <div class="main">
        <div id="page1" class="content">
            <h1>Page 1</h1>
            <p>First section of content.</p>
        </div>
        <div id="page2" class="content">
            <h1>Page 2</h1>
            <p>Second section of content</p>
        </div>
        <div id="page3" class="content">
            <h1>Page 3</h1>
            <p>Third section of content.</p>
        </div>
    </div>
</div>

jQuery

<script type="text/javascript">
    $('#menu a').click(function (e) {
        hideContentDivs();
        var tmp_div = $(this).parent().index();
        $('.main div').eq(tmp_div).show();
    });

    function hideContentDivs() {
        $('.main div').each(function () {
            $(this).hide();
        });
    }
    hideContentDivs();

    //fire this event on view load
    $(function () {
        $('#menu li a:first').click();
    });

</script>

This function does the auto click on view load;

$(function () {
    $('#menu li a:first').click();
});

Resources;

https://forum.jquery.com/topic/menu-links-show-hide-content-in-another-div

https://stackoverflow.com/questions/7468950/execute-click-event-on-load

AutoMapper in ASP.NET Core

How to keep a separation between domain models and view models and let them exchange data in an easier and simple way? We write code that allows us to map domain model into view model. As we add more views and domain models, we end up writing more mappers. We write mappers to map domain transfer objects from database layer into domain objects.

This practice is repetitive. AutoMapper solve this problem. It’s a convention-based object-to-object mappers.

We are going to use these NuGet packages for ASP.NET Core 2.1;

AutoMapper.Extensions.Microsoft.DependencyInjection		v3.1.0
Microsoft.Extensions.DependencyInjection.Abstractions		v3.1.0

For ASP.NET Core V2.1, we will need at least V3..0.1 of AutoMapper.Extensions.Microsoft.DependencyInjection. This package will install AutoMapper package automatically.

Configure AutoMapper in Startup.cs class under ConfigureServices method;

//Auto mapper configuration
services.AddAutoMapper();
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);

The above single line works fine but If we want to explicit in configuration, the alternative is;

var mapperConfig = new MapperConfiguration(mc =>
{
    mc.AddProfile(new MappingProfile());
});
IMapper mapper = mapperConfig.CreateMapper();
services.AddSingleton(mapper);
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);

AutoMapper in Action

Create a user model in Model folder.

public class User
{
  public User(int id, string firstName, string lastName, string emailAddress)
  {
            Id = id;
            FirstName = firstName;
            LastName = lastName;
            EmailAddress = emailAddress;
  }

        public int Id { get; }
        public string FirstName { get; }
        public string LastName { get; }
        public string EmailAddress { get; }
}

Create a view model in Model folder that will be used to display User data.

public class UserViewModel

{
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string EmailAddress { get; set; }
 }

We need to tell AutoMapper to map from User Model to User View Model. For that we will use Profile. Profiles in AutoMapper are a way of organizing mapping collections. To create Profile, We create a new class and inherit from Profile. This class will hold mapping configuration of new classes.

public class MappingProfile : Profile
{
        public MappingProfile()
        {
            CreateMap<User, UserViewModel>();
            CreateMap<UserViewModel, User>();
        }
}

The same profile can be created like this;

public class MappingProfile : Profile
{
        public MappingProfile()
        {
            CreateMap<User, UserViewModel>().ReverseMap();
        }
}

We now have a MappingProfile class that creates the mapping between our User Model and User ViewModel. But how does AutoMapper know about our UserProfile class? Well, towards the start of this example we added this line of code to our ConfigureServices method in Startup.cs:

services.AddAutoMapper();

When our application starts up and adds AutoMapper, AutoMapper will scan our assembly and look for classes that inherit from Profile, then load their mapping configurations. I also have an alternative explicit implementation in startup class if you prefer.

Let’s create a new UserController in the Controllers folder and inject the IMapper interface into the constructor:

public class UserController : Controller
{
        private readonly IMapper _mapper;
        public UserController(IMapper mapper)
        {
            _mapper = mapper;
        }

        public IActionResult Index()
        {
            return View();
        }
}

As with Profiles, by calling AddAutoMapper in our Startup.cs ConfigureServices method, it’s taken care of registering IMapper for us. In Index Action method, let’s create a User object and use IMapper interface to call the Map method:

We give the Map method the type we want to map to and the object we would like to map from:

public IActionResult Index()
{
            var user = new User(1, "Shahzad", "Khan", "shahzad@msn.com");
            UserViewModel viewModel = _mapper.Map<UserViewModel>(user);
            return View(viewModel);
}

Finally create the view;

@model UserViewModel

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

<div>
    <h4>UserViewModel</h4>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.Id)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Id)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.FirstName)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.FirstName)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.LastName)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.LastName)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.EmailAddress)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.EmailAddress)
        </dd>
    </dl>
</div>
<div>
    @Html.ActionLink("Edit", "Edit", new { /* id = Model.PrimaryKey */ }) |
    <a asp-action="Index">Back to List</a>
</div>

Here is the page;

We just scratched the surface of what AutoMapper has to offer in terms of mapping objects from one to another.

Summary

First, you need both a source and destination type to work with. The destination type’s design can be influenced by the layer in which it lives, but AutoMapper works best as long as the names of the members match up to the source type’s members. If you have a source member called “FirstName”, this will automatically be mapped to a destination member with the name “FirstName”. AutoMapper also supports Flattening, which can get rid of all those pesky null reference exceptions you might encounter along the way.

Once you have your types, and a reference to AutoMapper, you can create a map for the two types.

CreateMap<User, UserViewModel>().ReverseMap();

The type on the left is the source type, and the type on the right is the destination type. To perform a mapping, use the Map method.

var userEntity = await _unitOfWork.GetAllUsersAsync();
List<UserViewModel> vm = Mapper.Map<List<UserViewModel>>(userEntity.Result);

References

https://docs.automapper.org/en/stable/Getting-started.html

https://automapper.org/

https://jimmybogard.com/

https://stackoverflow.com/questions/40275195/how-to-set-up-automapper-in-asp-net-core

https://stackoverflow.com/questions/50411188/trying-to-add-automapper-to-asp-net-core-2

https://stackoverflow.com/questions/13479208/automapper-auto-map-collection-property-for-a-dto-object/13499361

https://stackoverflow.com/questions/52218340/automapper-projectto-adds-tolist-into-child-properties

https://code-maze.com/automapper-net-core/

Send Email after Release Deployment in Azure DevOps

Azure DevOPS sends an email notification to team member after the compilation succeeds or fails. This is default behavior. We are more concerned when the deployment is complete so that manual or automated testing can be started.

Click on Project settings –> Notifications –> New Subscriptions –> Release –> A deployment is completed

The default settings are to send mail to all members of the current project when the deployment is complete. Specific settings can be changed according to project needs.

Now, trigger a deployment. If all goes well, you should be able to receive a similar email notification. I currently have two environments, and according to the configuration just now, any deployment on both environment will be notified.

Why it’s so hard to buy PS 5 console?

I wanted to buy PS5 for my son but couldn’t get one. I saw the listing on Wallmart.com and Gamestop.com. Tried to do “Buy” dance but couldn’t get one. They were sold within minutes.

My son looked at me and ask me Why? Here is the answer;

First things first: The people using bots to buy and resell PS5s probably aren’t standalone coders. They’re professional scalpers, and someone sold them a bot.

Read more here….