User groups management

I am trying to implement user management functionality for a web site. I am using ASP.NET MVC 3, Entity Framework 4.1, MvcScaffolding.

Let's consider the entities:

The user entity:

public class User
{
    public int Id
    {
        get;
        set;
    }

    public string FirstName
    {
        get;
        set;
    }

    public string LastName
    {
        get开发者_运维问答;
        set;
    }

    public virtual ICollection<UserGroup> Groups
    {
        get;
        set;
    }
}

The user group entity:

public class UserGroup
{
    public int Id
    {
        get;
        set;
    }

    public string Name
    {
        get;
        set;
    }

    public virtual ICollection<User> Users
    {
        get;
        set;
    }
}

As you see, there is the many-to-many relationship between the user and the user group entities.

So, I would like to have the following UI for editing an user group:

There are two grids: 1. Users grid contains current state of the user group which is being edited. 2. Browse users grid contains all users (except the users which already belong to the user group). When the user row of this grid is clicked, the user will be moved to the users grid. Also, this grid should support paging, filtering and sorting to provide nice user browsing.

So, the user picks users for the user group and then clicks the "Save" button. User group controller class should save the changes.

Now the question: how can the functionality be implemented? Is there any good example for the such many-to-many relationship problem? If there is no simple solution, what UI for the user group management could you advise me to use?

P.S. I am quite novice with ASP.NET, so I don't realize how to implement such dynamic grids.

Update 1: I have looked through the jqGrid examples. link See Advanced -> Multi Select There is the problem, the checkboxes' selection is reset when you change the filter. How to store all selected IDs despite the filter change?

---

Telerik has great grid: http://demos.telerik.com/aspnet-mvc/grid/detailsajax.
I could not understand your whole scenario, especially this: "Browse users grid contains all users (except the users which already belong to the user group). When the user row of this grid is clicked, the user will be moved to the users grid".
I think scenario could be this:
If user is at concrete group, two grids are shown:
a) users existing in group, where each row contains user info and button remove
b) users not existing in group, where each row contains user info and button add

In such case, all logic is quite straightforward, you don't need any fancy logic, as everything is on same page.

In user page, there could be a grid with groups, and if user is in that group, in that row is button remove, and if user is not, there is button add. With well chosen user dto for edit view, that will be also quite straigtforward to implement.