Conversion Calculator Tutorial

Conversion Calculator Code
The Conversion Calculator is a ASP.NET 4.8 Framework, C# web forms application. It utilizes C# for server side actions that needs to be applied before page rendering such as SQL Server data retrieval. JavaScript is implemented for client side actions such as drop-down item population based on other selected choices from user input after the page is loaded. This project also uses a popular framework package called Json.NET developed by Newtonsoft to create JSON data to be used within the JavaScript code.

The Web Form (ASPX): ConversionCalc.aspx

<%@ Page Title="Conversion Calculator" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="True" CodeBehind="ConversionCalc.aspx.cs" Inherits="STC._ConversionCalc" ClientIDMode="Static" %>

<asp:Content ID="PageHead_Content" ContentPlaceHolderID="PageHead_PlaceHolder" runat="Server">
    <link href="Content/ConversionCalc.css" rel="stylesheet" />
    <script type="text/javascript" src="Scripts/ConversionCalc.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</asp:Content>
<asp:Content ID="PageBody_Content" ContentPlaceHolderID="MainContent" runat="Server">
    &nbsp;&nbsp;<a href="ConversionCalcTutorial.aspx" target="_blank">View Conversion Calculator Code ></a><br />
    <div class="ConversionCalcPageDiv">
        <div class="CalcFrame">
            <b style="font-size: 16pt;">Conversion Calculator</b><div id="instructDiv" runat="server">To begin, select a calculator in the drop-down menu below.</div><br />
            <div class="CalcDiv">
                <div class="CalcItemDiv">
                    <select id="CalcTypeSelect" onchange="ChangeCalcType();"  runat="server">
                        <option disabled="disabled" selected="selected">Choose Conversion Type...</option>
                        <option>Data Storage</option>
                        <option>Data Transfer</option>
                    </select>
                </div>

                <!-- Data Storage Template-->
                <div id="OneInputCalcDiv" class="CalcItemDiv" hidden="hidden"><br />
                    <div class="CalcInputDiv">
                        <div class="ioItemDiv">
                            <div class="ioItemDiv">
                                <input type="text" id="Amount1" oninput="Calc();" />
                            </div>
                            <div class="ioItemDiv">
                                <select id="DataTypeSelect1" onchange="Calc();"></select>
                            </div>
                        </div>
                    </div><span class="showEquals">=</span><span class="showDblRet"><br /><br />Equals<br /></span><div class="CalcInputDiv">
                        <div class="ioItemDiv">
                            <div class="ioItemDiv">
                                <input type="text" id="Amount2" style="background-color: #f5f5f5;" disabled="disabled" />
                            </div>
                            <div class="ioItemDiv">
                                <select id="DataTypeSelect2" onchange="Calc();"></select>
                            </div>
                        </div>
                    </div><br />
                    <br />
                    <small class="showEquals">
                        &nbsp;1. Enter a number value to convert into the top-left box.<br />
                        &nbsp;2. Select a type to be converted <i>from</i> in the bottom-left drop-down.<br />
                        &nbsp;3. Select a type you wish to convert <i>to</i> in the bottom-right drop-down.
                    </small>
                    <sub class="showDblRet">
                        &nbsp;1. Enter a number value to convert into the top box.<br />
                        &nbsp;2. Select a type to be converted <i>from</i> in the first drop-down.<br />
                        &nbsp;3. Select a type you wish to convert <i>to</i> in the bottom drop-down.
                    </sub>
                    <br /><br />
                </div>
                <!-- Data Storage Template-->

                <div id="addlDataDiv" hidden="hidden"></div>

            </div>
        </div>
    </div>
    <br />
</asp:Content>

The Web Form Code (ASPX.CS): ConversionCalc.aspx.cs

using System;
using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI;
using System.Web.UI.WebControls;

/*
 * use Newtonsoft's Json.NET by James Newton-King
 * obtained from VS NuGet Manager
*/
using Newtonsoft.Json;

