如何使用 Bootstrap 和 thymeleaf 在模态内部的表单中填充值？
Posted
技术标签:
【中文标题】如何使用 Bootstrap 和 thymeleaf 在模态内部的表单中填充值？【英文标题】：How can I populate value at form inside modal using Bootstrap and thymeleaf? 【发布时间】：2018-11-01 01:14:58 【问题描述】：在我的 Spring Boot 项目中，我有一个 html 页面，其中包含学生列表。在该页面中，每个学生都有两个选项Edit 和Delete。当我点击Edit 时，我想以模态显示每个学生信息的价值。但我无法做到这一点。另一个奇怪的事情是每次我点击任何Edit 时，表单只会填充列表的第一个成员。也许我将不得不添加一些javascript 代码或其他内容。这里是学生列表页面截图]1
我的html 文件是
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:sf="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Student List</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<script th:if="$existRoll != null">
$(function ()
$('#myModal').modal('show');
);
</script>
<body>
<div class="container">
<h1 style="text-align:center;">Students List</h1>
<table class="table table-striped">
<tr>
<th>Id</th>
<th>Roll</th>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Setting</th>
</tr>
<tr th:each="student : $studentList">
<td th:text="$student.id"></td>
<td th:text="$student.roll"></td>
<td th:text="$student.firstName"></td>
<td th:text="$student.lastName"></td>
<td th:text="$student.age"></td>
<td>
<button type="button"
class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Edit
</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<!--Form code start from here -->
<!-- Form Name -->
<legend>Registration Form</legend>
<form class="form-horizontal" action="#" th:action="@/doRegistration"
method="post">
<fieldset>
<div class="form-group">
<label class="col-md-4 control-label" for="roll">Roll</label>
<div class="col-md-4">
<input id="id" path="id" name="id" type="hidden"
placeholder="id" class="form-control input-md"
th:value="$student.id"/>
<input id="roll" path="roll" name="roll" type="text"
placeholder="Roll" class="form-control input-md"
th:value="$student.roll"/>
<span th:if="$existRoll !=null" style="color:Red;"> Already Exist !</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="firstName">First Name</label>
<div class="col-md-4">
<input id="firstName" path="firstName" name="firstName"
type="text" placeholder="firstName"
class="form-control input-md" th:value="$student.firstName"
/>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="lastName">Last Name
</label>
<div class="col-md-4">
<input id="lastName" path="lastName" name="lastName"
type="text" placeholder="lastName"
class="form-control input-md"
th:value="$student.lastName"/>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="age">Age
</label>
<div class="col-md-4">
<input id="age" path="age" name="age"
type="text" placeholder="age" class="form-control input-md"
th:value="$student.age"/>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="pass">Password</label>
<div class="col-md-4">
<input id="pass" path="pass" name="pass"
type="password" placeholder="password"
class="form-control input-md"
th:value="$student.pass"/>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="register"></label>
<div class="col-md-4">
<button id="register" name="register" class="btn btn-primary">
Register
</button>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<a th:href="@/deleteStudent/(id=$student.id)"
onclick="return confirm('Are you sure you want to delete this item?');">Delete</a>
</td>
</tr>
</table>
</div>
</body>
</html>
我的整个Controller 班级是
package org.avijit.Controller;
import org.avijit.Entity.Student;
import org.avijit.Service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.*;
import javax.validation.Valid;
import java.util.List;
@Controller
public class StudentController
@Autowired
StudentService studentService;
@RequestMapping(value = "/logForm", method = RequestMethod.GET)
public String gotoHome()
return "Login";
@RequestMapping(value = "/loginCheck", method = RequestMethod.POST)
public String checkLogin(@RequestParam String roll, @RequestParam String pass, Model model)
if (studentService.existsByRollAndPass(roll, pass))
return "Welcome";
else
model.addAttribute("logError", "logError");
return "Login";
@RequestMapping(value = "/registration")
public String registration(Model model)
model.addAttribute(new Student());
return "Registration";
@RequestMapping(value = "/getStudents")
public String getStudents(Model model)
List<Student> studentList = studentService.getStudents();
model.addAttribute(studentList);
return "StudentList";
@RequestMapping(value = "/deleteStudent", method = RequestMethod.GET)
public String deleteStudent(@RequestParam(name = "id") int id)
studentService.deleteStudent(id);
return "redirect:/getStudents";
@RequestMapping(value = "/editStudent/id", method = RequestMethod.GET)
public String editStudent(@PathVariable("id") int id, Model model)
Student student = studentService.getStudent(id);
model.addAttribute("student", student);
return "StudentList";
@RequestMapping(value = "/demo")
public String demoRegistration(Model model)
model.addAttribute(new Student());
return "DemoRegistration";
@RequestMapping(value = "/doRegistration", method = RequestMethod.POST)
public String doRegistration(@Valid @ModelAttribute("student") Student student, BindingResult result, Model model)
if (result.hasErrors())
model.addAttribute("hasError", true);
return "DemoRegistration";
else
if (student.getId() == null && !studentService.rollExist(student.getRoll()))
studentService.saveStudent(student);
return "Welcome";
else if (student.getId() == null && studentService.rollExist(student.getRoll()))
model.addAttribute("existRoll", "existRoll");
model.addAttribute("hasError", true);
return "DemoRegistration";
else
Student student1 = studentService.getStudent(student.getId());
if (student1.getId() != null && !student1.getRoll().equals(student.getRoll()) && studentService.rollExist(student.getRoll()))
model.addAttribute("hasError", "hasError");
model.addAttribute("existRoll", "existRoll");
return "redirect:/getStudents";
else
student1.setFirstName(student.getFirstName());
student1.setLastName(student.getLastName());
student1.setRoll(student.getRoll());
student1.setAge(student.getAge());
student1.setPass(student.getPass());
studentService.saveStudent(student1);
return "redirect:/getStudents";
【问题讨论】：
【参考方案1】：在 *** 上花了 1 小时，终于找到了解决方案。我的 HTML 代码做了一些改动
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Edit </button>
到
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" th:attrappend="data-target=$student.id">Edit </button>
和<div class="modal fade" id="myModal" role="dialog">
到
<div class="modal fade" id="myModal" role="dialog" th:attrappend="id=$student.id">
现在一切正常！
【讨论】：
@user3365200 对于编辑，我使用了相同的保存方法，即/doRegistration。你可以看到我把条件放在控制器中。
谢谢。但是无论如何在弹出窗口中填充特定的行值而不调用控制器方法，因为我们已经有了数据，所以当我们在该特定索引处单击编辑时，我们如何在不调用控制器的情况下在弹出窗口中设置该数据。这在 jsp 中是可能的，但我不知道如何在 thymeleaf 中实现
@user3365200 如果这种方法在 JSP 中是可行的，那么它也将在 thymeleaf 中完成。但我没有那样做。但我可以找到这种方法以上是关于如何使用 Bootstrap 和 thymeleaf 在模态内部的表单中填充值？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Bootstrap 4 和 Angular 7 在导航栏中制作多级下拉菜单
如何使用 Bootstrap 模态和按钮制作可重复使用的确认控件？
如何在项目中同时使用 rtl 和 ltr bootstrap 5 sass 样式？