(HTML, Visual Studio) How to access an SQL server and use it as a data source in a Master Page (Markup) : I have been working on a web page in Visual Studio that allows the user to select data for an invoice. One of the areas of my page consists of a button, that when clicked, adds a drop down box as well as several text boxes in a table in the same row, every time the button is clicked, a new row is added with the same set of elements. This serves to allow the user to add several products to the invoice, which can be selected with the drop down box in each row. This is all done within the Main.Master file, through the markup section of code.

My problem however, is that I only know how to add options for the drop down box that consist of a text value. More so, I don't know how to create and reference an SQL Data source in the markup file, and use the "ProductID" field within said database as the main data for my drop down box. I'll post a summary of my questions below, then my code, any help would be much appreciated please.

**Summary**

 1. How can you Connect to an SQL Server in the Main.Master file through the markup code and use it as a Data Source?
 2. How would I use one of the fields within the data source as the main field for my drop down box?

**Code**

        <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="DatabaseDrivenWebsite.Main" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>My Website!</title>
        <script type="text/javascript">
    
            //~Function That adds the separate elements~ 
            function addRow(btn) {
                var parentRow = btn.parentNode.parentNode;
                var table = parentRow.parentNode;
                var rowCount = table.rows.length;
                var row = table.insertRow(rowCount);
    
                //~Product Dropdown~
                var cell1 = row.insertCell(0);
                var element1 = document.createElement("select");
                element1.type = "select";
                element1.style.width = "140px";
                element1.style.zIndex = "100";
                element1.style.marginLeft = "-1060px";
                element1.style.position = "relative";
    			element1.dataset = HTMLSourceElement
                cell1.appendChild(element1);
                var option1 = document.createElement("option");
                option1.innerHTML = "Option1";
                option1.value = "1";
                element1.add(option1, null);
                var option2 = document.createElement("option");
                option2.innerHTML = "Option2";
                option2.value = "2";
                element1.add(option2, null);
                cell1.appendChild(element1);
    
                //~Description Textbox~
                var cell2 = row.insertCell(1);
                var element2 = document.createElement("input");
                element2.type = "text";
                element2.style.width = "220px";
                element2.style.zIndex = "100";
                element2.style.marginLeft = "-1678px";
                element2.style.position = "relative";
                cell2.appendChild(element2);
    
                //~Quantity Textbox~
                var cell3 = row.insertCell(2);
                var element3 = document.createElement("input");
                element3.type = "text";
                element3.style.width = "85px";
                element3.style.zIndex = "100";
                element3.style.marginLeft = "-1352px";
                element3.style.position = "relative";
                cell3.appendChild(element3);
    
                //~List Price Textbox~
                var cell4 = row.insertCell(3);
                var element4 = document.createElement("input");
                element4.type = "text";
                element4.style.width = "82px";
                element4.style.zIndex = "100";
                element4.style.marginLeft = "-1165px";
                element4.style.position = "relative";
                cell4.appendChild(element4);
    
                //~Sell Price Textbox~
                var cell5 = row.insertCell(4);
                var element5 = document.createElement("input");
                element5.type = "text";
                element5.style.width = "88px";
                element5.style.zIndex = "100";
                element5.style.marginLeft = "-972px";
                element5.style.position = "relative";
                cell5.appendChild(element5);
    
                //~Total GST Textbox~
                var cell6 = row.insertCell(5);
                var element6 = document.createElement("input");
                element6.type = "text";
                element6.style.width = "90px";
                element6.style.zIndex = "100";
                element6.style.marginLeft = "-770px";
                element6.style.position = "relative";
                cell6.appendChild(element6);
    
                //~Fuel Levy Textbox~
                var cell7 = row.insertCell(6);
                var element7 = document.createElement("input");
                element7.type = "text";
                element7.style.width = "100px";
                element7.style.zIndex = "100";
                element7.style.marginLeft = "-550px";
                element7.style.position = "relative";
                cell7.appendChild(element7);
    
                //~Total Price Textbox~
                var cell8 = row.insertCell(7);
                var element8 = document.createElement("input");
                element8.type = "text";
                element8.style.width = "98px";
                element8.style.zIndex = "100";
                element8.style.marginLeft = "-325px";
                element8.style.position = "relative";
                cell8.appendChild(element8);
            }
        </script>
        <link href="Style/Main.css" rel="stylesheet" />
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="MainData">
            <div id="Header">This is the header</div>
            <div id="Menu">
                <asp:Panel ID="pnMenu" runat="server">
                    <a href="Home.aspx">Home</a> | <a href="Orders.aspx">Orders</a> | <a href="Finances.aspx">Finances</a>
                    
                    <table style="margin-top:179px; margin-left:109px; width:999px; line-height:25px;">
                        <tr>
                            //~When clicked, this button calls the AddRow Function~
                            <td><button type="button" onclick ="addRow(this)" style="margin-top:-70px; margin-right:960px; position: relative; z-index: 100;">Add</button></td>
                        </tr>
                    </table>
                </asp:Panel>
            </div>
            <div id="Content">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
            </div>
            <div id="Footer">Copyright 2016 DBS</div>
        </div>
        </form>
    
    </body>
    </html>

Here is the JSFiddle, its very rough and the formatting isn't how it looks on my official web page, but it demonstrates the code in action and how it functions.

Any help would be beyond appreciated, I couldn't find anything online that would help me out with this, it seems to be too specific.

*P.S. Scroll to the right of the preview to find the "Add" Button, click that too see the functionality of the code*

https://jsfiddle.net/5170hLsh/1/

~ Luke