TypoMustakes/Prog4_Beadando
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

GET and POST done

Browse Source
This commit is contained in:
TypoMustakes
2024-04-22 14:50:21 +02:00
parent c250204ace
commit 4b20644236
3 changed files with 98 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/index.html
View File

@@ -7,6 +7,24 @@
<body> <body>
<h1>Hello, World!</h1> <h1>Hello, World!</h1>
<p>Welcome to my first web page.</p> <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> <script src="script.js"></script>
</body> </body>
</html> </html>

46
WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/script.js
View File

@@ -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(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));
}

37
WD7UVN_SzTGUI_2023242.Client.JS/wwwroot/style.css
View File

@@ -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;
} }