Spring - MVC Listbox

Spring MVC provides built-in support for creating and processing list boxes using the Spring Form Tag Library. The <form:select> tag allows users to select one or more options from a list while automatically binding the selected values to Java Bean properties. This simplifies form handling and reduces manual data processing in Spring MVC applications.

• Creates single-select and multi-select list boxes in JSP pages.
• Supports automatic data binding with Java Bean properties.
• Populates list box options dynamically using collections such as List, Map, or arrays.

spring-form.tld

The Spring Form Tag Library provides tags for creating and processing form elements in Spring MVC applications.

• Enables automatic binding between form fields and Java Bean properties.
• Simplifies form creation and form data processing.

To use the tag library, first import it into the JSP page:

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

The <form:select> Tag

The <form:select> tag is used to create a list box (drop-down list) in JSP pages and bind the selected value to a property of a model object.

• Generates an HTML <select> element.
• Automatically binds the selected option to a bean property.

Syntax

<form:select path="city"> </form:select>

• path : Specifies the bean property to which the selected value is bound.

The <form:option> Tag

The <form:option> tag is used to create a single option inside a list box.

• Creates a single option inside the list box.
• Used when options are defined manually.

Syntax

<form:option value="Delhi" label="Delhi"/>

• value : Specifies the value submitted to the server.
• label : Specifies the text displayed to the user.

The <form:options> tag is used to generate multiple options dynamically from a collection.

• Creates multiple options dynamically.
• Useful when options are fetched from a database or collection.

Syntax

<form:options items="${cityList}" itemValue="id" itemLabel="name"/>

• items : Collection containing option data.
• itemValue : Property used as the option value.
• itemLabel : Property displayed to the user.

Steps to implements Listbox oin Spring MVC Application

Follow these steps to create a application in Spring MVC using Listbox.

Prerequisites

• Java JDK 8 or later installed.
• Spring Tool Suite (STS) / Eclipse IDE installed.
• Apache Tomcat Server configured in the IDE.

Step 1: Create a Maven Project

• Open STS IDE.
• Click File - New - Maven Project.
• Select Create a simple project (Select archetype ) and click Next.

Then Enter the following details:

• Group Id: com.gfg
• Artifact Id: SpringMVCDropDown
• Packaging: war

Click Finish.

The project Structure is as follows:

Step 2: Add Required Dependencies

Add the following maven dependencies and plugin to your pom.xml file.

<project xmlns="https://maven.apache.org/POM/4.0.0" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="https://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.geeksforgeeks</groupId>
  <artifactId>SpringMVC</artifactId>
  <packaging>war</packaging>
  <version>0.0.1-SNAPSHOT</version>
  <name>SpringMVC Maven Webapp</name>
  <url>http://maven.apache.org</url>
  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
    
    <!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>5.1.1.RELEASE</version>
</dependency>

<!-- https://mvnrepository.com/artifact/org.apache.tomcat/tomcat-jasper -->
<dependency>
    <groupId>org.apache.tomcat</groupId>
    <artifactId>tomcat-jasper</artifactId>
    <version>9.0.12</version>
</dependency>
    <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
<dependency>  
    <groupId>javax.servlet</groupId>  
    <artifactId>servlet-api</artifactId>  
    <version>3.0-alpha-1</version>  
</dependency>

<!-- https://mvnrepository.com/artifact/javax.servlet/jstl -->
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jstl</artifactId>
    <version>1.2</version>
</dependency>

  </dependencies>
  <build>
    <finalName>SpringMVC</finalName>
  </build>
</project>

Step 3: Create Bean Class (Reservation.java)

Create a Java Bean class to store the form data entered by the user. Spring MVC automatically binds form values to this bean using its properties and getter/setter methods.

package com.geeksforgeeks;

// Class
public class Reservation {
    // Class data members
    private String firstName;
    private String lastName;
    private String Gender;
    private String[] Food;
    private String cityFrom;
    private String cityTo;

    // Constructor
    public Reservation() {}

    // Getters and Setters
    public String getFirstName() { return firstName; }
    public void setFirstName(String firstName)
    {
        // this keyword refers to current instance itself
        this.firstName = firstName;
    }

    // Getters and Setters
    public String getLastName() { return lastName; }
    public void setLastName(String lastName)
    {
        this.lastName = lastName;
    }

    // Getters and Setters
    public String getGender() { return Gender; }
    public void setGender(String gender)
    {
        Gender = gender;
    }

    // Getters and Setters
    public String[] getFood() { return Food; }
    public void setFood(String[] food) { Food = food; }
    public String getCityFrom() { return cityFrom; }
    public void setCityFrom(String cityFrom)
    {
        this.cityFrom = cityFrom;
    }

    // Getters and Setters
    public String getCityTo() { return cityTo; }
    public void setCityTo(String cityTo)
    {
        this.cityTo = cityTo;
    }
}

Step 4: Create Controller Class (ReservationController.java)

Create a controller to handle user requests, load the reservation form, and process the submitted data. It acts as a bridge between the view layer and the model.

package com.geeksforgeeks;

// Importing required classes
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;

// Annotation
@RequestMapping("/reservation")
@Controller

// Class
public class ReservationController {
    @RequestMapping("/bookingForm")

