Implement Equality for Value Types in C#

Udemy

Introduction

This post is to focus on implementing Equality in Value Types i.e. overriding Equality behavior for our own implemented Value Types which is basically defining that how to decide two objects of a type are equal or not. 

Background

As we are now aware of the fact that the technique for checking equality for Value Types and Reference Types is different, so it would be better if we discuss both of them separately, that’s why we will be focusing on each of them in separate posts to have clear understanding on how we can override the Equality for both of these.

This post will particularly focus on the Value Types and for Reference Types we will see in some future post.

Why we need it?

The first question that might come in mind is “Why we should override the Equality for Value Type”, we will see with a simple example and it will help you understand that fact that overriding the Equality behavior for Value Types is always a good idea indeed. We will define a struct later down the road and will implement the Equality of it.

Steps to Implement Equality for Value Type

For overriding the Equality for a Value Type, there are some necessary steps that should be performed which are mentioned below.

We will need to:
  • override the virtual Equals method of Object
  • implement IEquatable<T> interface and provide the implementation of Equals() method of it
  • provide the overloaded implementation for == and != operator method
  • override the GetHashCode method of Object class

Possible Reasons for implementing Equality

So before we start discussing how we can implement Equality for a Value Type, let’s think a little on what are the possible reasons that would make us think that we should define our own Equality behavior for a Value Type instead of using the default one that framework already provides.
So why would you want to override it, the following are the main reasons for that:
  • We want to be able use == operator for comparing the objects of our Value Type. If you remember we discussed previously that == operator does not work for value types and to make it work we need to do some implementation (i.e. overload == operator) in our particular Value Type
  • We have also seen previously that the framework provided implementation uses Reflection for checking the values of each field of that type which is obviously affect the performance as Reflection is slow which results in poor performance of code.
  • We also need sometimes different behavior for comparison of a particular type, though this is not usually required but can be needed in some cases, as the default behavior for Value Types considers two objects to be equal if all of their fields also have the same content which is absolutely fine most of the time.

It is recommended approach to implement Equality for your own defined Value Types that would be used further in your code base. Other developers using your defined Value Type would not get surprised or frustrated when trying to compare two objects of it by using == operator and came to know that they can’t do it.

We can skip overriding the equality for those types that we know we will be using internally in the code base and won’t be exposed to complete code base for usage and we know what we wouldn’t be needing to compare the objects frequently, so implementing equality for those types is not that much needed and would be a waste of time as a result.

Example

We will create an example struct named Employee to illustrate about implementing Equality for a Value Type. This is how our Employee struct looks like now:

    public struct Employee
    {
        public string Name { get; }

        public Gender Gender { get; set; }

        public Department Department { get; set; }

        public Employee(string name, Gender gender, Department department)
        {
            Name = name;
            Gender = gender;
            Department = department;
        }

        public override string ToString()
        {
            return Name;
        }

    }

    public enum Department
    {
        HumanRecource,
        QualityAssurance,
        SoftwareDevelopment,
        ProjectManagement,
        ITOperations
    }

    public enum Gender
    {
        Male,
        Female
    }



We have a very simple Employee type as example which has a String property which will contain the name of employee and one enumeration property to hold the gender of employee and another enumeration for Department which will be used to track the Department of the employee. We will define our own implementation later to dictate that how to decide if two employee instances are equal or not.

There are multiple things that we need to take care and implement in our Employee type for implementing Equality. The first thing that we need to do is override the Object.Equals() method so that instead of default implementation getting invoked which is obviously slow because of Reflection involved, by providing implementation for this method it will enhance the performance of the Type, so overriding Equals method will eliminate the equality check using Reflection and will make it efficient and we will be able to see significant performance improvement.

But wait, Object.Equals() method takes parameter of type Object which means that boxing will happen and we know it also hurts the performance of our code, as boxing and unboxing has its own cost involved, so here we would want to avoid that one as well some way.

For avoiding both Reflection and boxing we will need to implement the IEquatable<Employee> interface for our type Employee. Now we will have efficient implementation of Equals() method in comparison with the framework provided one and another plus point of doing this is that now we have a much better implementation which is also type safe.

We will need to provide the overloaded implementation for == and != operators as it is normally considered a good practice to do all of the following things when overriding Equality:
  • Object.Equals method overriding
  • Implementing IEquatable<T> interface for that type
  • Implementing == and != overloaded methods
  • Object.GetHashCode method overriding
This is important to do because it will make sure that checking for equality for two objects of that type will give the same result, otherwise it can be confusing for the calling code who will be utilizing our type and can cause problems in future.

For Example, if we just implement the overloads for == and != operator and we don’t provide the override for Object.Equals method then what will happen is that the result of Equals method can be different from the result of == operator which will be troublesome for the code that will be utilizing our types.

There is also another method in Object class called GetHashCode, whenever we override the Object.Equals method for a type then another thing that must be done is overriding the GetHashCode method as well.

Step1 - Implementing IEquatable<T> Interface

Now let’s jump in to the Visual Studio and let’s start implementing the IEquatable<Employee> interface for out Person type. We will need to inherit our struct from IEquatable<Employee> and using the code refactoring feature of Visual Studio:

It will add the Equals method without any implementation for the IEquatable<Employee> which would look like:

        public bool Equals(Employee other)
        {
            throw new NotImplementedException();
        }


Now we just need to provide the logic which would be used to identify that the two objects of Employee are equal or not which for this particular example we will do by checking the name and department of the employee is same, or we can also add the Gender if we like as this is just for getting understanding how we can implement it so it doesn’t matter much.

After implementing the Equals method, here is how the method now looks like:


        public bool Equals(Employee other)
        {
            var IsEqual = this.Name == other.Name && this.Department == other.Department;

            return IsEqual;
        }


So the two objects of Employee will be considered Equal if they both contain in Name field and Department field same value. Our one field is of type String which does the value equality for == operator and the other is Enum which is a primitive type in C# so we know that in case of primitive type also == operator checks for value Equality, so the both operations will check for value equality which is what we are trying to do here.

Step 2 - Overriding Object.Equals Method

