Friday, April 7, 2017

Add,Edit And Delete Rows From Table Dynamically Using JavaScript Html Page

<html>
<head>
    <script type="text/javascript" src="table_script.js"></script>
</head>
<body>
    <div id="wrapper">
        <table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
            <tr>
                <th>Name</th>
                <th>Country</th>
                <th>Age</th>
            </tr>

            <tr id="row1">
                <td id="name_row1">Ankit</td>
                <td id="country_row1">India</td>
                <td id="age_row1">20</td>
                <td>
                    <input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
                    <input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
                    <input type="button" value="Delete" class="delete" onclick="delete_row('1')">
                </td>
            </tr>

            <tr id="row2">
                <td id="name_row2">Shawn</td>
                <td id="country_row2">Canada</td>
                <td id="age_row2">26</td>
                <td>
                    <input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')">
                    <input type="button" id="save_button2" value="Save" class="save" onclick="save_row('2')">
                    <input type="button" value="Delete" class="delete" onclick="delete_row('2')">
                </td>
            </tr>

            <tr id="row3">
                <td id="name_row3">Rahul</td>
                <td id="country_row3">India</td>
                <td id="age_row3">19</td>
                <td>
                    <input type="button" id="edit_button3" value="Edit" class="edit" onclick="edit_row('3')">
                    <input type="button" id="save_button3" value="Save" class="save" onclick="save_row('3')">
                    <input type="button" value="Delete" class="delete" onclick="delete_row('3')">
                </td>
            </tr>

            <tr>
                <td><input type="text" id="new_name"></td>
                <td><input type="text" id="new_country"></td>
                <td><input type="text" id="new_age"></td>
                <td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
            </tr>

        </table>
    </div>

</body>
</html>
<script>
    function edit_row(no) {
        document.getElementById("edit_button" + no).style.display = "none";
        document.getElementById("save_button" + no).style.display = "block";

        var name = document.getElementById("name_row" + no);
        var country = document.getElementById("country_row" + no);
        var age = document.getElementById("age_row" + no);

        var name_data = name.innerHTML;
        var country_data = country.innerHTML;
        var age_data = age.innerHTML;

        name.innerHTML = "<input type='text' id='name_text" + no + "' value='" + name_data + "'>";
        country.innerHTML = "<input type='text' id='country_text" + no + "' value='" + country_data + "'>";
        age.innerHTML = "<input type='text' id='age_text" + no + "' value='" + age_data + "'>";
    }

    function save_row(no) {
        var name_val = document.getElementById("name_text" + no).value;
        var country_val = document.getElementById("country_text" + no).value;
        var age_val = document.getElementById("age_text" + no).value;

        document.getElementById("name_row" + no).innerHTML = name_val;
        document.getElementById("country_row" + no).innerHTML = country_val;
        document.getElementById("age_row" + no).innerHTML = age_val;

        document.getElementById("edit_button" + no).style.display = "block";
        document.getElementById("save_button" + no).style.display = "none";
    }

    function delete_row(no) {
        document.getElementById("row" + no + "").outerHTML = "";
    }

    function add_row() {
        var new_name = document.getElementById("new_name").value;
        var new_country = document.getElementById("new_country").value;
        var new_age = document.getElementById("new_age").value;

        var table = document.getElementById("data_table");
        var table_len = (table.rows.length) - 1;
        var row = table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'><td id='name_row" + table_len + "'>" + new_name + "</td><td id='country_row" + table_len + "'>" + new_country + "</td><td id='age_row" + table_len + "'>" + new_age + "</td><td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit' onclick='edit_row(" + table_len + ")'> <input type='button' id='save_button" + table_len + "' value='Save' class='save' onclick='save_row(" + table_len + ")'> <input type='button' value='Delete' class='delete' onclick='delete_row(" + table_len + ")'></td></tr>";

        document.getElementById("new_name").value = "";
        document.getElementById("new_country").value = "";
        document.getElementById("new_age").value = "";
    }
</script>
----------------------------------------------------------------------
Example 2:
<head>
    <title>Create Elements Dynamically using jQuery</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js">
    </script>
</head>
<body>
    <div id="main">
        <input type="button" id="btAdd" value="Add Element" class="button" />
        <input type="button" id="btRemove" value="Remove Element" class="button" />
        <input type="button" id="btRemoveAll" value="Remove All" class="button" /><br />
    </div>
