Home > Software engineering >  How to pass individual variables to view in thymeleaf?
How to pass individual variables to view in thymeleaf?

Time:11-25

Hi I'm building a skeleton of a car renting webapp and I'm trying to create a view that shows some details like location name, car name etc.

View code- car-list.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Vehicle List</title>

<h2 th:text="${location1}">Locations</h2>
  <table >
    <thead>
      <td th:text="${vehicle1Name}">Vehicle Name</td>
    </tr>
    </thead>
      <td th:text="${vehicle2Name}">Vehicle Name</td>
    </tr>
  </table>



</head>
<body>

</body>
</html>

And heres my controller

package com.project.CS4125.controller;

import com.project.CS4125.model.*;
import com.project.CS4125.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
@RequestMapping("/car-list")
public class VehicleController {

    @GetMapping("/car-list")
    public String carList(Model model){

        Vehicle VWGolf = new BasicCar();

        Vehicle Duster = new SUVDecorator(new BasicCar());

        Location limerick= new Location("Limerick");

        model.addAttribute("location1", limerick.getLocationName());
        model.addAttribute("vehicle1Name", "Volkswagen Golf");
        model.addAttribute("vehicle2Name", "Dacia Duster");

        return "index";
    }

}

My problem is the view comes up completely empty, any help appreciated.

EDIT Before this page I have a register and login page

index.html (register page

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Register</title>
</head>
<body>
<form action="#" th:action="@{/register}" th:object="${user}"
        method="post">
  <p>User Name <input type="text" name="name"></p>
  <p>Password <input type="password" name="password"></p>
  <button type="submit">Register</button>
</form>
<button><a href="/login">Login Here</a></button>
</body>
</html>

login.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
<form action="#" th:action="@{/login}" th:object="${user}"
      method="post">
    <p>User Name <input type="text" name="name"></p>
    <p>Password <input type="password" name="password"></p>
    <button type="submit">Login</button>
</form>
<button><a href="/">Register Here</a></button>
</body>
</html>

And heres the controller for these

@Controller
@RequestMapping("/")
public class IndexController {

    @Autowired
    private UserService userService;

    @Autowired
    private CustomerFactory userFactory;

    @PostMapping("/register")
    public String registerUser(@ModelAttribute User user){

        User u = userFactory.createUser(user.getName(), user.getPassword());
        userService.saveUser(u);
        return "login";

    }

    @GetMapping("/login")
    public String login(){
        return "login";
    }

    @PostMapping("/login")
    public String loginUser(@ModelAttribute User user){

        User authenticatedUser = userService.authenticate(user.getName(), user.getPassword());
        System.out.println(authenticatedUser.toString());

        return "car-list";
    }
}

Even after adding the code from the answer below I'm still getting an empty page, after submitting the login form moving to the car list page its still empty.

I also noticed in the answer the URL is http://localhost:8080/car-list but when I try it its http://localhost:8080/login

CodePudding user response:

I've just tested your code and you have two problems.

The first one is at your:

@Controller
@RequestMapping("/car-list")
public class VehicleController {

    @GetMapping("/car-list")

In this GetMapping you're saying that you want to access your template at /car-list/car-list.

The seccond one is with your template name. You're returning "index" when you should return "car-list", at this you're returning the template name.

So, editting your code like this:

@Controller
@RequestMapping("/car-list")
public class VehicleController {

    @GetMapping
    public String carList(Model model){
        model.addAttribute("location1", "Answer");
        model.addAttribute("vehicle1Name", "Volkswagen Golf");
        model.addAttribute("vehicle2Name", "Dacia Duster");
        return "car-list";
    }
}

I got: Template working and returning

  • Related