GET and POST done

2024-04-22 14:50:21 +02:00
parent c250204ace
commit 4b20644236
3 changed files with 98 additions and 3 deletions
--- a/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/index.html
+++ b/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/index.html
@@ -7,6 +7,24 @@
 <body>
    <h1>Hello, World!</h1>
    <p>Welcome to my first web page.</p>
+
+    <div id="formdiv">
+        <input type="text" id="customername" placeholder="Customer name">
+        <button id="add" onclick="addCustomer()">Add</button>
+    </div>
+
+    <table>
+        <thead>
+            <tr>
+                <th>ID</th>
+                <th>Name</th>
+            </tr>
+        </thead>
+        <tbody id="resultarea">
+
+        </tbody>
+    </table>
+
    <script src="script.js"></script>
 </body>
 </html>
--- a/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/script.js
+++ b/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/script.js
@@ -1,3 +1,45 @@
-fetch('https://localhost:5001/api/Customer')
+let customers = [];
+getCustomers();
+
+async function getCustomers()
+{
+    await fetch('https://localhost:5001/api/Customer')
    .then(x => x.json())
-    .then(y => console.log(y));
+    .then(y => {
+        customers = y;
+        console.log(customers);
+        display();
+    });
+}
+
+function display()
+{
+    document.getElementById('resultarea').innerHTML = '';
+
+    customers.forEach(t => {
+        document.getElementById('resultarea').innerHTML +=
+        '<tr><td>'
+        + t.id +
+        '</td><td>'
+        + t.name +
+        '</td></tr>';
+    });
+}
+
+function addCustomer()
+{
+    let customerName = document.getElementById('customername').value;
+
+    fetch('https://localhost:5001/api/Customer', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: customerName })
+    })
+    .then(response => response)
+    .then(data =>
+    {
+        console.log("Success: ", data)
+        getCustomers();
+    })
+    .catch(error => console.error("Error: ", error));
+}
--- a/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/style.css
+++ b/WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/style.css
@@ -1,2 +1,37 @@
-body {
+table
+{
+    width: 100%;
+}
+
+table, th, td
+{
+    border: 1px solid black;
+}
+
+table
+{
+    border-collapse: collapse;
+}
+
+th,td
+{
+    padding: 5px;
+}
+
+th
+{
+    background-color: rgb(127, 255, 138);
+}
+
+#formdiv
+{
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 20px;
+}
+
+#formdiv button input
+{
+    margin: 10px;
+    padding: 5px;
 }