</body>
<script>
    $(document).ready(function () {

        var iCnt = 0;
        var container = $(document.createElement('div')).css({
            padding: '8px', margin: '20px', width: '180px', border: '1px solid',
            borderTopColor: '#000', borderBottomColor: '#000',
            borderLeftColor: '#000', borderRightColor: '#000'
        });

        $('#btAdd').click(function () {
            if (iCount <= 19) {
                iCount = iCount + 1;
                $(container).append('<input type=text class="input" id=tb' + iCount + ' ' +
                            'value="Text Element ' + iCount + '" />');

                if (iCount == 1) {

                    var divSubmit = $(document.createElement('div'));
                    $(divSubmit).append('<input type=button class="bt"' +
                        'onclick="GetTextValue()"' +
                            'id=btSubmit value=Submit />');

                }

                $('#main').after(container, divSubmit);
            }
            else {
                $(container).append('<label>Reached the limit</label>');
                $('#btAdd').attr('class', 'bt-disable');
                $('#btAdd').attr('disabled', 'disabled');
            }
        });

        $('#btRemove').click(function () {
            if (iCount != 0) { $('#tb' + iCount).remove(); iCount = iCount - 1; }

            if (iCount == 0) {
                $(container)
                    .empty()
                    .remove();

                $('#btSubmit').remove();
                $('#btAdd')
                    .removeAttr('disabled')
                    .attr('class', 'bt');
            }
        });

        $('#btRemoveAll').click(function () {
            $(container)
                .empty()
                .remove();

            $('#btSubmit').remove();
            iCount = 0;

            $('#btAdd')
                .removeAttr('disabled')
                .attr('class', 'bt');
        });
    });

    var divValue, values = '';
    function GetTextValue() {

        $(divValue)
            .empty()
            .remove();

        values = '';

        $('.input').each(function () {
            divValue = $(document.createElement('div')).css({
                padding: '5px', width: '200px'
            });
            values += this.value + '<br />'
        });

        $(divValue).append('<p><b>Your selected values</b></p>' + values);
        $('body').append(divValue);
    }
</script>
</html>

===============================================================
Example 3:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script type="text/javascript" src="./jquery-1.7.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $('.del').live('click', function () {
                $(this).parent().parent().remove();
            });

            $('.add').live('click', function () {
                $(this).val('Delete');
                $(this).attr('class', 'del');
                var appendTxt = "<tr><td><input type='text' name='input_box_one[]' /></td> <td><input type='text' name='input_box_two[]' /></td> <td><input type='button' class='add' value='Add More' /></td></tr>";
                $("tr:last").after(appendTxt);
            });
        });
    </script>
</head>
<body>
    <table id="options-table">
        <tr>
            <td>Input-Box-One</td>
            <td>Input-Box-Two</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td><input type="text" name="input_box_one[]" /></td>
            <td><input type="text" name="input_box_two[]" /></td>
            <td><input type="button" class='del' value='Delete' /></td>
        </tr>
        <tr>
            <td><input type="text" name="input_box_one[]" /></td>
            <td><input type="text" name="input_box_two[]" /></td>
            <td><input type="button" class="add" value="Add More" /></td>
        </tr>
    </table>
</body>
</html>
=====================================================
Example 4:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Dynamically Add/Remove Rows In HTML Table Using JavaScript</title>
    <script type="text/javascript">
        function addRow(tableId) {
            var listValues =
                [{ value: "1", text: "Charity 1" }, { value: "2", text: "Charity 2" }, { value: "3", text: "Charity 3" }];
            document.getElementById('hdnListCount').value = listValues.length;
            var table = document.getElementById(tableId);
            var listCount = document.getElementById('hdnListCount').value;
            var rowCount = table.rows.length;
            if (rowCount <= listCount) {
                var row = table.insertRow(rowCount);
                // Column 1
                var cell1 = row.insertCell(0);
                var ddlId = "ddlCharity" + ((rowCount - 1) + 1);
                var element1 = document.createElement('select');
                element1.setAttribute('id', ddlId);
                for (var i = 0; i < listValues.length; i += 1) {
                    var option = document.createElement('option');
                    option.setAttribute('value', listValues[i].value);
                    option.appendChild(document.createTextNode(listValues[i].text));
                    element1.appendChild(option);
                }
                cell1.appendChild(element1);
                // Column 2
                var cell2 = row.insertCell(1);
                var txtId = "txtDonationAmount" + ((rowCount - 1) + 1);
                var element2 = document.createElement("input");
                element2.setAttribute('id', txtId);
                element2.type = "text";
                element2.setAttribute('value', '0');
                cell2.appendChild(element2);
                // Column 3
                var cell3 = row.insertCell(2);
                var btnId = "btnDelete" + ((rowCount - 1) + 1);
                var element3 = document.createElement("input");
                element3.setAttribute('id', btnId);
                element3.type = "button";
                element3.setAttribute('value', 'Delete');
                element3.onclick = function () { removeRow(btnId); };
                cell3.appendChild(element3);
            } else {
                alert('You can add ' + listCount + ' charity-donation details only!');
            }
        }
        function removeRow(btnDelete) {
            var table = document.getElementById('dataTable');
            var rowCount = table.rows.length;
            for (var i = 0; i < rowCount; i++) {
                var row = table.rows[i];
                var rowObj = row.cells[2].childNodes[0];
                if (rowObj.id == btnDelete) {
                    table.deleteRow(i);
                    rowCount--;
                }
            }
        }
        function saveDetail() {
            var table = document.getElementById('dataTable');
            var rowCount = table.rows.length;
            var rowState = "";
            if (rowCount > 1) {
                for (var i = 1; i <= rowCount; i++) {
                    var row = table.rows[i];
                    var charitySelect = row.cells[0].childNodes[0];
                    var donationAmount = row.cells[1].childNodes[0];
                    if (donationAmount.value == "0") {
                        alert("Donation amount should be greater than 0");
                        donationAmount.focus();
                        break;
                    }
                    var isValidRegex = /^\d+$/;
                    if (!isValidRegex.test(donationAmount.value)) {
                        alert("Donation amount should be a digit value");
                        donationAmount.focus();
                        break;
                    }
                    rowState = rowState + charitySelect.value + "," + donationAmount.value + ":";
                    document.getElementById('hdnTableState').value = rowState;
                }
            } else {
                alert('No record present!');
            }
        }
    </script>