    // Method
    public String bookingForm(Model model)
    {
        Reservation res = new Reservation();
        model.addAttribute("reservation", res);

        return "reservation-page";
    }

    // Annotation
    @RequestMapping("/submitForm")
    // Method
    public String submitForm(@ModelAttribute("reservation")
                             Reservation res)
    {
        return "confirmation-form";
    }
}

Step 5: Configure web.xml

Register the Spring DispatcherServlet in the web.xml file. It receives incoming requests and forwards them to the appropriate controller methods.

<?xml version="1.0" encoding="UTF-8"?>
<web-app>
  <display-name>SpringMVC</display-name>
   <servlet>  
    <servlet-name>spring</servlet-name>  
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>  
    <load-on-startup>1</load-on-startup>    
</servlet>  
<servlet-mapping>  
    <servlet-name>spring</servlet-name>  
    <url-pattern>/</url-pattern>  
</servlet-mapping>  
</web-app>

Step 6: Configure spring-servlet.xml

Configure component scanning, annotation support, and view resolution. This file tells Spring where to find controllers and JSP pages.

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans/"
    xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" 
    xmlns:context="http://www.springframework.org/schema/context/"
    xmlns:mvc="http://www.springframework.org/schema/mvc/"
    xsi:schemaLocation="
        http://www.springframework.org/schema/beans/
        http://www.springframework.org/schema/beans//spring-beans.xsd
        http://www.springframework.org/schema/context/
        http://www.springframework.org/schema/context//spring-context.xsd
        http://www.springframework.org/schema/mvc/
        http://www.springframework.org/schema/mvc//spring-mvc.xsd">

    <!-- Add support for component scanning -->
    <context:component-scan base-package="com.geeksforgeeks" />
    
    <!--Add support for conversion, formatting and validation -->
    <mvc:annotation-driven/>
     <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/"></property>
        <property name="suffix" value=".jsp"></property>       
     </bean>
</beans>

Step 7: Create Home Page (index.jsp)

Create a simple welcome page that provides a link to open the railway reservation form. This acts as the entry point of the application.

<!DOCTYPE html>
<html>
<head>
    <title>Railway Reservation System</title>
</head>
<body>
<a href="reservation/bookingForm">GFG Railway Reservation System.</a>
</body>
</html>

Step 8: Create Form Page (reservation-page.jsp)

Create the reservation form page to collect user details and listbox selections. Create the confirmation page to display the submitted reservation information after processing.

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<head>
    <title>Reservation Form</title>
</head>
<h3>Railway Reservation Form</h3>
<body>
    <form:form action="submitForm" modelAttribute="reservation">
        First name: <form:input path="firstName" />        
        <br><br>
        Last name: <form:input path="lastName" />
        <br><br>
        Gender: 
        Male<form:radiobutton path="Gender" value="Male"/>
        Female<form:radiobutton path="Gender" value="Female"/>
        <br><br>
        Meals:
        BreakFast<form:checkbox path="Food" value="BreakFast"/>
        Lunch<form:checkbox path="Food" value="Lunch"/>
        Dinner<form:checkbox path="Food" value="Dinner"/>
        <br><br>
        Leaving from: <form:select path="cityFrom">
        <form:option value="Delhi" label="Delhi"/>
        <form:option value="Noida" label="Noida"/>
        <form:option value="Amritsar" label="Amritsar"/>
        </form:select>
        <br><br>
        Going to: <form:select path="cityTo">
        <form:option value="Mumbai" label="Mumbai"/>
        <form:option value="Pune" label="Pune"/>
        <form:option value="Nashik" label="Nashik"/>
        </form:select>
        <br><br>
        <input type="submit" value="Submit" />
    </form:form>
</body>
</html>

Step 9: Create Confirmation Page (confirmation-page.jsp)

Displays the submitted reservation details to the user after form processing. The values are fetched from the Reservation bean using Expression Language (EL).

<%@taglib prefix="c" uri="http://www.oracle.com/technetwork/java/index.html"%>
<!DOCTYPE html>
<html>
<body>

<p>Geeksforgeeks reservation is confirmed successfully.</p>

First Name : ${reservation.firstName} <br>
Last Name : ${reservation.lastName} <br>
Gender: ${reservation.gender}<br>
Meals: 
<ul>
<c:forEach var="meal" items="${reservation.food}">
<li>${meal}</li>
</c:forEach>
</ul>
Leaving From : ${reservation.cityFrom} <br>
Going To : ${reservation.cityTo}
</body>
</html>

Step 10: Run Your Application

• Right-click the project.
• Select Run As → Run on Server.
• Choose Apache Tomcat Server.
• Click Finish.

Output:

After that use the following URL to run your controller:

http://localhost:8080/SpringMVCDropDown

Output:

Click on the link and you will see the following output

Select other Listbox

Once the user cleck on submit button and you can see all the details that are entered by the user have been displayed successfully.

Explanation: When the user opens the reservation form, Spring MVC creates a Reservation object and displays the form page. After the user enters the details and selects values from the list boxes, Spring MVC automatically binds the submitted data to the Reservation bean using @ModelAttribute. The controller then processes the request and displays the entered details on the confirmation page.