As we are done with the IEquatable<Employee> part, let’s now override the Equals method so that it also returns the same result that we would get when checking for equality via IEquatable<Employee>, the implementation for which would be:

        public override bool Equals(object obj)
        {
            var IsEqual = false;

            if(obj is Employee)
            {
                IsEqual = Equals((Employee)obj);
            }

            return IsEqual;
        }


What we are doing here is that first we need to make sure that the object that is passed in as parameter is of type Employee which totally makes sense as Object.Equals is not type safe and it is possible to pass an object of type Person instead of Employee and the compiler will not give any compile time error but the code would fail at run-time in that case, but adding that if block would save us from breaking the code at run-time and the method will simply return false which is the correct result as object of type Person and Employee can never be equal.

The thing to note here is that this Object.Equals override will be less efficient than Equals method implementation of IEquatable<T> because the former one has cost of Boxing when it will get called and then we are unboxing it back to Employee which IEquatable<Employee> implementation saves us from these.

What we can do is try to always call using the IEquatable<T> method, if we are concerned about performance and memory cost.

Step 3 - Overloading == and != Operator

Now let’s also implement the == and != operator for Employee which would make sure that checking for Equality using these will return consistent result what we were getting using Object.Equals or IEquatable<Employee> Equals method. So let’s add the implementation for == operator first which is:

        public static bool operator ==(Employee employee,Employee otherEmployee)
        {
            var IsEqual = employee.Equals(otherEmployee);

            return IsEqual;
        }


The method is pretty simple, it is also reusing the Equals method implementation that we did for IEquatable<Employee>, if we build the code it would not build and will give error saying that it hasn’t found the implementation of  != operator, in C# if we overload == operator for a type it is mandatory to provide the implementation for inverse of it i.e. != operator implementation as well, otherwise we will get the following compile time error:

Error CS0216: The operator 'Employee.operator ==(Employee, Employee)' requires a matching operator '!=' to also be defined

 If we have overloaded any one of the operator either == or != we would need to implement the other one as well, so let’s implement the other one as well:

        public static bool operator !=(Employee employee, Employee otherEmployee)
        {
            var IsNotEqual = !employee.Equals(otherEmployee);

            return IsNotEqual;
        }

We can see that it is just inverting the result returned the Equals method of IEquatable<Employee> and passing it back to the caller. Now if we again build our Solution we will be able to build it successfully without any errors.

 Step 4 - Implementing GetHashCode

It is a practice and considered mandatory that if we override the Equals method for a type then we must also provide the overridden implementation for GetHashCode().
If we peek in to the implementation of Object we will see that there is a virtual method present in it named GetHashCode, its purpose is to return the 32-bit hash of the value which is contained in the object itself.



you might be wondering what is the purpose of this code, the GetHashCode method is used by types that internally use HashTables to store the objects which are normally Collections so they consume this method and get the hash value of the object to be used in the hash table as HashTables utilize the hash codes of the objects. In Framework Class Libraries the Dictionary<TKey,TValue> also uses HashTable internally.
Hash Codes is a complete topic on which a full article can be written to cover its aspects and we will not not be focusing in details on it. How Hash Tables work is that if two objects return true when called Equals method on them, then the Hash Codes for both objects should also be returned same when we call GetHashCode method on both which in our case would mean that the following line should return true as well.
So what it actually means is that If employee.Equals(OtherEmployee) results in true then employee.GetHashCode() == otherEmployee.GetHasCode() should also return true as result. If the GetHashCode method is not implemented how it is required then the using Dictionary on our type wouldn’t work properly and can cause problems.

Now let’s add the implementation for our Employee type GetHashCode method which would be:
        public override int GetHashCode()
        {
            return Name.GetHashCode() ^ Department.GetHashCode();
        }


So it is quite simple to understand that what we are doing above, we are just taking the HashCode for our String field Name and Department Enumeration and combining them using XOR as both the framework provided types so there is already implementation presentation for generating the Hash Code for these types, so we are just reusing the Hash Codes that are already available and provided by framework.

Now let’s add some code in the Main method to verify what we have implemented is working as expected, add the following code in the Main and run it:


        static void Main(string[] args)
        {


            Employee ehsan = new Employee("Ehsan Sajjad", Gender.Male, Department.SoftwareDevelopment);
            Employee ehsan2 = new Employee("Ehsan Sajjad", Gender.Female, Department.SoftwareDevelopment);

            Employee bilal = new Employee("Bilal Asghar", Gender.Male, Department.QualityAssurance);

            object ehsanObj = ehsan;

            Console.WriteLine(ehsan.Equals(ehsan2));
            Console.WriteLine(ehsanObj.Equals(ehsan2));
            Console.WriteLine(ehsan == ehsan2);

            Console.WriteLine(ehsan.Equals(bilal));
            Console.WriteLine(ehsanObj.Equals(bilal));
            Console.WriteLine(ehsan == bilal);

            Console.ReadKey();

      }


The following is the result which was printed on the Console:


We can observe the for ehsan and ehsan2 objects all the three conditions have evaluated to return true which of course means that both are equal which was expected as this is how we defined to check for equality in our type, though we defined Gender field different in both objects but it has evaluated that both are equal as we are not considering Gender field when deciding that if two are equal or not.

Summary

Following are the points that we learned in this post:
  • We learned how to provide Custom implementation for Equality checking of Value Types
  • Implementing Equality for Value Types is normally good to do as it would improve performance by eliminating boxing/unboxing and reflection cost which can make our code inefficient.
  • There are multiple things to take care of when overriding equality for Value Types which includes:
    • Implementing IEquatable<T> interface of that Value Type which will have type safe Equals method for checking two object of a type T
    • Overriding the Object.Equals method which in turn calls the Equals method which we implemented for IEquatable<T>
    • Implementing the == and != operator overloads which also call the Equals method on IEquatable<T>
    • Implementing GetHashCode of Object for our value type T
  • This is the recommended approach for implementing Equality for Value Types and this is not recommended way in case of Reference Types.



AJAX CRUD in Grid using JQuery DataTables in ASP.NET MVC 5

