Spring MVC how to handle binding when editing objects

Question

I'm kind of newbie with Spring MVC - I have seen tons of tutorials so far, but just started developing. I've just come across this problem:

SUMMARY: I have a form with a table containing lots of users loaded from DB and backed in the spring model. I want to have an edit button for each user, and I want to bring up another form in order to edit that user, and still having that user backed in the model so I don't have to disclose id's or map users to random keys.

I have a List<User> object that I retrive from database through a @Service bean, and then I pass this list to my UserController bean. Then, in my controller:

@RequestMapping(value="/users", method = RequestMethod.GET)
public ModelAndView showUsers() {       
    List<User> users = userService.getUserList(); //Get from DB. Returns some users.
    UserSet uset = new UserSet(); //Custom object backing the list.
    uset.setUserList(users);

    return new ModelAndView("users", "userset", uset);
}

This returns the view users.jsp and displays the user list in a table using a form:

<form:form action="#" method="post" modelAttribute="userset">
    <table>
        <tr>
            <th>N.</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
        <c:forEach var="user" items="${userset.userList}"
            varStatus="status">
            <tr>
                <td align="center">${status.count}</td>
                <td><input name="userList[${status.index}].name"
                    value="${user.name}" id="name_${status.index}" /></td>
                <td><input name="userList[${status.index}].email"
                    value="${user.email}" id="email_${status.index}" /></td>
                <td><input type="button" value="Ed." id="edbtn${status.index}"
                    class="edbtn" /></td>
            </tr>
        </c:forEach>
    </table>
    <input type="submit" value="Save" />
</form:form>

Now, you can see there's an edit button <input type="button" value="Ed." id="edbtn${status.index}" class="edbtn" /> for each user. What I want to do is to make a new single-user form appear when I click on that button, and have my User object binded to it, so that if I change the name and the email, I can still get the ID on the server side in order to update it in the database. The multi-user form above should have all the fields disabled or shown as labels - I don't want to change things there; I just want to show them there and have the button to open a popup or floating div with the actual single-user form inside.

By the way, I'm trying to capture the edited user with the following controller:

@RequestMapping(value="users/edit", method = RequestMethod.POST)
public String edit(@ModelAttribute(value="user") User user, BindingResult bresult) {
    /* Do something here with the user */
    /* Currently the ID returned from user.getId() is null, but the original user shown in the form has an ID != null */
    return "redirect:/users";
}

And I'm sending the edit request through jQuery:

jq("#edituserbtn").click(function() {
        jq.post("users/edit", {
            name : jq("#edfrm_n").val(),
            email : jq("#edfrm_e").val(),
        }, function(data, status) {
            //jq("#changing").text(data + "; " + status);
        });
    });

Note that #edfrm_n and #edfrm_e would be the id's of that single-user form I want to use here, instead of sending back the whole form. Using jQuery I'd also popup this single-user form and place it in front of everything, in the middle of the screen.

How can this be accomplished?

P.S.: This may not be the best approach for the editing feature. In such case, I'd really appreciate that you provided me with some hints.

Thanks

Answer 1

I think you should do some change about the existed code. You should set user id as user edit button value, you can write a js function which arguments are user id, user name and status. bind it to the buttons. when you click the edit button that it will run the js function and pop-up a new dialog in this dialog that you can get the three arguments and show them. The dialog I recommend you using jQuery dialog, since you have added the jQuery library. And you should add save button in this dialog and after edit the user data, just click the save button and call ajax to send the data to server, because it has id, so you know which one that will be updated. and the server will return the status of updating operation, in the ajax callback function, you do the other thing with the status. if success, close dialog and refresh main window, if failed, pop-up the alert dialog.

Answer 2

Well, I thought Spring was doing some magic I now think it is not doing. As zeroflagl said, Spring needs to know what you are trying to update, so some sort of ID, or the actual DB ID, must be provided.