首页 > 解决方案 > Ajax:获取 DropdownList 的 ID 值

问题描述

对于一个项目,我必须能够将用户分配给一个组,这必须在 ASP MVC 中使用 ajax 完成。

所以我有一个显示用户的数据表,在上面,我有一个 DropdownList,其中包含可能的不同组(您将在下面找到屏幕截图)。当用户单击 DropdownList 中的组时,数据表会显示该组中的所有用户。

这很好用。

我的问题在这里:每个用户都有一个“设计”按钮,它允许反汇编该组的用户。我的问题是获取链接到此 DropdownList 的组名的组的 ID(它显示组的名称),然后将其作为参数传递并在我的 API 的 POST 中发送。

我被卡住了,不知道如何恢复这个值,你有什么想法吗?我是ajax的新手。

下拉列表:

             @*Dropdownlist Group*@
         $('#GroupDropDown').change(function () {
             var table = $('#UsersDatatables').DataTable();
             table.destroy();
             var id = $('#GroupDropDown').val();

             // Permet que quand le user cliquer sur Display All, cela affiche la table complète
             var SelectValue = $('#GroupDropDown option:selected').text();

             if (SelectValue == "   Display All  ")
                 GetDatatable();
             else {
                 $('#UsersDatatables').DataTable({
                     processing: true,
                     ajax: {
                         url: "/User/GetUsersinGroup/" + id,
                         type: "GET",
                         datatype: "json",
                         data: { idGroup: id },
                         error: function (error) {
                             toastr.error("No users found.");
                         }

                     },
                     columns: [
                         { data: "USE_FirstName" },
                         { data: "USE_LastName" },
                         { data: "USE_Gender" },
                         { data: "Country" },
                         { data: "USE_PhoneNumber" },
                         { data: "USE_EmailAddress" },
                         {
                             data: "USE_Id", "render": function (data) {
                                     return '<a class="btn btn-primary btn-sm edit" id="' + data + '">Edit</a> <a class="btn btn-warning btn-sm deasign" id="' + data + '">Deassign</a>';
                             },
                             orderable: false,
                             width: "150px"
                         },
                     ],
                 })
             }
         })

取消分配组的功能

         function PostDeAssignGroup() {
         $('#UsersDatatables').on('click', '.deasign', function (e) {

             idGroup = $("GroupDown").val().DropDownListOnChange.

             $.ajax({
                 type: "POST",
                 datatype: "json",
                 url: "http://localhost/api/User/DeAssignGroup/" + UserName + idGroup + id,
                 success: function (data) {
                     if (data === "success") {
                         UsersDatatables.destroy();
                         toastr.success("The user has been successfully removed from the group.");
                     }
                 },
                 error: function (error) {
                     toastr.error("The user could not be deleted from the group.");
                 }

             })
         })
     }

我的控制器方法:

        [HttpPost]
    [Route("DeAssignGroup/{UserName}/{idGroup}/{id}")]
    public IHttpActionResult DeAssignGroup(string UserName , int idGroup, int id)
    {

        var Grpe = contexteEF.Group.Where(x => x.GRO_Id == idGroup).FirstOrDefault();
        if (Grpe == null)
            return StatusCode(HttpStatusCode.NotFound);

        try
        {

                var Use = contexteEF.User.Where(x => x.USE_Id == id).FirstOrDefault();
                if (Use == null)
                    return StatusCode(HttpStatusCode.NotFound);

                User_Group ug = contexteEF.User_Group.SingleOrDefault(x => x.UGR_GRO_Id == idGroup && x.UGR_USE_Id == id);

                contexteEF.User_Group.Remove(ug);

            contexteEF.SaveChanges();

            return StatusCode(HttpStatusCode.OK);
        }
        catch (Exception)
        {
            return StatusCode(HttpStatusCode.BadRequest);
        }
    }

我也留个网页截图

提前谢谢各位!

标签: jqueryajaxasp.net-mvcasp.net-ajax

解决方案


推荐阅读