namespace STC
{
    public partial class _ConversionCalc : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            /* Do not refill drop downs if form is posted */
            if (!IsPostBack) FillDropDowns();
        }

        private void FillDropDowns()
        {
            DataSet calcData = new DataSet();

            string selectComStr = @"
SELECT DISTINCT
    CalcID, CalcName,
    CASE CalcDescHTML
        WHEN '' THEN '-'
        ELSE CalcDescHTML
    END AS CalcDescHTML,
    CalcDiv, NumberBase, TabOrder, IsReadOnly, IsSelected
FROM dbo.v_ConvCalcs
ORDER BY TabOrder;
            ";

            calcData.Tables.Add(CreateDataTable("CalcTypes", selectComStr));

            if (calcData.Tables["CalcTypes"].Rows.Count > 0)
            {
                CalcTypeSelect.Items.Clear();
                foreach (DataRow calc in calcData.Tables["CalcTypes"].Rows)
                {
                    ListItem li = new ListItem(calc["CalcName"].ToString());
                    li.Value =
                        calc["CalcID"].ToString() + "|" +
                        calc["CalcName"].ToString() + "|" +
                        calc["CalcDiv"].ToString() + "|" +
                        calc["NumberBase"].ToString()
                    ;
                    if (
                        (CalcTypeSelect.SelectedIndex == -1) && (bool)calc["IsSelected"]
                    ) li.Selected = true;

                    li.Attributes.Add("data", "selected");
                    li.Attributes.Add("title", calc["CalcDescHTML"].ToString());
                    if ((bool)calc["IsReadOnly"]) li.Attributes.Add("disabled", "disabled");

                    CalcTypeSelect.Items.Add(li);
                }
            }

            string jsonOut = ";
            Type t = this.GetType();

            selectComStr = @"
SELECT DISTINCT
    CalcOptID, CalcID, CalcOptName, OptionTabOrder,
    OptionIsReadonly, IsOptSelected, OptionIsActive
FROM dbo.v_ConvCalcs
ORDER BY CalcID, OptionTabOrder;
            ";

            calcData.Tables.Add(CreateDataTable("CalcOptions", selectComStr));
            if (calcData.Tables["CalcOptions"].Rows.Count > 0)
                jsonOut = JsonConvert.SerializeObject(calcData.Tables["CalcOptions"]);

            ClientScriptManager cs = Page.ClientScript;
            if (!cs.IsClientScriptBlockRegistered(t, "calcOptionData"))
                cs.RegisterClientScriptBlock(t, "calcOptionData", "<script type = 'text/javascript' > var calcOptionData='" + jsonOut + "';</script>", false);
        }

        /* Method to create a data table given an SQL command and table name */
        private DataTable CreateDataTable(string TableName, string selectString)
        {
            string conStr = ConfigurationManager.ConnectionStrings["STC_MSSQL_DB"].ConnectionString;

            using (DataTable dataTable = new DataTable(TableName))
            using (SqlConnection sqlCon = new SqlConnection(conStr))
            using (SqlDataAdapter sqlDA = new SqlDataAdapter(selectString, sqlCon))
            {
                try
                {
                    sqlCon.Open();
                    sqlDA.Fill(dataTable);
                    sqlCon.Close();

                }
                catch (Exception ex)
                {
                    Response.Write(ex.Message);
                }

                return dataTable;
            }
        }
    }
}

The JavaScript (JS): ConversionCalc.js

/* Set global variables */
var
    amountInput,
    amountOutput,
    inputDataTypeSelected,
    outputDataTypeSelected,
    debugDiv,
    calcTypesJSON,
    calcOptionsJSON
;

window.onload = function () { /* Onload function */
    /* Initialize global variables */
    amountInput = document.getElementById("Amount1");
    amountOutput = document.getElementById("Amount2");
    inputDataTypeSelected = document.getElementById("DataTypeSelect1");
    outputDataTypeSelected = document.getElementById("DataTypeSelect2");
    debugDiv = document.getElementById("DebugDiv");

    amountInput.value = 1;
}