Udemy

Introduction

I frequently come across questions on online forums like StackOverflow in which the questioners are able to create CRUD operations for their entity which is a normal form post, but they struggle implementing the CRUD via ajax so that page does not reloads completely for better User Experience.

In this post, I will be addressing this problem and we will learn that how can implement CRUD using JQuery DataTables in one page without any full page reloads.

Background

I had been writing in last few posts about the usage of JQuery DataTables and it can be leveraged to build a GridView like functionality in asp.net mvc, we saw how we can install it using NuGet Package Manager and implement a simple gird using the plugin which provides us the essential features like Sorting, Searching and Pagination, then we saw how we can implement the paging, filtering and Ordering, then we proceeded to see how advanced search can be added for more better user experience.

If someone wants to have refresher or interested to read the previous posts related, they can be found here:

In this post we will learn how we can add create, update and delete operations support in the grid that we already implemented using JQuery DataTables. The end result will look something like:


 Database Creation using Script

First of all we will run the script for database and tables creation that would be essential for this post. Following is the script for that:

CREATE DATABASE [AdvancedSearchGridExampleMVC]
GO
CREATE TABLE [dbo].[FacilitySites] ([FacilitySiteID] UNIQUEIDENTIFIER NOT NULL,
                                    [FacilityName]   NVARCHAR (MAX)   NULL,
                                    [IsActive]       BIT              NOT NULL,
                                    [CreatedBy]      UNIQUEIDENTIFIER NOT NULL,
                                    [CreatedAt]      DATETIME         NOT NULL,
                                    [ModifiedBy]     UNIQUEIDENTIFIER NULL,
                                    [ModifiedAt]     DATETIME         NULL,
                                    [IsDeleted]      BIT              NOT NULL
                                   );
GO

CREATE TABLE [dbo].[Assets] (
                             [AssetID]                   UNIQUEIDENTIFIER NOT NULL,
                             [Barcode]                   NVARCHAR (MAX)   NULL,
                             [SerialNumber]              NVARCHAR (MAX)   NULL,
                             [PMGuide]                   NVARCHAR (MAX)   NULL,
                             [AstID]                     NVARCHAR (MAX)   NOT NULL,
                             [ChildAsset]                NVARCHAR (MAX)   NULL,
                             [GeneralAssetDescription]   NVARCHAR (MAX)   NULL,
                             [SecondaryAssetDescription] NVARCHAR (MAX)   NULL,
                             [Quantity]                  INT              NOT NULL,
                             [Manufacturer]              NVARCHAR (MAX)   NULL,
                             [ModelNumber]               NVARCHAR (MAX)   NULL,
                             [Building]                  NVARCHAR (MAX)   NULL,
                             [Floor]                     NVARCHAR (MAX)   NULL,
                             [Corridor]                  NVARCHAR (MAX)   NULL,
                             [RoomNo]                    NVARCHAR (MAX)   NULL,
                             [MERNo]                     NVARCHAR (MAX)   NULL,
                             [EquipSystem]               NVARCHAR (MAX)   NULL,
                             [Comments]                  NVARCHAR (MAX)   NULL,
                             [Issued]                    BIT              NOT NULL,
                             [FacilitySiteID]            UNIQUEIDENTIFIER NOT NULL
                            );

GO

CREATE NONCLUSTERED INDEX [IX_FacilitySiteID]
   ON [dbo].[Assets]([FacilitySiteID] ASC);

GO
ALTER TABLE [dbo].[Assets]
    ADD CONSTRAINT [PK_dbo.Assets] PRIMARY KEY CLUSTERED ([AssetID] ASC);

GO

ALTER TABLE [dbo].[Assets]
   ADD CONSTRAINT [FK_dbo.Assets_dbo.FacilitySites_FacilitySiteID] FOREIGN KEY ([FacilitySiteID]) _
REFERENCES [dbo].[FacilitySites] ([FacilitySiteID]) ON DELETE CASCADE;

GO


You can find the script in attached source code in file name dbScript.sql which also contains sample data to get started quickly, running it will create the DB and will add some sample data in the tables as well.

Create/Insert Operation

For the insertion part, first of all we need to create a partial view in Views >> Asset by right clicking the Asset folder and navigate to Add >> MVC 5 Partial Page (Razor) like the below screen shot:


Open the container view in which asset rows are being rendered which _AssetsPartial.cshtml located in Views >> Asset directory and add the html for the Add Asset button which will open up a popup for inserting a new asset row in database:

<button type="button" class="btn btn-default btn-md" data-toggle="modal" data-url="@Url.Action("Create","Asset")" id="btnCreateAsset">
  <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span> Add Asset
</button>

Now, open the Index View of Asset which is  Views >> Asset >> index.csthtml and in scripts section add the following jQuery code for the button click event which we just created above, it will call the create get action and will display the partial view in bootstrap modal to user, the code for which is:

$("#btnCreateAsset").on("click", function () {

       var url = $(this).data("url");

       $.get(url, function (data) {
               $('#createAssetContainer').html(data);

               $('#createAssetModal').modal('show');
       });

});

We also need to add bootstrap modal with container div in which we will be loading create partial view of Asset, so we will add the following html at the end of Index.cshtml view:

<div class="modal fade" id="createAssetModal" tabindex="-1" role="dialog" aria-labelledby="CreateAssetModal" aria-hidden="true" data-backdrop="static">
    <div id="createAssetContainer">
    </div>
</div>

Implementing Add GET Action 

Add action method for Asset Creation get request in the Asset controller file located at Controllers >> AssetController.cs which would be called by the above jQuery code, inside the action method we are populating the ViewModel and passing the instance back to PartialView as normally we do in mvc based application:

public ActionResult Create()
{
    var model = new AssetViewModel();
    model.FacilitySitesSelectList = GetFacilitiySitesSelectList();
    return View("_CreatePartial", model);
}

Add Partial View Creation:

Add a new Partial view in project in Asset Views for Create form, for that right click the Asset folder under Views in the Solution Explorer

Enter the name of partial view to be _CreatePartial in textbox or whatever name you think would be better in your case.



