Vertical Centering in CSS

<div id="containter">
        everything is vertically centered here.
</div>
<style>
#containter {
    height: 400px;
    display: flex;
    /* flex-direction: column;*/
    align-items: center; 
    /* justify-content: center;*/
}
</style>

JQuery Selectors

$(document).on(‘click’, ‘.handle’, function (e) {

});

$(document).on(‘click’, ‘.Class:not(.Exception)’, function (e) {
});

//Zero-based
var rowIndex = $(‘#Table tr’).index(element.closest(‘tr’));
var currentTrPosition = rowIndex + 1;
var currentTR = $(“#Table tr:nth-child(” + currentTrPosition + “)”);

var inputs = currentTR.find(“input”);
var selects = currentTR.find(“select”);
inputs.attr(‘disabled’, ‘disabled’);
selects.attr(‘disabled’, ‘disabled’);

var trToShow = $(‘tr#’ + nextTrId);
trToShow.removeClass(‘Invisible’);

$(‘.Class’).not(‘.Exception’).change(function () {
});

$(‘.Class.Exception’).change(function () {
});

$InputElement.closest(‘h6’).next(‘h5’).removeClass(‘Invisible’);

JavaScript Model-AJAX- MVC Model

var data = {};
data.columnname = $InputElement.attr('data-columnname');
data.datatype = $InputElement.attr('data-datatype');
data.value = $InputElement.val();


$.ajax({
    type: 'POST',
    url: 'http://localhost:50929/Conversation/SubmitAnswer/', //last '/' is important

    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify({ data: data }),
    dataType: 'json',
    beforeSend: function () {

    },
    success: function (response) {

    },
    error: function (request, status, error) {
    },
    complete: function () {
    }
});

public class Answer
{
    public string columnname { get; set; }
    public string datatype { get; set; }
    public string value { get; set; }
}


[HttpPost]
public JsonResult SubmitAnswer(Answer data)
{

}

JQuery Selectors

$(function () {

function ShowNextRow($InputElement) {
var $CurrentRow = $InputElement.closest(‘tr’);
if ($InputElement.hasClass(‘disableall’)) {
var inputs = $CurrentRow.find(“input”);
var selects = $CurrentRow.find(“select”);
inputs.attr(‘disabled’, ‘disabled’);
selects.attr(‘disabled’, ‘disabled’);
}

if ($InputElement.hasClass(‘jump’)) {
var $JumpToId = $InputElement.attr(‘data-jumptoid’);
$(‘tr#’ + $JumpToId).removeClass(‘Invisible’);
}
else {
$CurrentRow.next(‘tr’).removeClass(‘Invisible’);
}
}
$(‘.handle-positive-radio’).click(function () {
var $InputElement = $(this);
var $IsRequiredToSave = $InputElement.attr(‘data-requiretosave’);
if ($IsRequiredToSave==’yes’) {
var data = {};
data.columnname = $InputElement.attr(‘data-columnname’);
data.datatype = $InputElement.attr(‘data-datatype’);
data.value = $InputElement.attr(‘value’);
SubmitAjax(data);
}

ShowNextRow($InputElement);

});

//$(‘.handle-positive-radio’).not(‘.exception’).click(function () {
// // alert(‘hi’);
// var $element = $(this);
// var columunName = $element.attr(‘data-columnname’);
// var dataType = $element.attr(‘data-datatype’);
// var value = $element.attr(‘value’);
// var data = {};
// data.columnname = columunName;
// data.datatype = dataType;
// data.value = value;
// SubmitAjax(data);
// ShowNextRow($element);
//});
//$(‘.handle-positive-radio.exception’).click(function () {
// var $element = $(this);
// var columunName = $element.attr(‘data-columnname’);
// var dataType = $element.attr(‘data-datatype’);
// var value = $element.attr(‘value’);
// var nextTrToSelect = $element.attr(‘data-nexttrid’);
// var data = {};
// data.columnname = columunName;
// data.datatype = dataType;
// data.value = value;
// SubmitAjax(data);
// ShowNextRowWithId($element,nextTrToSelect);
//});

$(document).on(‘click’, ‘.handle-negative-radio’, function (e) {

var $InputElement = $(this);
var $IsRequiredToSave = $InputElement.attr(‘data-requiretosave’);
if ($IsRequiredToSave == ‘yes’) {
var data = {};
data.columnname = $InputElement.attr(‘data-columnname’);
data.datatype = $InputElement.attr(‘data-datatype’);
data.value = $InputElement.attr(‘value’);
SubmitAjax(data);
}

$InputElement.closest(‘h6’).next(‘h5’).removeClass(‘Invisible’);

ShowNextRow($InputElement);
});

//$(document).on(‘change’, ‘.handle-combo’, function (e) {
// var $element = $(this);
// var columunName = $element.attr(‘data-columnname’);
// var dataType = $element.attr(‘data-datatype’);
// var value = $element.val();
// var data = {};

// data.columnname = columunName;
// data.datatype = dataType;
// data.value = value;
// SubmitAjax(data);
// ShowNextRow($element);
//});

$(‘.handle-combo’).not(‘.Exception’).change(function () {
var $element = $(this);
var columunName = $element.attr(‘data-columnname’);
var dataType = $element.attr(‘data-datatype’);
var value = $element.val();
var data = {};

data.columnname = columunName;
data.datatype = dataType;
data.value = value;
SubmitAjax(data);
ShowNextRow($element);

});

$(‘.handle-combo.Exception’).change(function () {
var $element = $(this);
var columunName = $element.attr(‘data-columnname’);
var dataType = $element.attr(‘data-datatype’);
var value = $element.val();
var data = {};

data.columnname = columunName;
data.datatype = dataType;
data.value = value;
SubmitAjax(data);
ShowNextRowWithId($element, ‘finaltr’);

});

//function ShowNextRow(element) {

// var rowIndex = $(‘#QuestionTable tr’).index(element.closest(‘tr’));
// var currentTrPosition = rowIndex + 1;
// var currentTR = $(“#QuestionTable tr:nth-child(” + currentTrPosition + “)”);

// var inputs = currentTR.find(“input”);
// var selects = currentTR.find(“select”);
// inputs.attr(‘disabled’,’disabled’);
// selects.attr(‘disabled’, ‘disabled’);
// nextTrPosition = rowIndex + 2;
// //var nextTR = $(“#QuestionTable tr:nth-child(” + nextTrPosition + “)”);
// var nextTR =$(element).closest(‘tr’).next(‘.Invisible’).not(‘.ExceptionTr’);
// console.log(nextTR);
// nextTR.removeClass(‘Invisible’);
//}

function ShowNextRowWithId(element, nextTrId) {

var rowIndex = $(‘#QuestionTable tr’).index(element.closest(‘tr’));
var currentTrPosition = rowIndex + 1;
var currentTR = $(“#QuestionTable tr:nth-child(” + currentTrPosition + “)”);

var inputs = currentTR.find(“input”);
var selects = currentTR.find(“select”);
inputs.attr(‘disabled’, ‘disabled’);
selects.attr(‘disabled’, ‘disabled’);
// var nextTR = $(“#QuestionTable tr#good”);

var trToShow = $(‘tr#’ + nextTrId);
trToShow.removeClass(‘Invisible’);

}

function SubmitAjax(data) {
$.ajax({
type: ‘POST’,
url: ‘http://localhost:50929/QuestionOne/SubmitAnswer/&#8217;,

contentType: ‘application/json; charset=utf-8’,
data: JSON.stringify({data:data}),
dataType: ‘json’,
beforeSend: function () {

},
success: function (response) {

},
error: function (request, status, error) {
},
complete: function () {
}
});
}
});

PetaPOCO, MySQL & ASP.NET MVC

web.config settings-
<configuration>
  <connectionStrings>
    <add name="MySqlConnection" connectionString="Server=192.168.100.30;Port=3306;Database=grocery_db; User ID=root; Password=*****;" providerName="MySql.Data.MySqlClient" />   
  </connectionStrings>

 <system.data>
    <DbProviderFactories>
      <remove invariant="MySql.Data.MySqlClient" />
      <add name="MySQL Data Provider" invariant="MySql.Data.MySqlClient" description=".Net Framework Data Provider for MySQL" type="MySql.Data.MySqlClient.MySqlClientFactory, MySql.Data, Version=6.9.8.0, Culture=neutral, PublicKeyToken=c5687fc88969c44d" />
    </DbProviderFactories>
  </system.data>
</configuration>


Controller code-

public ActionResult Summary()
{
    //string connectionString
    GrocerySummaryViewModel viewModel = new GrocerySummaryViewModel();
    List<GroceryWiseContactQuantity> groceryContactList = new List<GroceryWiseContactQuantity>();
    try
    {
        var db = new PetaPoco.Database("MySqlConnection");
        groceryContactList = db.Query<GroceryWiseContactQuantity>("SELECT grocery AS GroceryName, count(id) AS Quantity FROM contacts group by grocery order by count(id) desc").ToList();
                
        viewModel.GroceryWiseContactList = groceryContactList;
                
    }
    catch (Exception Ex)
    {
        this.LogException(Ex);
    }
    return View("GrocerySummary", viewModel); 
}

C# MySQL Connection

MySql.Data 6.9.8
PM> Install-Package MySql.Data

using MySql.Data.MySqlClient;

MySqlConnection Con = new MySqlConnection("Server=111.222.333.444; Port=3306; Database=grocery_db;Uid=root;Pwd=****");
Con.Open();
DataTable Table = new DataTable();
MySqlDataAdapter da = new MySqlDataAdapter("select id, name from contacts order by name",Con);
da.Fill(Table);
Con.Close();

ChartJS.org Pie Chart

<canvas id=PieChartCanvas" style="width:100%;height:100px;"></canvas>
<script src="~/Assets/js/charts/chartjs.org/Chart.min.js"></script>

<script>

    //Declaring chart context.
    var PieChartContext = document.getElementById("PieChartCanvas").getContext("2d");
    //Chart data (an array of objects).
    var data = [
    {
        value: '@ViewBag.LikedQuantity',
        color: "#2D882D",
        highlight: "#116611",
        label: "Liked"
    },
    {
        value: '@ViewBag.NotLikedQuantity',
        color: "#AA3939",
        highlight: "#550000",
        label: "Not Liked"
    }
    ]

    //Finally draw the chart.
    var PieChart = new Chart(PieChartContext).Pie(data);

</script>

CSS Styled Checkbox

Custom Checkbox Sample


       
/* Remove default checkbox */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
  visibility: hidden; }

[type="checkbox"] {
  /* checkbox aspect */ }
  [type="checkbox"] + label {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    display: inline-block;
    height: 25px;
    line-height: 25px;
    font-size: 1rem;
    -webkit-user-select: none;
    /* webkit (safari, chrome) browsers */
    -moz-user-select: none;
    /* mozilla browsers */
    -khtml-user-select: none;
    /* webkit (konqueror) browsers */
    -ms-user-select: none;
    /* IE10+ */ }
  [type="checkbox"] + label:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    z-index: 0;
    border: 2px solid #5a5a5a;
    border-radius: 1px;
    margin-top: 2px;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;
    transition: 0.2s; }
  [type="checkbox"]:not(:checked):disabled + label:before {
    border: none;
    background-color: rgba(0, 0, 0, 0.26); }

[type="checkbox"]:checked + label:before {
  top: -4px;
  left: -3px;
  width: 12px;
  height: 22px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #4CAF50;  /*Original code #ff4081*/
  border-bottom: 2px solid #4CAF50; /*Original code #ff4081*/
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  transform: rotate(40deg);
  -webkit-backface-visibility: hidden;
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%; }
[type="checkbox"]:checked:disabled + label:before {
  border-right: 2px solid rgba(0, 0, 0, 0.26);
  border-bottom: 2px solid rgba(0, 0, 0, 0.26); }

/* Indeterminate checkbox */
[type="checkbox"]:indeterminate + label:before {
  left: -10px;
  top: -11px;
  width: 10px;
  height: 22px;
  border-top: none;
  border-left: none;
  border-right: 2px solid #ff4081;
  border-bottom: none;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-backface-visibility: hidden;
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%; }
[type="checkbox"]:indeterminate:disabled + label:before {
  border-right: 2px solid rgba(0, 0, 0, 0.26);
  background-color: transparent; }

[type="checkbox"].filled-in + label:after {
  border-radius: 2px; }
[type="checkbox"].filled-in + label:before,
[type="checkbox"].filled-in + label:after {
  content: '';
  left: 0;
  position: absolute;
  /* .1s delay is for check animation */
  transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
  z-index: 1; }
[type="checkbox"].filled-in:not(:checked) + label:before {
  width: 0;
  height: 0;
  border: 3px solid transparent;
  left: 6px;
  top: 10px;
  -webkit-transform: rotateZ(37deg);
  transform: rotateZ(37deg);
  -webkit-transform-origin: 20% 40%;
  transform-origin: 100% 100%; }
[type="checkbox"].filled-in:not(:checked) + label:after {
  height: 20px;
  width: 20px;
  background-color: transparent;
  border: 2px solid #5a5a5a;
  top: 0px;
  z-index: 0; }
[type="checkbox"].filled-in:checked + label:before {
  top: 0;
  left: 1px;
  width: 8px;
  height: 13px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotateZ(37deg);
  transform: rotateZ(37deg);
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%; }
[type="checkbox"].filled-in:checked + label:after {
  top: 0px;
  width: 20px;
  height: 20px;
  border: 2px solid #ff4081;
  background-color: #ff4081;
  z-index: 0; }
[type="checkbox"].filled-in:disabled:not(:checked) + label:before {
  background-color: transparent;
  border: 2px solid transparent; }
[type="checkbox"].filled-in:disabled:not(:checked) + label:after {
  border-color: transparent;
  background-color: #BDBDBD; }
[type="checkbox"].filled-in:disabled:checked + label:before {
  background-color: transparent; }
[type="checkbox"].filled-in:disabled:checked + label:after {
  background-color: #BDBDBD;
  border-color: #BDBDBD; }

    <p>
        <input id="Checkbox1" type="checkbox" />
        <label for="Checkbox1">Checkbox</label>
    </p>

    <p>
        <input id="Checkbox2" type="checkbox" class="filled-in" />
        <label for="Checkbox2">Teletalk</label>
    </p>

Dynamically Arrange Bootstrap Column Horizontally in Razor

@{
    int columnCount = 1;
    int contactSerialNo = 0;
}

@foreach (var contact in ViewBag.ContactInfo.Rows)
    {
        contactSerialNo++;
        if (columnCount==1)
        {
           @:<div class="row-fluid">
        }

        <div class="span3">
            <div class="block well">
                <div class="body">
                    <h4>@contactSerialNo.ToString(). @contact["ContactName"].ToString()

                        @if (contact["CallStatusId"].Equals(DBNull.Value))
                        {
                             //Something
                        }
                        else
                        {
                            int callStatusId = contact["CallStatusId"];
                            switch (callStatusId)
                            {
                                case 1:
                                    @:<img src="@(ViewBag.Url)Assets/Icon.png" />
                                    break;
                            }
                        }

                        @if (Convert.ToBoolean(contact["PTR"]) == true)
                        {
                            @:<img src="@(ViewBag.Url)Assets/lighter.png" />
                        }

                    </h4> <br />
                    Son of @contact["FatherName"].ToString(). <br />
                </div>
            </div>
        </div>

        if (columnCount == 4)
        {
             @:</div>
             columnCount = 1;
        }
        else
        {
            columnCount++;
        }
    }