如何使用asp.net mvc和jquery实现带有“添加/删除”按钮的列表框

时间:2012-12-21 10:57:13

标签: asp.net asp.net-mvc asp.net-mvc-3 razor

目前,我有以下局部视图,其中列出了所有可用用户以及每个用户旁边的“添加用户到班级”链接,以便在班级中注册用户: -

@model IEnumerable<Elearning.Models.User>
<tr>
    <th>
        Student ID
    </th>
</tr>

@foreach (var item in Model) {
    <tr >
        <td>
            @Html.DisplayFor(modelItem => item.UserID)
        </td>
        <td id = "userclass">
              @Ajax.ActionLink("Add User to Class", "Register", "User", new { id = item.UserID, classid = ViewBag.id },
                  new AjaxOptions { 
                      InsertionMode = InsertionMode.InsertAfter,
                      HttpMethod = "POST",
                      UpdateTargetId = "incrementadd"
               })
         </td>
    </tr>
}

单击“将用户添加到类”链接时将调用的操作方法是: -

[AcceptVerbs(HttpVerbs.Post)]
public PartialViewResult Register(string id, int classid)
{
    try
    {
       //Update code here
       User user = r.FindUser(id);
       Users_Classes uc = new Users_Classes();
       uc.AddedDate = DateTime.Now;
       uc.ClassID = classid;
       user.Users_Classes.Add(uc);
       r.Save();
       ViewBag.classid = classid;
       return PartialView("_usersearch2", uc);
    }
}

上面的代码工作正常,但我发现通过点击链接添加每个用户并不容易。 所以我试图添加一个带有添加/删除按钮的列表框,根据用户选择注册和取消注册用户,但我无法弄清楚如何使用Jquery来修改我的代码以使用“添加/删除”按钮实现列表框让我的系统更加用户友好。 任何人都可以推荐我帮助材料或示例代码,这些代码可以帮助我进行开发吗? 最诚挚的问候

1 个答案:

答案 0 :(得分:1)

对于简单的多选,我正在使用这个jquery插件:

http://harvesthq.github.com/chosen/

然后在您的视图中,只需在表单中添加以下内容:

@Html.ListBoxFor(model => model.YourCollectionProperty, MyRepository.FetchPropertySelectList().ToList())

非常简单易用。

如果您需要更多帮助或建议如何实施,请告诉我。