Implementing Add Partial View

Now we will write the partial view that we created in previous step _CreatePatial, add the following code in that View:

@model GridAjaxCRUDMVC.Models.AssetViewModel
@{
    Layout = null;
}

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">Add Asset</h4>
        </div>
        @using (Ajax.BeginForm("Create", "Asset", null, new AjaxOptions { HttpMethod = "Post", OnSuccess = "CreateAssetSuccess" }, new {  @class = "form-horizontal", role = "form" }))
        {
            <div class="modal-body">
                <div class="form-horizontal">
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    @Html.HiddenFor(model => model.AssetID, new { Value = Guid.NewGuid() })
                    <div class="form-group">
                        @Html.LabelFor(model => model.Barcode, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Barcode, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Barcode, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.SerialNumber, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.SerialNumber, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.SerialNumber, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.FacilitySiteID, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.DropDownListFor(model => model.FacilitySiteID, Model.FacilitySitesSelectList, "Select One", new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.FacilitySiteID, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.PMGuide, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.PMGuide, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.PMGuide, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.AstID, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.AstID, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.AstID, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.ChildAsset, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.ChildAsset, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.ChildAsset, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.GeneralAssetDescription, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.GeneralAssetDescription, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.GeneralAssetDescription, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.SecondaryAssetDescription, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.SecondaryAssetDescription, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.SecondaryAssetDescription, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Quantity, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Quantity, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Quantity, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Manufacturer, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Manufacturer, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Manufacturer, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.ModelNumber, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.ModelNumber, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.ModelNumber, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Building, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Building, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Building, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Floor, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Floor, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Floor, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Corridor, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Corridor, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Corridor, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.RoomNo, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.RoomNo, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.RoomNo, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.MERNo, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.MERNo, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.MERNo, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.EquipSystem, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.EquipSystem, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.EquipSystem, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Comments, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Comments, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Comments, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Issued, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            <div class="checkbox">
                                @Html.EditorFor(model => model.Issued)
                                @Html.ValidationMessageFor(model => model.Issued, "", new { @class = "text-danger" })
                            </div>
                        </div>
                    </div>


                </div>
            </div>
            <div class="modal-footer">
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <input type="submit" class="btn btn-primary" value="Save" />
                    </div>
                </div>
            </div>
        }
    </div>
</div>

Implementing Add/Create Post Action 

The important thing to note in the view code is the Ajax.BeginForm helper portion as the class Ajax should be enough to understand that it will post the model back to controller action via Ajax, which means that whole will not refresh i.e. no full postback will happen in terms on asp.net web forms.

The post action is simply mapping ViewModel object to the Model and then saving it in the repository:
[HttpPost]
public async Task<ActionResult> Create(AssetViewModel assetVM)
{
   if (!ModelState.IsValid)
        return View("_CreatePartial", assetVM);

   Asset asset = MaptoModel(assetVM);

   DbContext.Assets.Add(asset);
   var task = DbContext.SaveChangesAsync();
   await task;

   if (task.Exception != null)
   {
       ModelState.AddModelError("", "Unable to add the Asset");
       return View("_CreatePartial", assetVM);
   }

   return Content("success");
}

We are trying to save the newly entered asset in the database and tracking if it is saved successfully or not and if it saves successfully we are returning a string message “success” back to client side and in the success call back of Ajax Form we will be checking if operation was successful or not to do UI changes according to that.

Implementing Ajax Callback Function

We can see that in BeginForm helper method parameters we are specifying JavaScript function to be called when the Ajax Form successfully returns back from server i.e. OnSuccess = "CreateAssetSuccess"

Now let’s go to the index.cshtml view of Asset and define the success callback implementation:

function CreateAssetSuccess(data) {

    if (data != "success") {
       $('#createAssetContainer').html(data);
        return;
    }
    $('#createAssetModal').modal('hide');
    $('#createAssetContainer').html("");
    assetListVM.refresh();

}

What we are doing here is if the operation is not successful we are updating the client side html to notify the user about the failure of creation and if the insert goes successful we are closing the modal popup and refreshing the Grid to display the up to date information.

Edit/Update Operation:

Until now we should be able to run the application and successfully add new assets in the database via Ajax using the bootstrap modal which we created above, now let’s move to the update part of the Asset.
We will be adding another column in the datatable columns collection which will contain hyper link that will navigate to Edit View, but as we are using Ajax and bootstrap modal, we will be doing updates as well same way, so no redirect will be involved. Let’s get started.
Open the Index.csthml file and add a new column in the columns collection in jQuery datatable initialization, after updating the columns array our code would look like:

"columns": [
              { "title": "Bar Code", "data": "BarCode", "searchable": true },
              { "title": "Manufacturer", "data": "Manufacturer", "searchable": true },
              { "title": "Model", "data": "ModelNumber", "searchable": true },
              { "title": "Building", "data": "Building", "searchable": true },
              { "title": "Room No", "data": "RoomNo" },
              { "title": "Quantity", "data": "Quantity" },
              {
                  "title": "Actions",
                  "data": "AssetID",
                  "searchable": false,
                  "sortable": false,
                  "render": function (data, type, full, meta) {
                      return '<a href="@Url.Action("Edit","Asset")?id=' + data + '" class="editAsset">Edit</a>';
                     }
              }
           ]

We are setting the header of new column to display Actions as title and we would need to disable the searching and sorting for this column, as it is for edit operation and it does not makes sense to enable sorting and searching on this column. Next we are defining the render method of the column and we are generating anchor link html which could call the Edit action of Asset controller and will pass the current asset id to pull the information of it and display in the Edit View.

Defining Edit/Update GET Action:

After doing the datatable js changes, now we need to create a get action method which will pull the asset record from the database and will display it for editing to the user in a popup.
Let’s implement the Edit get action of it:

public ActionResult Edit(Guid id)
{
    var asset = DbContext.Assets.FirstOrDefault(x => x.AssetID == id);

    AssetViewModel assetViewModel = MapToViewModel(asset);

    if (Request.IsAjaxRequest())
        return PartialView("_EditPartial",assetViewModel);

    return View(assetViewModel);
}


The action simply retrieves the row from the database and after converting it to ViewModel passes it to back to partial view to rendered or returned back to the client side for processing, as no post backs would happen it will generate the html and will send the html back in response of ajax call which client side will handle and decide where to put that html.

Handling Action Links Events on Client Side using JQuery:

From the column render function you can see that there is class applied on anchor link called EditAsset, it is defined because jQuery event handler will be applied to the anchor link and Ajax call will be sent to server, let’s define the event handler for that in Index View:

$('#assets-data-table').on("click", ".editAsset", function (event) {

        event.preventDefault();

        var url = $(this).attr("href");

        $.get(url, function (data) {
            $('#editAssetContainer').html(data);

            $('#editAssetModal').modal('show');
        });

 });

Addition of Bootstrap Modal

Now add the bootstrap modal html in the Index View which will be placeholder for loading the Edit View, define it just after create  bootstrap modal html:

<div class="modal fade" id="editAssetModal" tabindex="-1" role="dialog" aria-labelledby="EditAssetModal" aria-hidden="true" data-backdrop="static">
    <div id="editAssetContainer">
    </div>
</div>

Edit/Update Partial View Creation:

Create another new partial view following the same steps which we did for adding _CreatePartial.cshtml which was for Create Asset, So add a new Partial View in the Asset folder in Views with name _EditPartial.cshtml and add the following code in it:

@model TA_UM.ViewModels.AssetViewModel
    @{ 
        Layout = null;
    }
<div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Edit Asset</h4>
            </div>
@using (Ajax.BeginForm("Edit", "Asset", null, new AjaxOptions { HttpMethod="Post", OnSuccess = "UpdateAssetSuccess" }, new { @class = "form-horizontal", role = "form" }))
            {
                <div class="modal-body">
                    <div class="form-horizontal">
                        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                        @Html.HiddenFor(model => model.AssetID)

                        <div class="form-group">
                            @Html.LabelFor(model => model.Barcode, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.Barcode, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.Barcode, "", new { @class = "text-danger" })
                            </div>
                        </div>
<div class="form-group">
                            @Html.LabelFor(model => model.SerialNumber, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.SerialNumber, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.SerialNumber, "", new { @class = "text-danger" })
                            </div>
                        </div>
<div class="form-group">
                            @Html.LabelFor(model => model.FacilitySiteID, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.DropDownListFor(model => model.FacilitySiteID,Model.FacilitySitesSelectList, "Select One", new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.FacilitySiteID, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.PMGuide, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.PMGuide, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.PMGuide, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.AstID, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.AstID, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.AstID, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.ChildAsset, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.ChildAsset, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.ChildAsset, "", new { @class = "text-danger" })
                            </div>
                        </div>
<div class="form-group">
                            @Html.LabelFor(model => model.GeneralAssetDescription, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.GeneralAssetDescription, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.GeneralAssetDescription, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.SecondaryAssetDescription, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.SecondaryAssetDescription, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.SecondaryAssetDescription, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.Quantity, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.Quantity, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.Quantity, "", new { @class = "text-danger" })
                            </div>
                        </div>
<div class="form-group">
                            @Html.LabelFor(model => model.Manufacturer, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.Manufacturer, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.Manufacturer, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.ModelNumber, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.ModelNumber, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.ModelNumber, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.Building, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.Building, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.Building, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.Floor, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.Floor, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.Floor, "", new { @class = "text-danger" })
                            </div>
                        </div>
<div class="form-group">
                            @Html.LabelFor(model => model.Corridor, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.Corridor, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.Corridor, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.RoomNo, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.RoomNo, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.RoomNo, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.MERNo, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.MERNo, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.MERNo, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.EquipSystem, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.EquipSystem, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.EquipSystem, "", new { @class = "text-danger" })
                            </div>
                        </div>
<div class="form-group">
                            @Html.LabelFor(model => model.Comments, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.Comments, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.Comments, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.Issued, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                <div class="checkbox">
                                    @Html.EditorFor(model => model.Issued)
                                    @Html.ValidationMessageFor(model => model.Issued, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
<div class="modal-footer">
                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <input type="submit" class="btn btn-primary" value="Save changes"/>
                            </div>
                        </div>
                    </div>
            }
        </div>
    </div>

The Edit View is also pretty same as we had for Insert except it would be posting to different action which would be responsible for handling the updates of a particular Asset row.

Implementing Edit/Update Post Action:

 Now let’s implement the post action of Edit:

        [HttpPost]
        public async Task<ActionResult> Edit(AssetViewModel assetVM)
        {

            assetVM.FacilitySitesSelectList = GetFacilitiySitesSelectList(assetVM.FacilitySiteID);
            if (!ModelState.IsValid)
            {
                Response.StatusCode = (int)HttpStatusCode.BadRequest;
                return View(Request.IsAjaxRequest() ? "_EditPartial" : "Edit", assetVM);
            }

            Asset asset = MaptoModel(assetVM);

            DbContext.Assets.Attach(asset);
            DbContext.Entry(asset).State = EntityState.Modified;
            var task = DbContext.SaveChangesAsync();
            await task;

            if (task.Exception != null)
            {
                ModelState.AddModelError("", "Unable to update the Asset");
                Response.StatusCode = (int)HttpStatusCode.BadRequest;
                return View(Request.IsAjaxRequest() ? "_EditPartial" : "Edit", assetVM);
            }

            if(Request.IsAjaxRequest())
            {
                return Content("success");
            }

            return RedirectToAction("Index");

        }


Handling Update Ajax Success CallBack

In Index.cshtml implement the OnSuccess callback function which will be called when the asset gets updated successfully, in the call back function modal would be closed and the form will be cleared so that if user opens for editing again the fresh html would be fetched and updated information will be displayed in View and of course datatable will also be refreshed to display the latest updates:

        /**** Edit Asset Ajax Form CallBack ********/

        function UpdateAssetSuccess(data) {

            if (data != "success") {
                $('#editAssetContainer').html(data);
                return;
            }
            $('#editAssetModal').modal('hide');
            $('#editAssetContainer').html("");
            assetListVM.refresh();

        }

The same approach will be followed for the details and delete action, let’s see the delete portion, first of all  open the Index view and let’s add the details and delete action hyperlinks in the render function where we defined the edit link above:

"render": function (data, type, full, meta) {
             return '<a href="@Url.Action("Edit","Asset")?id=' + data + '" class="editAsset">Edit</a> | <a href="@Url.Action("Details","Asset")?id=' + data + '">Details</a> | <a href="@Url.Action("Delete","Asset")?id=' + data + '">Delete</a>';
          }


Now the action column will contain three hyperlinks for Edit, Details and Delete of Asset.

Retrieve and Delete Operation:

At this stage we should be able to see the insert and update functionality working correctly, now we will move to the deletion part to see how we implement the Deletion part for Assets. For doing that, we will need to add class to the hyperlinks which we are generated in the render function for the column in which links will be appearing, let’s do that first, we need to define the render property for the last column in columns array of the DataTables initialization code, and we will define the how the column value should be rendered:

"render": function (data, type, full, meta) {
            return '<a href="@Url.Action("Edit","Asset")?id=' + data + '" class="editAsset">Edit</a> | <a href="@Url.Action("Details","Asset")?id=' + data + '" class="detailsAsset">Details</a> | <a href="@Url.Action("Delete","Asset")?id=' + data + '" class="deleteAsset">Delete</a>';
          }

We have added the detailsAsset and deleteAsset classes to the respective anchor tags so that we can bind the events using jQuery and do some logic to display details or delete particular asset.

After doing the above step, now we will be writing the events to handle the click of these two hyperlinks. We will have to write the following code to achieve it :

$('#assets-data-table').on("click", ".detailsAsset", function (event) {

                event.preventDefault();

                var url = $(this).attr("href");

                $.get(url, function (data) {
                    $('#detailsAssetContainer').html(data);

                    $('#detailsAssetModal').modal('show');
                });

Now as the handler for details tag is placed, let’s move to the view part and write the needed razor code in the respective view. So, Create a new partial view named _detailsPartial which will be responsible for displaying the details of the particular asset selected. For that again Right click the Asset folder in Views directory in Solution Explorer and do the same steps as previously and create the partial with the name mentioned above and add the following code in it.
@model GridAdvancedSearchMVC.Models.AssetViewModel

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">Asset Details</h4>
            <hr/>
        </div>

        <div class="modal-body">
            <dl class="dl-horizontal">
                <dt>
                    @Html.DisplayNameFor(model => model.Barcode)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.Barcode)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.SerialNumber)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.SerialNumber)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.FacilitySite)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.FacilitySite)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.PMGuide)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.PMGuide)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.AstID)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.AstID)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.ChildAsset)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.ChildAsset)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.GeneralAssetDescription)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.GeneralAssetDescription)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.SecondaryAssetDescription)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.SecondaryAssetDescription)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.Quantity)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.Quantity)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.Manufacturer)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.Manufacturer)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.ModelNumber)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.ModelNumber)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.Building)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.Building)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.Floor)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.Floor)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.Corridor)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.Corridor)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.RoomNo)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.RoomNo)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.MERNo)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.MERNo)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.EquipSystem)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.EquipSystem)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.Comments)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.Comments)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.Issued)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.Issued)
                </dd>

            </dl>

        </div>

    </div>
