Mapping a HTML button to call a method in a controller class in Spring MVC

Question

I am having some difficulties in calling a method when a button is clicked.

In my Index.JSP

I have the following section of HTML code

 <div class="hero-copy">
                    <h1 class="hero-title mt-0">Deep Algorithm by Sadman Sakib</h1>
                    <p class="hero-paragraph">A personal portfolio/demonstration of all university and extra-curricular activites, beautifully packaged, in a modern and responsive Spring MVC Web Application</p>
                    <div class="hero-cta">
                        <a class="button button-primary" onclick="">View Projects</a>
                        <div class="lights-toggle">
                            <input id="lights-toggle" type="checkbox" name="lights-toggle" class="switch" checked="checked"  >
                            <label for="lights-toggle" class="text-xs"><span>Turn me <span class="label-text">dark</span></span></label>
                        </div>
                    </div>
                </div>

Now "View Projects" is a button which will print "Hello" out in the console, I am not sure what I should be using to call the method in my controller. At the moment I am using onClick but am not sure what I should put as a parameter.

This is my controller class

    @Controller
public class HelloController {

    @RequestMapping("/projects")
    public void add()
    {
        System.out.println("Hello");
    }

}

This is my view, user will click view projects and it will print hello out in the console, how would I go about doing this?

EDIT

When I use a form it works, however when using href it does not link to my controller.

<form action="add">
                    <input type="submit"  class="button button-primary" value="Me">
                </form>

             
                <span>View GitHub</span>
                <a href="${pageContext.request.contextPath}add"><h3>View GitHub</h3></a>

How can I use href to link back to my controller. Do I need to import some dependencies/taglines

Answer 1

First you must understand what the controller is doing. The controller is mapping the request which have the path /projects , so usually, the url will be something like http://localhost:8080/projects if your app is running on port 8080. Upon calling '/projects' from your browser, the method add() will be executed.

The easiest way to trigger the method add() in the controller is using href in the link.

The code will be as follows:

<a class="button button-primary" href="${pageContext.servletContext.contextPath}/projects">View Projects</a>

If you really want to use the onclick method, then you must create a javascript function and call the url which is mapping to /projects

Update 28/06/20

The code will not work because the method being invoked is returning void. Add @ResponseStatus(value = HttpStatus.OK) on the method then it should work just fine.

@Controller
public class HelloController {

    @RequestMapping("/projects")
    @ResponseStatus(value = HttpStatus.OK)
    public void add()
    {
        System.out.println("Hello");
    }

}

Answer 2

So basically I managed to fix it, I should call my controller using href like this

href="<c:url value="/projects"/>

Cheers to everyone who helped