Business case:- Admin will be displayed a table where he need to edit data in any table row by clicking on edit link.
Admin Screen :- Now admin can click on any row. where the selected row will be displayed in new page with all details populated.
6) Web.xml :- Using this file we route requests to spring
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd">
<context:component-scan base-package="com.springMvc" />
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean>
</beans>
7) Below is my application structure and i use tomcat as my application server.
Admin Screen :- Now admin can click on any row. where the selected row will be displayed in new page with all details populated.
After Clicking on first edit link , Admin can see the details and edit them
Code:-
1) HelloWorldPage.jsp :- This jsp contains table structure, form with hidden field and javascript code to set the values and submit form
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
<script src="${pageContext.servletContext.contextPath}/js/jquery.min.js"></script>
<script>
//Custom javascript function
function myJsFunc(name){
//Retrieve user details
var userData = $('.'+name);
var firstName = userData[0].innerHTML;
var lastName = userData[1].innerHTML;
var points = userData[2].innerHTML;
//Set it in form
var form = $('#globalForm');
form.attr('action', 'hello/addContact.do');
$('#firstname').val(firstName);
$('#lastname').val(lastName);
$('#points').val(points);
//submit form
form.submit();
}
</script>
</head>
<body>
<title>Spring 3 MVC editing data example</title>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
<th>Edit</th>
</tr>
<tr>
<td class="User1">Jill</td>
<td class="User1">Smith</td>
<td class="User1">50</td>
<td><a href="#" onclick="myJsFunc('User1');">EDIT</a></td>
</tr>
<tr>
<td class="User2">Eve</td>
<td class="User2">Jackson</td>
<td class="User2">94</td>
<td><a href="#" onclick="myJsFunc('User2');">EDIT</a></td>
</tr>
<tr>
<td class="User3">John</td>
<td class="User3">Doe</td>
<td class="User3">80</td>
<td><a href="#" onclick="myJsFunc('User3');">EDIT</a></td>
</tr>
</table>
<form id="globalForm" method="post" action="hello/addContact.do">
<input id="firstname" type="hidden" name="firstname">
<input id="lastname" type="hidden" name="lastname">
<input id="points" type="hidden" name="points">
</form>
</body>
</html>
2) Contact.jsp:- This jsp contains the display of edit row clicked.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td class="User1">${data.firstname}</td>
<td class="User1">${data.lastname}</td>
<td class="User1">${data.points}</td>
</tr>
</table>
</body>
</html>
3) Controller class :- This contains the action mapping and model object passing to different jsp after clicking on edit link along with values.
package com.springMvc.example;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.stereotype.Controller;
@Controller
@RequestMapping("/hello")
public class HelloController{
@RequestMapping(method = RequestMethod.GET)
public ModelAndView helloWorld(){
ModelAndView model = new ModelAndView("HelloWorldPage");
model.addObject("command", new Contact());
return model;
}
@RequestMapping(value = "/addContact", method = RequestMethod.POST)
public ModelAndView addContact(@ModelAttribute("contact")
Contact contact, BindingResult result) {
System.out.println("First Name:" + contact.getFirstname() +
"Last Name:" + contact.getLastname());
ModelAndView model = new ModelAndView("contact");
model.addObject("data", contact);
return model;
}
}
4) DTO :- The data bean or model object to get the data moved from front-end to back-end
package com.springMvc.example;
public class Contact {
private String firstname;
private String lastname;
private String points;
public String getFirstname() {
return firstname;
}
public void setFirstname(String firstname) {
this.firstname = firstname;
}
public String getLastname() {
return lastname;
}
public void setLastname(String lastname) {
this.lastname = lastname;
}
public String getPoints() {
return points;
}
public void setPoints(String points) {
this.points = points;
}
}
5) Spring xml :- This file contains all configuration required for spring to function
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd">
<context:component-scan base-package="com.springMvc" />
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean>
</beans>
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd">
<context:component-scan base-package="com.springMvc" />
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean>
</beans>
7) Below is my application structure and i use tomcat as my application server.