</div>

Details Get Action Implementation:

Now it’s the time to define the controller action code which will retrieve the asset information from the data source and will pass it back to view to be displayed to the user. Here is the code for controller action:

        public async Task<ActionResult> Details(Guid id)
        {
            var asset = await DbContext.Assets.FirstOrDefaultAsync(x => x.AssetID == id);
            var assetVM = MapToViewModel(asset);

            if(Request.IsAjaxRequest())
                return PartialView("_detailsPartial", assetVM);

            return View(assetVM);
        }

Implementing Delete Operation:

We will add the GET action method for delete which will get the particular asset from the repository and will display the details in popup, where user would be able to delete it or cancel it. Here is the code for the action method:
        public ActionResult Delete(Guid id)
        {
            var asset = DbContext.Assets.FirstOrDefault(x => x.AssetID == id);

            AssetViewModel assetViewModel = MapToViewModel(asset);

            if (Request.IsAjaxRequest())
                return PartialView("_DeletePartial", assetViewModel);
            return View(assetViewModel);
        }

Delete Partial View Addition

We will now add another partial view in the solution for delete part, so navigate to the Views >> Asset folder in the Solution Explorer and from the context menu which appears by right clicking the Asset folder, add a new View using the Option Add >> MVC 5 Partial Page (Razor) and name the partial view to _DeletePartial and add the following code to it:
@model GridAdvancedSearchMVC.Models.AssetViewModel


