ā Forms, Js and MVC
hi š , so i was watching some interviews and there was task to ["Do something with data"], lets say registration
so, with premade data in json it works well
response is on screenshot 1,
but i wanted to do it with forms, like, isetead of [FromBody] Employee employee use [FromForm] Employee employee
Will it work same like this?
Cuz i spent some time and couldn't create form to send data correctly, always got error screenshot 2
or only way is to create js object and send it as json?
public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public string DisplayName { get; set; }
public List<Skill> Skills { get; set; }
}
public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public string DisplayName { get; set; }
public List<Skill> Skills { get; set; }
}
public class Skill
{
public string Name { get; set; } = "Undefined";
public int Level { get; set; }
}
public class Skill
{
public string Name { get; set; } = "Undefined";
public int Level { get; set; }
}
var data = {
Id: 1,
Name: "John",
DisplayName: "John Doe",
Skills: [
{
Name: "Coding",
Level: 5
},
{
Name: "Design",
Level: 4
}
]
};
document.getElementById("xdd").addEventListener("click", async (event) => {
event.preventDefault();
const response = await fetch('/xdd', {
method: 'POST',
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data)
});
});
var data = {
Id: 1,
Name: "John",
DisplayName: "John Doe",
Skills: [
{
Name: "Coding",
Level: 5
},
{
Name: "Design",
Level: 4
}
]
};
document.getElementById("xdd").addEventListener("click", async (event) => {
event.preventDefault();
const response = await fetch('/xdd', {
method: 'POST',
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data)
});
});
[HttpPost]
[Route("/xdd")]
public IActionResult Index([FromBody] Employee employee)
{
StringBuilder builder = new StringBuilder();
builder.AppendLine($"Id - {employee.Id}");
builder.AppendLine($"Name - {employee.Name}");
builder.AppendLine($"DisplayName - {employee.DisplayName}");
builder.AppendLine(new string('-', 20));
foreach(Skill skill in employee.Skills)
builder.AppendLine($"Skill {skill.Name} - {skill.Level}");
builder.AppendLine(new string('-', 20));
Console.WriteLine(builder.ToString());
return Ok(builder.ToString());
}
[HttpPost]
[Route("/xdd")]
public IActionResult Index([FromBody] Employee employee)
{
StringBuilder builder = new StringBuilder();
builder.AppendLine($"Id - {employee.Id}");
builder.AppendLine($"Name - {employee.Name}");
builder.AppendLine($"DisplayName - {employee.DisplayName}");
builder.AppendLine(new string('-', 20));
foreach(Skill skill in employee.Skills)
builder.AppendLine($"Skill {skill.Name} - {skill.Level}");
builder.AppendLine(new string('-', 20));
Console.WriteLine(builder.ToString());
return Ok(builder.ToString());
}
4 Replies
ok...
not for no reason it works...
from
ĀÆ\_(ć)_/ĀÆ
<button id="xdd">xdd</button>
<form id="form">
<label for="id">ID:</label>
<input type="number" id="id" name="Id"><br><br>
<label for="name">Name:</label>
<input type="text" id="name" name="Name"><br><br>
<label for="displayName">Display Name:</label>
<input type="text" id="displayName" name="DisplayName"><br><br>
<label for="skills">Skills:</label><br>
<div id="skillsContainer">
</div>
<button type="button" id="addSkill">Add Skill</button><br><br>
<input type="submit" value="Submit">
</form>
<button id="xdd">xdd</button>
<form id="form">
<label for="id">ID:</label>
<input type="number" id="id" name="Id"><br><br>
<label for="name">Name:</label>
<input type="text" id="name" name="Name"><br><br>
<label for="displayName">Display Name:</label>
<input type="text" id="displayName" name="DisplayName"><br><br>
<label for="skills">Skills:</label><br>
<div id="skillsContainer">
</div>
<button type="button" id="addSkill">Add Skill</button><br><br>
<input type="submit" value="Submit">
</form>
document.getElementById("form").addEventListener("submit", async (event) => {
event.preventDefault();
const response = await fetch('/xdd', {
method: 'POST',
headers: { "Accept": "application/json" },
body: new FormData(document.getElementById("form"))
});
if (response.ok) {
console.log(await response.json());
} else {
console.error("Xdd");
}
});
document.getElementById("addSkill").addEventListener("click", () => {
const skillIndex = skillsContainer.querySelectorAll(".skill").length;
const newSkill = document.createElement("div");
newSkill.classList.add("skill");
newSkill.innerHTML = `
<input type="text" class="skillName" name="Skills[${skillIndex}].Name" value="">
<input type="number" class="skillLevel" name="Skills[${skillIndex}].Level" value="">
`;
skillsContainer.appendChild(newSkill);
});
document.getElementById("form").addEventListener("submit", async (event) => {
event.preventDefault();
const response = await fetch('/xdd', {
method: 'POST',
headers: { "Accept": "application/json" },
body: new FormData(document.getElementById("form"))
});
if (response.ok) {
console.log(await response.json());
} else {
console.error("Xdd");
}
});
document.getElementById("addSkill").addEventListener("click", () => {
const skillIndex = skillsContainer.querySelectorAll(".skill").length;
const newSkill = document.createElement("div");
newSkill.classList.add("skill");
newSkill.innerHTML = `
<input type="text" class="skillName" name="Skills[${skillIndex}].Name" value="">
<input type="number" class="skillLevel" name="Skills[${skillIndex}].Level" value="">
`;
skillsContainer.appendChild(newSkill);
});