C#•14mo ago

✅ Forms, Js and MVC

hi 🙂 , so i was watching some interviews and there was task to ["Do something with data"], lets say registration

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

so, with premade data in json it works well

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

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?

4 Replies

wwwwOP•14mo ago

ok... not for no reason it works...

wwwwOP•14mo ago

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

¯\_(ツ)_/¯

Gaming

Programming

✅ Forms, Js and MVC