<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">Delete Asset</h4>
            <h3>Are you sure you want to delete this?</h3>

        </div>

        <div class="modal-body">
            <dl class="dl-horizontal">
                <dt>
                    @Html.DisplayNameFor(model => model.Barcode)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.Barcode)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.SerialNumber)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.SerialNumber)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.FacilitySite)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.FacilitySite)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.PMGuide)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.PMGuide)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.AstID)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.AstID)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.ChildAsset)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.ChildAsset)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.GeneralAssetDescription)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.GeneralAssetDescription)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.SecondaryAssetDescription)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.SecondaryAssetDescription)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.Quantity)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.Quantity)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.Manufacturer)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.Manufacturer)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.ModelNumber)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.ModelNumber)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.Building)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.Building)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.Floor)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.Floor)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.Corridor)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.Corridor)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.RoomNo)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.RoomNo)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.MERNo)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.MERNo)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.EquipSystem)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.EquipSystem)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.Comments)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.Comments)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.Issued)
                </dt>

                <dd>
                    @Html.DisplayFor(model => model.Issued)
                </dd>

            </dl>

            @using (Ajax.BeginForm("Delete", "Asset", null, new AjaxOptions { HttpMethod = "Post", OnSuccess = "DeleteAssetSuccess" }, new { @class = "form-horizontal", role = "form" }))
            {

                <div class="form-actions no-color">
                    @Html.HiddenFor(x => x.AssetID)
                    <input type="submit" value="Delete" class="btn btn-default" /> |
                    @Html.ActionLink("Back to List", "Index",null,new { data_dismiss = "modal" })
                </div>
            }
        </div>
    </div>
