Basic CRUD operation using Entity Framework

Basic set up follow this:

Environment setup sample here

Model Class:
public class Employee
    {

       public Employee()
       {

       }

       [Key]
       public int EmpID { get; set; }
       public string EmpName { get; set; }
       public string Address { get; set; }
    }

Context Class:


    public class MyContext : DbContext
    {

       public MyContext()
            : base("dbConnectionName")
       {
           Database.SetInitializer<MyContext>(new CreateDatabaseIfNotExists<MyContext>());
           
       }

     public  DbSet<Employee> Employees { get; set; }

    }


Controller:

 MyContext context = new MyContext();
//Add
            Employee emp = new Employee() { EmpID = 1, EmpName = "Arul", Address = "Cbe" };
            context.Employees.Add(emp);

            context.SaveChanges();

//Edit
  Employee emp = new Employee() { EmpID = 1, EmpName = "Kumar", Address = "Chennai" };
            context.Entry(emp).State= EntityState.Modified;

            context.SaveChanges();

//Delete
  Employee emp = context.Employee .Find(1);
                if (emp == null)
                {
                    return HttpNotFound();
                }
                context.Employee .Remove(emp );
                 context.SaveChanges();

//Read
List<Employee >empList=context.Employee.select(x=>x.EmpID ,x.EmpName ,x.Address).ToList();

Angular 2 tutorials links

1. https://angular.io/docs/ts/latest/guide/

2. https://www.sitepoint.com/angular-2-tutorial/

Install SSL certificate in local IIS

1.Open IIS (run as admin)

2.Sites -> Choose Default web site 

3. Right side the top Actions -> Edit site -> Bindings (click)

4. Site Bindings popup will be appear.

4.1 In that popup click Add button

5. From Type -> choose https

6.Select IP address(localhost)

7.Select SSL Certificate (localhost)

8. Click OK and restart IIS.

Render partial view

View(normal view)
@model HoleObject

<div id="add">
@Html.Partial("_add", Model.Add)//add
</div>
<div id="list">
@Html.Partial("_list", Model.ListObj)//display the list
</div>

<script>
 $("#Add").on("submit", "form", function (e) {
                    $(".js-loading").removeClass("hide");
                    e.preventDefault();
                   var form =new FormData($(this)[0])
                   // var form = $(this);
                    $.ajax({
                        url: 'localhost/Add',
                        type: "POST",
                        data: form.serialize(),
                        success: function (response) {
                            if (response.Errors != null && response.Errors != '') {
                               alert(response.Errors)
                            }
                            else {
                                getList ();
                            }
                        },
                        error: function (errorcode, textStatus, errorThrown) {
                            alert("Error '" + errorcode.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')");
                        },
                        complete: function () {
                            $(".js-loading").addClass("hide");
                        }
                    });
                });
var getList = function () {
                $.ajax({
                    url: 'localhost/List',
                    data: { id: '@Model.Id' },
                    type: "GET",
                    success: function (html) {
                        if ($.trim(html) != '') {
                            $("#list").html('');
                            $("#list").html(html);
                            $(".js-loading").removeClass('hide');
                        }
                    }
                });
            }
            getList ();
<script>

-------------------------------------------------------------------------------------------------------------------------
//controller
public PartialViewResult Add(int id)
        {
            var model = new Add();
            try
            {
                   if(id!=0)
                          model=ExistData where id==id//get existing data for edit

            }
            catch (Exception ex)
            {
                ex.LogException();
            }
            return PartialView("_add", model);

        }
[HttpPost]
public JsonResult Add(Add model)
        {
            if (!ModelState.IsValid)
                return AsError();
            try
            {
               
                       //insert into db

            }
            catch (Exception ex)
            {
                ex.LogException();
            }
            return Json("success")

        }

public PartialViewResult List()
        {
            var model = new List<ListObj>();
            try
            {
                  model   =getlist from db.ToList();
             }
            catch (Exception ex)
            {
                ex.LogException();
            }
            return PartialView("_list", model);

        }

Data annotation validation for email ID in C#

//For all kind of emails it can validate like example.123@example.com, .com.in,.co.in etc

[RegularExpression("^$|^[a-z0-9_\\+-]+(\\.[a-z0-9_\\+-]+)*@[a-z0-9-]+(\\.[a-z0-9]+‌​)*\\.([a-z]{2,})(\\.([a-z]{2,4}))?$", ErrorMessage = "The email field is not a valid e-mail address.")]

Console 404 error resolved for(.json, .woff, .woff2)

Put this contents in web config.
<staticContent>
      <mimeMap fileExtension=".json" mimeType="Content-Type: application/json" />
      <mimeMap fileExtension=".woff" mimeType="Content-Type: application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="Content-Type: application/font-woff2" />
    </staticContent>

Prevent form submission on enter key

<script>
    document.getElementById("FormId").onkeypress = function (e) {
        var key = e.charCode || e.keyCode || 0;
        if (key == 13) {
            e.preventDefault();
        }
    }
</script>