function ChangeCalcType() {

    HideAllCalcDivs();

    const
        selectedCalcType = document.getElementById("CalcTypeSelect"),
        calcDataArray = selectedCalcType.value.split("|")
     ;

    /* Display selected calculator fields */
    document.getElementById(calcDataArray[2]).hidden = false;


    fillCalcOptionDropDowns(calcDataArray[0], calcDataArray[3]);

    Calc();

    return;
}

function Calc() {

    /* Force only numbers and period symbol to be allowed to be entered into input field */
    NumberOnlyInput(amountInput);

    // Set global variables to newly selected input options
    inputSelected = document.getElementById("DataTypeSelect1");
    outputSelected = document.getElementById("DataTypeSelect2");

    /* Variable declarations */
    var
        inputValue = amountInput.value,
        inputBitValue = 0,
        outputBitValue = 0,
        resultValue = 0,
        inputDataType = inputSelected.value.split("|")[0].toLowerCase(),
        outputDataType = outputSelected.value.split("|")[0].toLowerCase(),
        numberBase = inputSelected.value.split("|")[1]
    ;

    /* If user enters a decimal point period without a leading zero, add it. */
    if (inputValue == ".") {
        amountInput.value = "0.";
        return;
    }

    /* If user is trying to enter a decimal for a bit or byte value, reset input field as there is not such thing as a fraction of a bit or byte. */
    if (inputValue != null && inputValue != "" && inputValue < 1 && (inputDataType.startsWith("bit") || inputDataType.startsWith("byte"))) {
        amountInput.value = "";
        return;
    }

    /* Get power values from function based on the number base and selected data types */
    var
        powerOfInSelected = GetFactorPowerByMetricPrefix(inputDataType, numberBase),
        powerOfOutSelected = GetFactorPowerByMetricPrefix(outputDataType, numberBase)
    ;

    // #region Get bit value from input
    inputBitValue = inputValue;
    /* if input data type selected is of BYTE type, convert to bit */
    if (inputDataType.includes("byte")) inputBitValue = inputBitValue * 8;
    /* convert to BIT based on the input data type selected */
    inputBitValue = inputBitValue * Math.pow(numberBase, powerOfInSelected);
    // #endregion
    
    // #region Get output bit value
    outputBitValue = inputBitValue;
    /* if output data type selected is of BYTE type, convert to byte */
    if (outputDataType.includes("byte")) outputBitValue = outputBitValue / 8;
    /* convert to BIT based on the input data type selected */
    resultValue = outputBitValue * (Math.pow(numberBase, (0 - powerOfOutSelected)));
    // #endregion

    /* Send result value to output text field on form */
    amountOutput.value = resultValue.toLocaleString('en-US', { maximumFractionDigits: 20 });

    return;
}