</div>

Now we need to again a container div for delete popup as well which will be holding the html returned by the partial view _DeletePartial as we did for other three operations, so add the following html in the Index.cshtml view of Asset :

<div class="modal fade" id="deleteAssetModal" tabindex="-1" role="dialog" aria-labelledby="DeleteAssetModal" aria-hidden="true" data-backdrop="static">
    <div id="deleteAssetContainer">
    </div>
</div>

Handling Delete Link Event with JQuery:

We also need to implement the delete button click event which will be responsible for calling the action method asynchronously and will add the response html to the popup container and the popup container will be displayed to user, the code for which would be:
$('#assets-data-table').on("click", ".deleteAsset", function (event) {

                event.preventDefault();

                var url = $(this).attr("href");

                $.get(url, function (data) {
                    $('#deleteAssetContainer').html(data);

                    $('#deleteAssetModal').modal('show');
                });

            });

Handling DELETE Ajax POST Success Callback:

If you notice here as well we are using Ajax.BeginForm helper method to post the GUID of Asset row that needs to be deleted, and we have specified a JavaScript success callback, but we haven’t yet defined the function in the Index view, so let’s do that as well, here is the function definition:
function DeleteAssetSuccess(data) {

                if (data != "success") {
                    $('#deleteAssetContainer').html(data);
                    return;
                }
                $('#deleteAssetModal').modal('hide');
                $('#deleteAssetContainer').html("");
                assetListVM.refresh();

            }

This is also quite same as we did for other actions, we are making sure that if deletion was successful or not, we update the UI accordingly, that’s what the above code is doing, it closes the popup, clears the html of the container div and refreshes the datatable ViewModel to reflect the latest changes in the grid.

Implementing Delete POST Action:

Lastly, we need to define the POST action for delete which will be responsible for deleting the row from the database table and will return the status of the action back to view in either case i.e. success or failure, let’s do that, here is the code for Delete post action:

        [HttpPost, ActionName("Delete")]
        public async Task<ActionResult> DeleteAsset(Guid AssetID)
        {
            var asset = new Asset { AssetID = AssetID };
            DbContext.Assets.Attach(asset);
            DbContext.Assets.Remove(asset);

            var task = DbContext.SaveChangesAsync();
            await task;

            if (task.Exception != null)
            {
                ModelState.AddModelError("", "Unable to Delete the Asset");
                Response.StatusCode = (int)HttpStatusCode.BadRequest;
                AssetViewModel assetVM = MapToViewModel(asset);
                return View(Request.IsAjaxRequest() ? "_DeletePartial" : "Delete", assetVM);
            }

            if (Request.IsAjaxRequest())
            {
                return Content("success");
            }

            return RedirectToAction("Index");

        }

Now run the application and you should be able to add update and delete rows via Ajax without navigating between the pages.



Equality Operator (==) Problem with Inheritance and Generics in C#

Udemy

Background

In the previous post, we learned that == operator does not works for non-primitive value types unless we overload the operator for that value type, and we saw how we can overload the equality operator to enable == operator comparison for non-primitive value types. We also compare the == operator and Object.Equals method to see how their behavior differs for primitive types, value types and reference types.

Comparison of == operator and Object.Equals

Here is the comparison of both:
  • For Primitive Types e.g. int, float, long, bool etc both the == operator and Object.Equals method will compare the values i.e. 1 is equal to but 1, but 1 is not equal to 0
  • For most of the Reference Types both the == operator and Object.Equals method will by default compare the references, you can modify this behavior by overloading the == operator or overriding the Object.Equals method but if you want the behavior of both to be consistent and don’t want to surprise other developers and yourself you must do the both (overload == operator and override the Equals method).
  • For Non-primitive Value Types the Object.Equals method will do the value equality using Refection which is slow and this is overridden behavior of course, but the equality operator is by default not available for value types unless you overload the == operator for that type which we saw in the example above.
  • There is also another minor difference that for reference types the virtual Equals method cannot work if the first parameter is null but that is trivial, as a workaround the static Equals method can be used which takes both the objects to be compared as parameter.

Previous Posts in the Series

You might want to read the previous posts in this series, if yes following are the links to the previous content related to it: 
You might want to read the previous posts in this series, if yes following are the links to the previous content related to it:

Introduction

In this post we will be seeing that why it is not always a good option to use == operator for doing equality, we will be seeing that how == operator does not work well with inheritance and generics and will see that the better options is to rely on  virtual Equals method.

Equality Operator and Inheritance Problem

Let’s create some example code that will illustrate how == operator behaves when inheritance is in play in  our code, so let’s declare two string type variables and we will check the result once again by doing equality check in 4 different ways that are available in C#:

public class Program
{
    public static void Main(string[] args)
    {

        string str = "Ehsan Sajjad";
        string str1 = string.Copy(str);

        Console.WriteLine(ReferenceEquals(str, str1));
        Console.WriteLine(str.Equals(str1));
        Console.WriteLine(str == str1);
        Console.WriteLine(object.Equals(str, str1));
    }
}

Output:

 The following is the output of the above executed code:



 First we are checking that if both string variables have reference to same string object using ReferenceEquals method, next we check using the instance method Equals of String type, on third line we are again checking for equality but this time using the == operator and lastly we are checking using the static Equals method of Object so that we can compare the result of all these 4 techniques. We should be able to tell what would be the result from the previous posts which we have done so far:
  • ReferenceEquals will for sure return false as both are reference to different object not the same object.
  • The Equals method of String type will also return true as both strings are identical (i.e. same sequence or characters).
  • == Operator will also return true as both string values are equal.
  • virtual Object.Equals call will also return true as the overridden implementation of String would be called  and it checks the equality of values of string.
