Mapping MVC to template using thymeleaf
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
Teaching myself Spring 5, SpringBoot, and MVC using thymeleaf. It's a simple application. I am working with my controller first to get the view populating correctly before I move to the data access layer.
My issue is the view is not populating with the data that I have created in the Controller.
This is my Controller:
// generates a logger class for you
@Slf4j
@Controller
@RequestMapping("/select")
public class AreaCodeController {
/*
* This method is called BEFORE the @GetMapping method.
* Building a list of items to display on the select template
*/
@ModelAttribute()
public void addAreaToModel(Model model) {
// id, code, country, abbr, provStateLongName, StateCode
List<Area> listing = Arrays.asList(new Area(1000, 123, "US", "AL", "Alabama", StateCode.AL),
new Area(1001, 124, "US", "MS", "Mississippi", StateCode.MS),
new Area(1002, 125, "US", "WA", "Washington", StateCode.WA),
new Area(1003, 126, "US", "WV", "West Virgina", StateCode.WV),
new Area(1004, 127, "US", "GA", "Georgia", StateCode.GA),
new Area(1005, 128, "US", "IL", "Illonis", StateCode.IL),
new Area(1006, 129, "US", "OR", "Oregon", StateCode.OR),
new Area(1007, 121, "US", "CA", "California", StateCode.CA),
new Area(1008, 122, "US", "NV", "Nevada", StateCode.NV),
new Area(1009, 120, "US", "NM", "New Mexico", StateCode.NM),
new Area(1010, 130, "US", "LA", "WildWilly", StateCode.LA));
StateCode stateCodes = Area.StateCode.values();
for (StateCode stateCode : stateCodes) {
model.addAttribute("areaCodeList", filterByStateCode(listing, stateCode));
}
}
@GetMapping
public String showSelectForm(Model model) {
model.addAttribute("select", new BusinessNumber());
return "select";
}
private List<Area> filterByStateCode(List<Area> listing, StateCode sc)
{
return listing.stream().filter(x -> x.getCode().equals(sc)).collect(Collectors.toList());
}
}
This is my view:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Virtual Business Number Listing</title>
<link rel="stylesheet" th:href="@{/styles.css}" />
</head>
<body>
<h1>List of Available Business Numbers</h1>
<img th:src="@{/images/phone.png}" style="width:200px;height:125px"/>
<form method="POST" th:object="${select}">
<div class="grid">
<div class="area-group" id="abbrs">
<h3>Choose Your Business Number:</h3>
<div th:each="area : ${areaCodeList}">
<input type="checkbox" name="areaCodeList" th:value="{area.id}" />
<span th:text="${area.code}">Area Code</span><br/>
</div>
</div>
<br/>
<input type="Submit" id="submitButton" th:value="Save">
</div>
</form>
</body>
</html>This is the behavior I am seeing:
Any suggestions would be greatly appreciated.
Thanks,
Russ
spring-mvc thymeleaf
asked Nov 23 '18 at 12:23
rrayrray
313719
add a comment |
Teaching myself Spring 5, SpringBoot, and MVC using thymeleaf. It's a simple application. I am working with my controller first to get the view populating correctly before I move to the data access layer.
My issue is the view is not populating with the data that I have created in the Controller.
This is my Controller:
// generates a logger class for you
@Slf4j
@Controller
@RequestMapping("/select")
public class AreaCodeController {
/*
* This method is called BEFORE the @GetMapping method.
* Building a list of items to display on the select template
*/
@ModelAttribute()
public void addAreaToModel(Model model) {
// id, code, country, abbr, provStateLongName, StateCode
List<Area> listing = Arrays.asList(new Area(1000, 123, "US", "AL", "Alabama", StateCode.AL),
new Area(1001, 124, "US", "MS", "Mississippi", StateCode.MS),
new Area(1002, 125, "US", "WA", "Washington", StateCode.WA),
new Area(1003, 126, "US", "WV", "West Virgina", StateCode.WV),
new Area(1004, 127, "US", "GA", "Georgia", StateCode.GA),
new Area(1005, 128, "US", "IL", "Illonis", StateCode.IL),
new Area(1006, 129, "US", "OR", "Oregon", StateCode.OR),
new Area(1007, 121, "US", "CA", "California", StateCode.CA),
new Area(1008, 122, "US", "NV", "Nevada", StateCode.NV),
new Area(1009, 120, "US", "NM", "New Mexico", StateCode.NM),
new Area(1010, 130, "US", "LA", "WildWilly", StateCode.LA));
StateCode stateCodes = Area.StateCode.values();
for (StateCode stateCode : stateCodes) {
model.addAttribute("areaCodeList", filterByStateCode(listing, stateCode));
}
}
@GetMapping
public String showSelectForm(Model model) {
model.addAttribute("select", new BusinessNumber());
return "select";
}
private List<Area> filterByStateCode(List<Area> listing, StateCode sc)
{
return listing.stream().filter(x -> x.getCode().equals(sc)).collect(Collectors.toList());
}
}
This is my view:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Virtual Business Number Listing</title>
<link rel="stylesheet" th:href="@{/styles.css}" />
</head>
<body>
<h1>List of Available Business Numbers</h1>
<img th:src="@{/images/phone.png}" style="width:200px;height:125px"/>
<form method="POST" th:object="${select}">
<div class="grid">
<div class="area-group" id="abbrs">
<h3>Choose Your Business Number:</h3>
<div th:each="area : ${areaCodeList}">
<input type="checkbox" name="areaCodeList" th:value="{area.id}" />
<span th:text="${area.code}">Area Code</span><br/>
</div>
</div>
<br/>
<input type="Submit" id="submitButton" th:value="Save">
</div>
</form>
</body>
</html>This is the behavior I am seeing:
Any suggestions would be greatly appreciated.
Thanks,
Russ
spring-mvc thymeleaf
asked Nov 23 '18 at 12:23
rrayrray
313719
add a comment |
Teaching myself Spring 5, SpringBoot, and MVC using thymeleaf. It's a simple application. I am working with my controller first to get the view populating correctly before I move to the data access layer.
My issue is the view is not populating with the data that I have created in the Controller.
This is my Controller:
// generates a logger class for you
@Slf4j
@Controller
@RequestMapping("/select")
public class AreaCodeController {
/*
* This method is called BEFORE the @GetMapping method.
* Building a list of items to display on the select template
*/
@ModelAttribute()
public void addAreaToModel(Model model) {
// id, code, country, abbr, provStateLongName, StateCode
List<Area> listing = Arrays.asList(new Area(1000, 123, "US", "AL", "Alabama", StateCode.AL),
new Area(1001, 124, "US", "MS", "Mississippi", StateCode.MS),
new Area(1002, 125, "US", "WA", "Washington", StateCode.WA),
new Area(1003, 126, "US", "WV", "West Virgina", StateCode.WV),
new Area(1004, 127, "US", "GA", "Georgia", StateCode.GA),
new Area(1005, 128, "US", "IL", "Illonis", StateCode.IL),
new Area(1006, 129, "US", "OR", "Oregon", StateCode.OR),
new Area(1007, 121, "US", "CA", "California", StateCode.CA),
new Area(1008, 122, "US", "NV", "Nevada", StateCode.NV),
new Area(1009, 120, "US", "NM", "New Mexico", StateCode.NM),
new Area(1010, 130, "US", "LA", "WildWilly", StateCode.LA));
StateCode stateCodes = Area.StateCode.values();
for (StateCode stateCode : stateCodes) {
model.addAttribute("areaCodeList", filterByStateCode(listing, stateCode));
}
}
@GetMapping
public String showSelectForm(Model model) {
model.addAttribute("select", new BusinessNumber());
return "select";
}
private List<Area> filterByStateCode(List<Area> listing, StateCode sc)
{
return listing.stream().filter(x -> x.getCode().equals(sc)).collect(Collectors.toList());
}
}
This is my view:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Virtual Business Number Listing</title>
<link rel="stylesheet" th:href="@{/styles.css}" />
</head>
<body>
<h1>List of Available Business Numbers</h1>
<img th:src="@{/images/phone.png}" style="width:200px;height:125px"/>
<form method="POST" th:object="${select}">
<div class="grid">
<div class="area-group" id="abbrs">
<h3>Choose Your Business Number:</h3>
<div th:each="area : ${areaCodeList}">
<input type="checkbox" name="areaCodeList" th:value="{area.id}" />
<span th:text="${area.code}">Area Code</span><br/>
</div>
</div>
<br/>
<input type="Submit" id="submitButton" th:value="Save">
</div>
</form>
</body>
</html>This is the behavior I am seeing:
Any suggestions would be greatly appreciated.
Thanks,
Russ
spring-mvc thymeleaf
asked Nov 23 '18 at 12:23
rrayrray
313719
Teaching myself Spring 5, SpringBoot, and MVC using thymeleaf. It's a simple application. I am working with my controller first to get the view populating correctly before I move to the data access layer.
My issue is the view is not populating with the data that I have created in the Controller.
This is my Controller:
// generates a logger class for you
@Slf4j
@Controller
@RequestMapping("/select")
public class AreaCodeController {
/*
* This method is called BEFORE the @GetMapping method.
* Building a list of items to display on the select template
*/
@ModelAttribute()
public void addAreaToModel(Model model) {
// id, code, country, abbr, provStateLongName, StateCode
List<Area> listing = Arrays.asList(new Area(1000, 123, "US", "AL", "Alabama", StateCode.AL),
new Area(1001, 124, "US", "MS", "Mississippi", StateCode.MS),
new Area(1002, 125, "US", "WA", "Washington", StateCode.WA),
new Area(1003, 126, "US", "WV", "West Virgina", StateCode.WV),
new Area(1004, 127, "US", "GA", "Georgia", StateCode.GA),
new Area(1005, 128, "US", "IL", "Illonis", StateCode.IL),
new Area(1006, 129, "US", "OR", "Oregon", StateCode.OR),
new Area(1007, 121, "US", "CA", "California", StateCode.CA),
new Area(1008, 122, "US", "NV", "Nevada", StateCode.NV),
new Area(1009, 120, "US", "NM", "New Mexico", StateCode.NM),
new Area(1010, 130, "US", "LA", "WildWilly", StateCode.LA));
StateCode stateCodes = Area.StateCode.values();
for (StateCode stateCode : stateCodes) {
model.addAttribute("areaCodeList", filterByStateCode(listing, stateCode));
}
}
@GetMapping
public String showSelectForm(Model model) {
model.addAttribute("select", new BusinessNumber());
return "select";
}
private List<Area> filterByStateCode(List<Area> listing, StateCode sc)
{
return listing.stream().filter(x -> x.getCode().equals(sc)).collect(Collectors.toList());
}
}
This is my view:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Virtual Business Number Listing</title>
<link rel="stylesheet" th:href="@{/styles.css}" />
</head>
<body>
<h1>List of Available Business Numbers</h1>
<img th:src="@{/images/phone.png}" style="width:200px;height:125px"/>
<form method="POST" th:object="${select}">
<div class="grid">
<div class="area-group" id="abbrs">
<h3>Choose Your Business Number:</h3>
<div th:each="area : ${areaCodeList}">
<input type="checkbox" name="areaCodeList" th:value="{area.id}" />
<span th:text="${area.code}">Area Code</span><br/>
</div>
</div>
<br/>
<input type="Submit" id="submitButton" th:value="Save">
</div>
</form>
</body>
</html>This is the behavior I am seeing:
Any suggestions would be greatly appreciated.
Thanks,
Russ
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Virtual Business Number Listing</title>
<link rel="stylesheet" th:href="@{/styles.css}" />
</head>
<body>
<h1>List of Available Business Numbers</h1>
<img th:src="@{/images/phone.png}" style="width:200px;height:125px"/>
<form method="POST" th:object="${select}">
<div class="grid">
<div class="area-group" id="abbrs">
<h3>Choose Your Business Number:</h3>
<div th:each="area : ${areaCodeList}">
<input type="checkbox" name="areaCodeList" th:value="{area.id}" />
<span th:text="${area.code}">Area Code</span><br/>
</div>
</div>
<br/>
<input type="Submit" id="submitButton" th:value="Save">
</div>
</form>
</body>
</html><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Virtual Business Number Listing</title>
<link rel="stylesheet" th:href="@{/styles.css}" />
</head>
<body>
<h1>List of Available Business Numbers</h1>
<img th:src="@{/images/phone.png}" style="width:200px;height:125px"/>
<form method="POST" th:object="${select}">
<div class="grid">
<div class="area-group" id="abbrs">
<h3>Choose Your Business Number:</h3>
<div th:each="area : ${areaCodeList}">
<input type="checkbox" name="areaCodeList" th:value="{area.id}" />
<span th:text="${area.code}">Area Code</span><br/>
</div>
</div>
<br/>
<input type="Submit" id="submitButton" th:value="Save">
</div>
</form>
</body>
</html>spring-mvc thymeleaf
spring-mvc thymeleaf
asked Nov 23 '18 at 12:23
rrayrray
313719
asked Nov 23 '18 at 12:23
rrayrray
313719
asked Nov 23 '18 at 12:23
rrayrray
313719
asked Nov 23 '18 at 12:23
rrayrray
313719
asked Nov 23 '18 at 12:23
rrayrray
313719
313719
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
After walking through the code I have solved my own error. As painful as it was, it involved several things:
- The filterByStateCode method was using the wrong attribute to filter on. It
was always returning empty. - Adding the the same key for the model attribute was overwriting each entry once the filter method was fixed.
The 'select' template was not keying on the create field.
answered Nov 23 '18 at 20:21
rrayrray
313719
add a comment |
I think your form tag does not know which action to take from the controller so you need to add it this way :
1- in your view : <form method="POST" th:object="${select}" *th:action="@{/something}"*>
2-in your controller : above your method @GetMapping should be @PostMapping(value="/something") cause of your form has a post method creating a new object select
answered Nov 24 '18 at 3:44
NesrynaNesryna
84
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53446677%2fmapping-mvc-to-template-using-thymeleaf%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
After walking through the code I have solved my own error. As painful as it was, it involved several things:
- The filterByStateCode method was using the wrong attribute to filter on. It
was always returning empty. - Adding the the same key for the model attribute was overwriting each entry once the filter method was fixed.
The 'select' template was not keying on the create field.
answered Nov 23 '18 at 20:21
rrayrray
313719
add a comment |
After walking through the code I have solved my own error. As painful as it was, it involved several things:
- The filterByStateCode method was using the wrong attribute to filter on. It
was always returning empty. - Adding the the same key for the model attribute was overwriting each entry once the filter method was fixed.
The 'select' template was not keying on the create field.
answered Nov 23 '18 at 20:21
rrayrray
313719
add a comment |
After walking through the code I have solved my own error. As painful as it was, it involved several things:
- The filterByStateCode method was using the wrong attribute to filter on. It
was always returning empty. - Adding the the same key for the model attribute was overwriting each entry once the filter method was fixed.
The 'select' template was not keying on the create field.
answered Nov 23 '18 at 20:21
rrayrray
313719
After walking through the code I have solved my own error. As painful as it was, it involved several things:
- The filterByStateCode method was using the wrong attribute to filter on. It
was always returning empty. - Adding the the same key for the model attribute was overwriting each entry once the filter method was fixed.
The 'select' template was not keying on the create field.
answered Nov 23 '18 at 20:21
rrayrray
313719
answered Nov 23 '18 at 20:21
rrayrray
313719
answered Nov 23 '18 at 20:21
rrayrray
313719
answered Nov 23 '18 at 20:21
rrayrray
313719
313719
add a comment |
add a comment |
I think your form tag does not know which action to take from the controller so you need to add it this way :
1- in your view : <form method="POST" th:object="${select}" *th:action="@{/something}"*>
2-in your controller : above your method @GetMapping should be @PostMapping(value="/something") cause of your form has a post method creating a new object select
answered Nov 24 '18 at 3:44
NesrynaNesryna
84
add a comment |
I think your form tag does not know which action to take from the controller so you need to add it this way :
1- in your view : <form method="POST" th:object="${select}" *th:action="@{/something}"*>
2-in your controller : above your method @GetMapping should be @PostMapping(value="/something") cause of your form has a post method creating a new object select
answered Nov 24 '18 at 3:44
NesrynaNesryna
84
add a comment |
I think your form tag does not know which action to take from the controller so you need to add it this way :
1- in your view : <form method="POST" th:object="${select}" *th:action="@{/something}"*>
2-in your controller : above your method @GetMapping should be @PostMapping(value="/something") cause of your form has a post method creating a new object select
answered Nov 24 '18 at 3:44
NesrynaNesryna
84
I think your form tag does not know which action to take from the controller so you need to add it this way :
1- in your view : <form method="POST" th:object="${select}" *th:action="@{/something}"*>
2-in your controller : above your method @GetMapping should be @PostMapping(value="/something") cause of your form has a post method creating a new object select
answered Nov 24 '18 at 3:44
NesrynaNesryna
84
edited Nov 24 '18 at 4:42
answered Nov 24 '18 at 3:44
NesrynaNesryna
84
answered Nov 24 '18 at 3:44
NesrynaNesryna
84
answered Nov 24 '18 at 3:44
NesrynaNesryna
84
84
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53446677%2fmapping-mvc-to-template-using-thymeleaf%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