function GetFactorPowerByMetricPrefix(prefix, base) {

    if (base == 10) {
        /*
         * For standard Decimal, base 10, conversions
         * Function to return a power value based on the prefix of a lower-case text value.
         * These power values when, applied to 10, will give you the decimal number value
         * of the applied prefix string
         * Example: When supplied "kilogram", 3 is returned.
         *   - Using the returned 3 value, we can then determine that a kilogram is 10 to the power of 3 grams.
         *   - 10 to the power of 3 equals 1000. This tells us that a kilogram is 1000 grams.
        */
        //                                               //  US/UK           EU (Excl UK)    Decimal Number
        if (prefix.startsWith("deca")) return 1;         // ten	            ten             10
        else if (prefix.startsWith("hecto")) return 2;   // hundred	        hundred         100
        else if (prefix.startsWith("kilo")) return 3;    //	thousand	    thousand        1,000
        else if (prefix.startsWith("mega")) return 6;    //	million	        million         1,000,000
        else if (prefix.startsWith("giga")) return 9;    // billion	        milliard        1,000,000,000
        else if (prefix.startsWith("tera")) return 12;   //	trillion	    billion         1,000,000,000,000
        else if (prefix.startsWith("peta")) return 15;   //	quadrillion	    billiard        1,000,000,000,000,000
        else if (prefix.startsWith("exa")) return 18;    //	quintillion	    trillion        1,000,000,000,000,000,000
        else if (prefix.startsWith("zetta")) return 21;  //	sextillion	    trilliard       1,000,000,000,000,000,000,000
        else if (prefix.startsWith("yotta")) return 24;  //	septillion	    quadrillion     1,000,000,000,000,000,000,000,000
        else if (prefix.startsWith("deci")) return -1;  //	tenth	        tenth           0.1
        else if (prefix.startsWith("centi")) return -2;  //	hundredth	    hundredth       0.01
        else if (prefix.startsWith("milli")) return -3;  //	thousandth	    thousandth      0.001
        else if (prefix.startsWith("micro")) return -6;  //	millionth	    millionth       0.000 001
        else if (prefix.startsWith("nano")) return -9;   //	billionth	    milliardth      0.000 000 001
        else if (prefix.startsWith("pico")) return -12;  //	trillionth	    billionth       0.000 000 000 001
        else if (prefix.startsWith("femto")) return -15; //	quadrillionth   billiardth      0.000 000 000 000 001
        else if (prefix.startsWith("atto")) return -18;  //	quintillionth	trillionth      0.000 000 000 000 000 001
        else if (prefix.startsWith("zepto")) return -21; //	sextillionth	trilliardth     0.000 000 000 000 000 000 001
        else if (prefix.startsWith("yocto")) return -24; //	septillionth	quadrillionth   0.000 000 000 000 000 000 000 001
        else return 0;
    }
    else if (base == 2) {
        /*
         * For binary data, base 2, conversions
         * Function to return a power value based on the prefix of a lower-case text value.
         * These power values when, applied to 2, will give you the Binary number value
         * of the applied prefix string
         * Example: When supplied "kilobyte", 10 is returned.
         *   - Using the returned 10 value, we can then determine that a kilobyte is 2 to the power of 10 bytes.
         *   - 2 to the power of 10 equals 1024. This tells us that a kilobyte is 1024 bytes.
        */
        // Decimal Number
        if (prefix.startsWith("kilo")) return 10;        //	1,024
        else if (prefix.startsWith("mega")) return 20;   //	1,048,576
        else if (prefix.startsWith("giga")) return 30;   // 1,073,741,824
        else if (prefix.startsWith("tera")) return 40;   //	1,099,511,627,776
        else if (prefix.startsWith("peta")) return 50;   //	1,125,899,906,842,620
        else if (prefix.startsWith("exa")) return 60;    //	1,152,921,504,606,850,000 
        else if (prefix.startsWith("zetta")) return 70;  //	1,180,591,620,717,410,000,000
        else if (prefix.startsWith("yotta")) return 80;  // 1,208,925,819,614,630,000,000,000
        else if (prefix.startsWith("bronto")) return 90; //	1,237,940,039,285,380,000,000,000,000
        else if (prefix.startsWith("geo")) return 100;   //	1,267,650,600,228,230,000,000,000,000,000
        else return 0;
    }
}