All the above until now makes sense, now we will modify the above example a little, the only change we will do is instead of using variables of type String, we will use variables of type Object and we will see how the output differs from the above code, here is the code after converting it to use Object type instead of String:

static void Main(string[] args)
{

    Object str = "Ehsan Sajjad";
    Object str1 = string.Copy((string)str);

    Console.WriteLine(ReferenceEquals(str, str1));
    Console.WriteLine(str.Equals(str1));
    Console.WriteLine(str == str1);
    Console.WriteLine(object.Equals(str, str1));

   
}


Output:


So we can see the result is different than what we had before when we were using variables of type String. The other three ways methods are still returning the same result but the == operator equality check is now returning false instead of true stating that the two strings are not equal contradicting with the fact that they are equal actually and it’s also conflicting with the result of other two methods. 

Why is That?

The reason behind this is that the == operator is equivalent to a static method, and a static method cannot be a virtual method, what is actually happening when comparing using == operator here is that we are trying to compare two variables of type Object, we know that they are of type String in actual, but the compiler is not aware of that, and we know that for non-virtual methods, it is decided at compile-time that which implementation needs to be invoked and as the variables have been declared of type Object the compiler will emit code for comparing instances of type Object and if you navigate the source code for Object you will see that there is  no overload for == operator for it, so what will happen here is that == operator will do what it always do for comparing two reference types when there is no overload found for that type (i.e. it will check for reference equality) and as these two string objects are separate instances, the reference equality will be evaluated to false saying that the two objects are not equal.

Object Equals Method Should be Preferred

The above problem will never come with the other two Equals methods as they are virtual and the specific type will provide the override for it and calling them will always call the overridden implementation to correctly evaluate the equality of them, so in the above case overridden methods of String type will be called.

For static Equals method we already discussed in one of the previous posts that it internally calls the same virtual Equals method, it is just there where we want to avoid NRE (Null Reference Exception) and there is chance that the object on which we will be calling Equals method could be null.

So in case of inheritance Equals method overrides should be preferred when checking for equality instead of using == operator.

== Operator and Reference Equals

Another thing to note is that casting the operands of equality operator to object before comparing will always give the same result as calling the ReferenceEquals method. 

Some developers write that way to check for reference equality. We should be careful when doing reference equality that way because someone else reading that code in future might not understand or not aware that casting to object causes the comparison to be based of reference.

 But if we explicitly call the ReferenceEquals method that would clarify the intent that we want to do reference equality and it would clear all the doubts that what the code needs to do.

== Operator and Generics Problem

Another reason to avoid the == operator is if we are using generics in our code. To illustrate that let’s create a simple method which takes two generic parameters of type T and compares to check if both the objects are equal and print the result on the Console, the code for which would be:

static void Equals<T%gt;(T a, T b)
{
    Console.WriteLine(a == b);
}

The above example is obviously pretty simple and one can easily tell what it is actually doing. We are using equality operator to compare the two objects of type T, but if you try to build the above example in Visual Studio, it wouldn’t build and a compile time error would come saying:

Error CS0019 : Operator '==' cannot be applied to operands of type 'T' and 'T'

The above error we are seeing because the T could be any type, it can be a reference type or a value type or a primitive type and there is no guarantee that the type parameter which is being passed provided implementation of == operator for itself.

In C# generics there is no way to apply a constraint on the generic type or method which could force the past type parameter to provide the overload implementation of the == operator, we can make the above code build successfully by putting the class constraint on type T like:

static void Equals<t>(T a, T b) where T : class
{
    Console.WriteLine(a == b);
}


So we have put a constraint on generic type T to be a reference type due to which we are now able to compile the code successfully, as == operator can always be used on reference types with no problems and it will check for reference equality of two objects of reference type.

Temporary Solution

We are able to build the code now, but there is problem because what if we need to pass value type parameters on primitive types to the generic Equals method, that we will not be able to do as we had put the restriction to this method to only be called for reference types.

Let’s write some code in the main method which would create two identical strings as we did couple of times in previous posts as well:

class Program
{
    static void Main(string[] args)
    {

        Object str = "Ehsan Sajjad";
        Object str1 = string.Copy((string)str);

        Equals(str, str1);
           

    }

    static void Equals<T>(T a, T b) where T : class
    {
        Console.WriteLine(a == b);
    }
}

So guess what would be the output of the above code when we run it, it will evaluate the two strings to be equal or not? If we recall what we saw before was that for String type the == operator overload defined by String compares the values of the objects, so the above should print true on the Console, but it we run the code we will see the opposite result that it printed false:


So, the above code has given us unexpected result, we were expecting True to be printed on Console. The question which comes in mind instantly is because why it is evaluating to false, it looks like the == operator is checking the two objects for Reference Equality instead of Value Equality, but the question is why it is doing reference equality.

This is happening because even though the compiler knows that it can apply == operator to whatever the type T being passed, In the above case String and it has == operator overload, but compiler does not know that whether the generic type which is being used when using the method overloads the == operator or not, so it assumes that T wouldn't overload it and it compiles the code considering that the == operator is called on instances of type Object which clearly happened that it checked for Reference Equality.

This is very important to keep in mind when using == operator with generics. The == operator  will not use the equality operator overload defined by the type T and it will consider it as Object.

Again Object.Equals to Rescue

Now let’s change our generic method to use Equals method instead of equality operator which would be:

static void Equals<t>(T a, T b)
{
   Console.WriteLine(object.Equals(a,b));
}

We have removed the class constraint as Object.Equals can be called on any type and we are using the static method for the same reason that if one of the parameter is passed null our code wouldn’t fail and will work as expected, and now this method will work for both value types and reference types.

Now if we run the code again we will see that it printed the result as expected because the object.Equals will call the appropriate overridden implementation of Equals method at run-time as static method will call the virtual Equals method and we see the expected result True as both string values are equal.

Summary

  • == Operator doesn’t work well with Inheritance and might give you unexpected result when used with inheritance because the == operator is not virtual, so wherever possible virtual Equals or static Equals methods should be preferred.
  • == Operator also doesn’t work as expected when used in Generic class or methods and Equals method should be used with generic to avoid unexpected behavior in the program.