2017-09-07 52 views
0

我从过去几天开始使用网格。一切都非常方便与webgrid像显示列不同的数据类型,如文本框,标签,下拉等,但如何保存数据或更新数据。Webgrid下拉列表保存或更新

我尝试使用操作链接并提交按钮,但没有人为我工作。他们没有获取我的控制器中修改的下拉数据。操作链接能够获取用户标识,但无法获得更改的下拉值。

下面是代码:

查看

 WebGridColumn colLocation = null; 
    foreach (var col in Model) 
    { 
      colLocation = new WebGridColumn() 
       { 
        Header = "Locations", 
        Format = (item) => @Html.DropDownList("LocationId", @col.LocationItems.Select(l => new SelectListItem 
        { 
         Text = l.Text, 
         Value = l.Value, 
         Selected = ((WebGridRow)item)["LocationId"].ToString() == l.Value 
        } 
         ) 
         ) 
       }; 
      colSave = new WebGridColumn() 
      { 
       Header = "Save User", 
       Format = (item) => Html.ActionLink("Save", "Save", "UsersList", new { userId = item.UserId, locationId = item.LocationId }, new { @class = "btn btn-default" }), 
       CanSort = true 
      }; 
    } 
      columns.Add(colLocation); 
      columns.Add(colSave); 
@grid.GetHtml(tableStyle: "webgrid", 
      headerStyle: "header", 
      selectedRowStyle: "select", 
      alternatingRowStyle: "alt", 
      columns: columns 
      ) 

控制器

public ActionResult Save(int userId, int locationId) 
     { 
      var user = Utility.SetUserDetails(userId, locationId); 
      return RedirectToAction("UsersList"); 
     } 

回答

0

一些严格的试验之后,我已经实现了这一功能。这可以使用ajax完成。

我已经延长我的列属性,包括类& id属性

colUser = new WebGridColumn() 
      { 
       Header = "User Id", 
       ColumnName = "UserId", 
       CanSort = true, 
       Format = @<text> 
     <span class="display"><label id="lblUserId">@item.UserId</label></span> 
     <input type="text" id="inUserId" value="@item.UserId" class="edit" style="visibility:hidden" /> 
       </text> 
      }; 
colLocation = new WebGridColumn() 
      { 
       Header = "Locations", 
       Format = @<text> 
     @Html.DropDownList("Location", @col.LocationItems.Select(l => new SelectListItem 
    { 
     Text = l.Text, 
     Value = l.Value, 
     Selected = ((WebGridRow)item)["LocationId"].ToString() == l.Value 
    } 
        ), new { @class = "edit", @id = "inLocation" }) 
       </text> 
      }; 
colSave = new WebGridColumn() 
      { 
       Header = "Save User", 
       Format = @<text> 
     <a href="#" class="edit save-btn btn btn-default">Save</a> 
       </text> 
      }; 

加入jQuery脚本之后,就可以发布选择的值到控制器,

<script type="text/javascript"> 
    $(function() { 
     $('.save-btn').on("click", function() { 
      var tr = $(this).parents('tr:first'); 
      var id = tr.find("#inUserId").val(); 
      var location = tr.find("#inLocation").val(); 
      var User = 
      { 
       "UserId": id, 
       "LocationId": location 
      }; 
      $.ajax({ 
       url: '/UsersList/SaveData/', 
       data: JSON.stringify(User), 
       type: 'POST', 
       contentType: 'application/json; charset=utf-8', 
       success: function (result) { 
        isSuccess = result; 
       }, 
       error: function (result) { 
        isSuccess = result; 
       } 
      })  
     }); 
    }); 
</script> 

在控制器,增加新方法,

public ActionResult SaveData(UserAccountViewModel User) 
     { 
      int userId = User.UserId; 
      int locationId = Convert.ToInt32(User.LocationId); 
      var user = Utility.SetUserDetails(userId, locationId); 
      return RedirectToAction("UsersList"); 
     }