From controller, data is not transforming to html view page

Question

I am trying send the data through controller to html page but unable data transmission is getting failed. Control is redirecting to the desired page along with labels but form data is not reflecting in the view page.

   ***HomeController***

 package com.example.demo.web;      

    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.servlet.mvc.support.RedirectAttributes;

    import com.example.demo.domain.User;

    @Controller
    public class HomeController {

        User user = new User();

        @RequestMapping("/")
        public String home(Model model) {
            model.addAttribute("formData", user);

            return "index";
        }

        @RequestMapping(value="/create", method=RequestMethod.POST)
        public String processFormData(User user, RedirectAttributes attr) {

            attr.addFlashAttribute("user",user);
            return "redirect:display";
        }

        @RequestMapping(value="/display", method=RequestMethod.GET)
        public String displayFormData(User user) {
            return "result";
        }

    }

index.html

 <!DOCTYPE html>

    <html xmlns:th="http://thymeleaf.org">

    <head>

    <meta charset="UTF-8">

    <title> Home Page </title>

    </head>
    <body>
    <p> Enter Data Below </p>
    <form action="/create" method="post" th:object="${formData}">

    <p>Full Name:<input type="text" th:feild="${formData.fullName}"/></p>
    <p>Age:<input type="text" th:feild="${formData.age}"/></p>
    <p>Employed?<input type="checkbox" th:feild="${formData.employed}" th:value="true"/></p>
    <p>Gender:</p>
    <p>Male<input type="radio" th:feild="${formData.gender}" th:value="Male"/>
       Female<input type="radio" th:feild="${formData.gender}" th:value="Female"/></p>
        <p><input type="submit" value="Submit"/> <input type="reset" value="Reset"/></p>
    </form>

    </body>
    </html>

result.html

<html xmlns:th="https://thymeleaf.org">  
<table>  
<tr>  
<td><h4>User Name: </h4></td>  
<td><h4 th:text="${user.fullName}"></h4></td>  
</tr>  
<tr>  
<td><h4>Age: </h4></td>  
<td><h4 th:text="${user.age}"></h4></td>  
</tr>  
</table>  
</html>

can you post, what is the error you are getting or at which step are you stuck?? — Lazycoder-007
– Lazycoder-007, Commented May 24, 2020 at 5:10

Abby Howe · Accepted Answer · 2020-05-25 00:09:59Z

The controller class sends and reads a form view. The User data is passed as a parameter to the processForm() handler. Spring tries to fill the bean with the request data. The data is also automatically available for the Thymeleaf result view. The @Controller annotation allows the implementation classes to be autodetected through the classpath scanning.

@Controller is typically used in combination with a @RequestMapping annotation used on request handling methods. I used the @GetMapping and @@PostMapping` as a shortcut to @RequestMapping(method = RequestMethod.POST)

@Controller 
public class HomeController {
//This responds to localhost:8080/
@GetMapping("/")
    public String sendForm(User user){
    return "index";
}

//This responds to localhost:8080/
@PostMapping("/")
    public String processForm(User user){
    return "result";
}

User Class. This is the User class. It is automatically filled with data from the form request. The attributes must match the form fields. You should be able to see the matching attribute names in the template views below.

    public class User {

        private String fullName;
        private int age;
        private String occupation;

        public String getFullName() {
            return fullName;
        }

        public void setFullName(String name) {
            this.fullName = name;
        }

        public String getOccupation() {
            return occupation;
        }

        public void setOccupation(String occupation) {
            this.occupation = occupation;
        }

        public int getAge() {
            return age;
        }

        public void setAge(int age) {
            this.age = age;
        }
    }

index.html The th:object refers to the user form bean. This is not a class name, but a Spring bean name; therefore it is in lowercase. With the *{} syntax, we refer to the defined object. In this case its the user object. I noticed that you misspelled th:field, this can also create bugs.

<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title></title>
</head>
<body>
<p> Enter Data Below </p>
<form th:action="@{/}" th:object="${user}" method="post">

    <p>Full Name:<input type="text" th:field="*{fullName}" id="fullName" name="fullname" autofocus="autofocus"></p>
    <p>Age:<input type="number" th:field="*{age}" id="age" name="age" autofocus="autofocus" /></p>

    <p><input type="submit" value="Submit"/> <input type="reset" value="Reset"/></p>
</form>
</body>
</html>

result.html We identify the form attributes with the ${} syntax.

<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title></title>
</head>
<body>
<table>
    <tr>
        <td><h4>User Name: </h4></td>
        <td><h4 th:text="${user.fullName}"></h4></td>
    </tr>
    <tr>
        <td><h4>Age: </h4></td>
        <td><h4 th:text="${user.age}"></h4></td>
    </tr>
</table>
</body>
</html>

Thank you Abby Howe. Now i clearly understand the concept nad flow. Thanks again
@Narendra Please mark this answer as correct if your issue is resolved. Thanks

Collectives™ on Stack Overflow

From controller, data is not transforming to html view page

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related