I use Class SongController to display the required list via Jsp
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import com.tma.model.Song;
import com.tma.service.SongService;
@Controller
@RequestMapping("/song")
public class SongController {
@Autowired
private SongService songService;
@RequestMapping(value = { "/" , "/listSongs" })
public String listSongs(Map<String, Object> map){
map.put("song", new Song());
map.put("songList", songService.listSongs());
return "/song/listSongs";
}
@RequestMapping("/get/{songId}")
public String getSong(@PathVariable Integer songId,Map<String, Object> map){
Song song = songService.getSong(songId);
map.put("song", song);
return "/song/songForm";
}
@RequestMapping(value = "/save", method = RequestMethod.POST)
public String saveSong(@ModelAttribute("song") Song song,
BindingResult result) {
songService.saveSong(song);
return "redirect:listSongs";
}
@RequestMapping("/delete/{songId}")
public String deleteSong(@PathVariable("songId") Integer id) {
songService.deleteSong(id);
return "redirect:/song/listSongs";
}
}
**This is file songForm.jsp**
<%@ taglib uri="http://ift.tt/IED0jK" prefix="form"%>
<%@ taglib uri="http://ift.tt/QfKAz6" prefix="c"%>
<c:url var="actionUrl" value="save" />
<form:form id="songForm" commandName="song" method="post"
action="${actionUrl }" class="form-horizontal">
<div class="form-group">
<label for="name" class="col-xs-4 control-label">Name</label>
<div class="col-xs-8">
<form:input path="name" placeholder="Name" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="genre" class="col-xs-4 control-label">Genre</label>
<div class="col-xs-8">
<form:input path="Genre" placeholder="Genre" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="file" class="col-xs-4 control-label">File</label>
<div class="col-xs-8">
<form:input path="file"
type="file" aria-required="true" />
</div>
</div>
<form:input path="id" type="hidden" />
</form:form>
**This is file listSongs.jsp**
<%@ taglib uri="http://ift.tt/QfKAz6" prefix="c"%>
<html>
<head>
<title>MusicManager</title>
<link rel="stylesheet"
href='<c:url value="/web-resources/lib/bootstrap-3.3.6/css/bootstrap.min.css"/>'>
<link rel="stylesheet"
href='<c:url value="/web-resources/lib/jquery/jquery-ui-1.10.4.custom.css"/>'>
<style type="text/css">
th {
text-align: left
}
</style>
</head>
<body>
<div style="width: 95%; margin: 0 auto;">
<div id="bookDialog" style="display: none;">
<%@ include file="songForm.jsp"%>
</div>
<h1>List Songs</h1>
<button class="btn btn-primary" onclick="addBook()">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Book
</button>
<br>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th width="4%">S.N</th>
<th width="12%">Name</th>
<th width="12%">Genre</th>
<th width="12%">File</th>
<th width="12%"></th>
</tr>
</thead>
<tbody>
<c:forEach items="${songList}" var="song" varStatus="loopCounter">
<tr>
<td><c:out value="${loopCounter.count}" /></td>
<td><c:out value="${song.name}" /></td>
<td><c:out value="${song.genre}" /></td>
<td><c:out value="${song.file}" /></td>
<td><nobr>
<button class="btn btn-primary"
onclick="editBook(${song.id});">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Edit
</button>
<a class="btn btn-primary"
onclick="return confirm('Are you sure you want to delete this book?');"
href="delete/${song.id}">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete
</a>
</nobr></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<!-- It is advised to put the <script> tags at the end of the document body so they don't block rendering of the page -->
<script type="text/javascript"
src='<c:url value="/web-resources/lib/jquery/jquery-1.10.2.js"/>'></script>
<script type="text/javascript"
src='<c:url value="/web-resources/lib/jquery/jquery-ui-1.10.4.custom.js"/>'></script>
<script type="text/javascript"
src='<c:url value="/web-resources/lib/jquery/jquery.ui.datepicker.js"/>'></script>
<script type="text/javascript"
src='<c:url value="/web-resources/lib/bootstrap-3.3.6/js/bootstrap.min.js"/>'></script>
<script type="text/javascript"
src='<c:url value="/web-resources/js/js-for-listBooks.js"/>'></script>
</body>
</html>
Result: enter image description here
I do not want to display the above results with JSP java code. I want to replace it with angularJS. Help me, thanks!
Aucun commentaire:
Enregistrer un commentaire