</head>
<body>
    <input type="button" name="btnSave" value="Save" onclick="saveDetail();" />
    <input type="button" value="Add More..." onclick="addRow('dataTable')" />
    <input type="hidden" id="hdnListCount" />
    <input type="hidden" id="hdnTableState" />
    <table id="dataTable" width="350px" border="1">
        <tr>
            <th>
                Charity
            </th>
            <th>
                Donation Amount
            </th>
            <th>
                Action
            </th>
        </tr>
    </table>
</body>
</html>




Sunday, March 26, 2017

Difference between SingleOrDefault() n FirstOrDefault()

Whenever you use SingleOrDefault, you clearly state that the query should result in at most a single result. On the other hand, when FirstOrDefault is used, the query can return any amount of results but you state that you only want the first one.
I personally find the semantics very different and using the appropriate one, depending on the expected results, improves readability.

AngularJS ASP.NET MVC Editable Grid

Model-------------
public class Employee
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Country { get; set;
   }

View......
<link href="../../style/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="../../script/angular.js" type="text/javascript"></script>
<script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('HomeCtrl', ['$scope', '$http', function ($scope, $http) {

        $http({
            method: 'POST',
            url: 'Home/GetEmployees'
        })
        .then(function (response) {
            console.log(response);
            $scope.employees = response.data.employees;

            angular.forEach($scope.employees, function (obj) {
                obj["showEdit"] = true;
            });

        }, function (error) {
            console.log(error);
        });

        $scope.toggleEdit = function (emp) {
            emp.showEdit = emp.showEdit ? false : true;
        }
    } ]);
</script>
<div ng-app="myApp" ng-controller="HomeCtrl" class="container">
    <div class="row">
        <div class="bs-example marginTop50" data-example-id="table-within-panel">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3>Code Handbook</h3></div>
                <div class="panel-body">
                    <p>
                        AngularJS ASP.NET MVC Editable Grid Demo</p>
                </div>
                <table class="table">
                    <thead>
                        <tr>
                            <th>
                                #
                            </th>
                            <th>
                                First Name
                            </th>
                            <th>
                                Last Name
                            </th>
                            <th>
                                Country
                            </th>
                            <th>

                            </th>

                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="emp in employees">
                            <th scope="row">
                                {{$index+1}}
                            </th>
                            <td>
                                <span ng-show="emp.showEdit">{{emp.FirstName}}</span>
                                <input ng-show="!emp.showEdit" type="text" ng-model="emp.FirstName" class="form-control" >
                            </td>
                            <td>
                                 <span ng-show="emp.showEdit">{{emp.LastName}}</span>
                                 <input ng-show="!emp.showEdit" type="text" ng-model="emp.LastName" class="form-control" >
                            </td>
                            <td> <span ng-show="emp.showEdit">{{emp.Country}}</span>
                                <input ng-show="!emp.showEdit" type="text" ng-model="emp.Country" class="form-control" >
                            </td>
                            <td>
                                <span ng-show="emp.showEdit" ng-click="toggleEdit(emp)" class="glyphicon glyphicon-pencil"></span>
                                <span ng-show="!emp.showEdit" ng-click="toggleEdit(emp)" class="glyphicon glyphicon-ok"></span>
                            </td>
                        </tr>

                    </tbody>
                </table>

            </div>
        </div>
    </div>

</div>
Controller----
public JsonResult GetEmployees()
        {
            List<Employee> empList = new List<Employee>();

            Employee emp = new Employee { FirstName = "James", LastName = "Bond", Country = "Germany" };
            empList.Add(emp);

            emp = new Employee { FirstName = "Roy", LastName = "Agasthyan", Country = "United States" };
            empList.Add(emp);

            return Json(new { employees = empList });
        }