function fillCalcOptionDropDowns(calcID, baseNum) {
    const
        inputDataTypeSelect = document.getElementById("DataTypeSelect1"),
        outputDataTypeSelect = document.getElementById("DataTypeSelect2")
    ;

    // Get, parse, and filter JSON returned by the c# query on load for calculator option drop downs
    var
        jsonParsed = JSON.parse(calcOptionData),
        filtered = jsonParsed.filter(a => a.CalcID == calcID)
    ;

    // if records are found, proceed to fill drop downs
    if (filtered.length > 0) {

        // Remove all previous option items from drop downs
        if (inputDataTypeSelect.options.length > 0)
            for (var opt = inputDataTypeSelect.options.length - 1; opt >= 0; opt--)
                inputDataTypeSelect.remove(opt);

        if (outputDataTypeSelect.options.length > 0)
            for (var opt = outputDataTypeSelect.options.length - 1; opt >= 0; opt--)
                outputDataTypeSelect.remove(opt);

        // for each option found in the JSON rows, create a new option in the drop downs
        for (var i = 0; i < filtered.length; i++) {

            // Load current option from JSON into a constant
            const
                inOpt = new Option(filtered[i].CalcOptName, filtered[i].CalcOptName + "|" + baseNum),
                outOpt = new Option(filtered[i].CalcOptName, filtered[i].CalcOptName + "|" + baseNum)
            ;

            // disable selection or select based on the options details from the JSON row
            if (filtered[i].OptionIsReadonly) { inOpt.disabled = true; outOpt.disabled = true; }
            if (filtered[i].IsOptSelected) { inOpt.selected = true; outOpt.selected = true; }

            // add option to drop down
            inputDataTypeSelect.add(inOpt);
            outputDataTypeSelect.add(outOpt);
        }        
    }
    return;
}


function HideAllCalcDivs() { /* Hides all calculator div elements */
    var calcTypes = document.getElementById("CalcTypeSelect").options;

    for (var index = 0; index < calcTypes.length; index++) {
        var
            calcDivName = calcTypes.item(index).value.split('|')[2],
            calcDivObj = document.getElementById(calcDivName)
        ;

        if (calcDivObj != null && calcDivObj.hidden == false)
            calcDivObj.hidden = true;
    }
    return;
}

function NumberOnlyInput(inputID) { /* Forces only numbers and decimal point periods to be able to be entered into the supplied input element */
    inputID.value = inputID.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');
    return;
}

The Cascading Style Sheet (CSS): ConversionCalc.css

.ConversionCalcPageDiv {
    margin: 10px auto 10px auto;
}
    .ConversionCalcPageDiv input, select {
        font-size:12pt;
        margin:2px;
        padding:3px;
        width:237px;
    }

    .ConversionCalcPageDiv select {
        margin-left:2px;
    }

.CalcFrame {
    width: fit-content;
    /*min-width:515px;*/
    flex-wrap:nowrap;
    margin: auto;
}

.CalcDiv {
    padding: 10px;
    border: 1px solid #000080;
    box-shadow: 3px 3px 5px -1px #CCCCCC;
    border-radius: 10px;
}

.CalcItemDiv {    
}

.CalcInputDiv {
    width: auto;
    margin: auto;
    padding: 0px;
    display: inline-flex;
}

.ioItemDiv {
    display: block;
}

#addlDataDiv {
    margin:3px;
    font-size:10pt;
}

@media only screen and (max-width: 545px) {
    .showEquals {
        display:none;
    }
}

@media only screen and (min-width: 544px) {
    .showDblRet {
        display: none;
    }
}

The Database
- Tables
The ConvCalcs (Conversion Calculators) table contains information about each calculator available to the form app.

   The ConvCalcs_Options (Conversion Calculators Options) table contains information about each calculator's
   drop down options available to the form app.

- Views
The v_ConvCalcs (Conversion Calculators View) combines all the relevant information needed by the form app.

SELECT
    C.CalcID, C.CalcName, C.CalcDescHTML, C.CalcDiv, C.NumberBase, C.TabOrder, C.IsReadOnly,
    C.IsSelectedOnLoad AS isSelected, C.Active,
    CO.CalcOptID, CO.CalcOptName, CO.TabOrder AS OptionTabOrder, CO.IsReadOnly AS OptionIsReadonly,
    CO.IsSelectedOnLoad AS isOptSelected, CO.Active AS OptionIsActive
FROM [ConvCalcs] AS C
    LEFT JOIN [ConvCalcs_Options] AS CO ON C.CalcID = CO.CalcID
WHERE C.Active = 1 AND (CO.Active = 1 OR CO.Active IS NULL)