jqGrid列與模擬Html.DropDownListFor選擇列表

Question

我試圖使用jqGrid的相當複雜的用戶界面。網格最終需要有一個下拉列，一個自動完成和一個按鈕列。目前，我無法確定如何設置一個包含select列的列，該列在我的模型中填充IEnumerable的值，設置來自模型屬性的初始選定值，並在用戶更改時更改該屬性列表的值爲select。例如，說我有這些模型：

public class GridRowModel 
{ 
    public int GridRowModelId { get; set; } 
    public string SomeText { get; set; } 
    public int SomeSelectOptionId { get; set; } 
} 

public class SelectOption 
{ 
    public int SomeSelectOptionId { get; set; } 
    public string Description { get; set; } 
} 

public class SomeModel { 
    public int SomeModelId { get; set; } 
    public IEnumerable<GridRowModel> GridRowModels { get; set; } 
    public IEnumerable<SelectOption> AllSelectOptions { get; set; } 
} 

的SomeModel的AllSelectOptions屬性被設置在控制器，與模型其他事情一樣。控制器還有一個方法GetSomeModelGridRows，返回jqGrid rows的GridRowModel對象數組。然後，我有剃刀，看起來是這樣的：

@model SomeModel 
<table id="someModelGridRows" cellpadding="0" cellspacing="0"></table> 
<div id="pager" style="text-align: center;"></div> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#someModelGridRows").jqGrid({ 
      url: '@Url.Action("GetSomeModelGridRows")', 
      datatype: 'json', 
      mtype: 'POST', 
      colNames: ['GridRowModelId', 'Text', 'Select Option'], 
      colModel: [ 
       { name: 'GridRowModelId', index: 'GridRowModelId', hidden: true }, 
       { name: 'SomeText', index: 'SomeText' }, 
       { name: 'SomeSelectOptionId', index: 'SomeSelectOptionId', edittype: 'select', 

**?? is this where I would do something and if so, what ??** 

      ], 
      //the rest of the grid stuff 
     }); 
    }); 
</script> 

在非電網的情況下，這將使用Html.DropDownListFor幫手簡單。有什麼方法可以在此使用？我是否會以這種錯誤的方式去做這件事，甚至有可能嗎？

Answer 1

我想我想通了使用TPeczek的Lib.Web.Mvc and his very helpful sample project。 Lib.Web.Mvc在Nuget上可用，並擅長封裝將JSON從控制器返回到網格所需的數據格式。對於任何人誰在未來有這個問題....

控制器：

[AcceptVerbs(HttpVerbs.Post)] 
public ActionResult GetClientContactsAndProviders(JqGridRequest request) 
{ 
    var clientId = CookieHelper.GetClientIdCookieValue(); 
    var contacts = _clientRepo.GetContactsForClient(clientId).ToList(); 
    //I do not want paging, hence TotalPagesCount = 1. 
    //PageIndex increments automatically in JqGridResponse, so start at 0. 
    var response = new JqGridResponse 
         { 
          TotalPagesCount = 1, 
          PageIndex = 0, 
          TotalRecordsCount = contacts.Count 
         }; 
    foreach(var contact in contacts) 
    { 
     response.Records.Add(new JqGridRecord(contact.Id.ToString(), 
               new List<object> 
                { 
                 contact.Id, 
                 contact.ClientId, 
                 contact.ClientContactId, 
                 contact.ContactId, 
                 contact.ContactTypeId, 
                 contact.Description, 
                 contact.ContactName, 
                 contact.ContactPhone, 
                 string.Empty, 
                 contact.ContactComments 
                })); 
    } 
    return new JqGridJsonResult {Data = response}; 
} 

然後，在下拉列表中填充的局部視圖的Dictionary<int, string>模型：

@model Dictionary<int, string> 
<select> 
    <option value=""></option> 
    @foreach(KeyValuePair<int, string> value in Model) 
    { 
     <option value="@value.Key.ToString()">@value.Value</option> 
    } 
</select> 

寫一個Action返回在部分的詞典：

public ActionResult ContactTypes() 
{ 
    var contactTypes = new Dictionary<int, string>(); 
    var allTypes = _cacheService.Get("contacttypes", _contactRepo.GetAllContactTypes); 
    allTypes.ToList().ForEach(t => contactTypes.Add(t.ContactTypeId, t.Description)); 
    return PartialView("_SelectList", contactTypes); 
} 

最後，電網本身（剃刀），與下拉列表中Type列定義：

$(document).ready(function() { 
    $("#clientContacts").jqGrid({ 
     url: '@Url.Action("GetClientContactsAndProviders")', 
     datatype: 'json', 
     mtype: 'POST', 
     cellEdit: true, 
     cellsubmit: 'clientArray', 
     scroll: true, 
     colNames: ['Id', 'ClientId', 'ClientContactId', 'ContactId', 'HiddenContactTypeId', 'Type', 'Who', 'Phone', '', 'Comments'], 
     colModel: [ 
      { name: 'Id', index: 'Id', hidden: true }, 
      { name: 'ClientId', index: 'ClientId', hidden: true }, 
      { name: 'ClientContactId', index: 'ClientContactId', hidden: true }, 
      { name: 'ContactId', index: 'ContactId', hidden: true }, 
      { name: 'HiddenContactTypeId', index: 'HiddenContactTypeId', hidden: true }, 
      { 
       name: 'Type', 
       index: 'ContactTypeId', 
       align: 'left', 
       width: 180, 
       editable: true, 
       edittype: 'select', 
       editoptions: { 
        dataUrl: '@Url.Action("ContactTypes")', 
        dataEvents: [ 
         { 
          type: 'change', 
          fn: function (e) { 
           var idSplit = $(this).attr('id').split("_"); 
           $("#clientContacts").jqGrid('setCell', idSplit[0], 'HiddenContactTypeId', $(this).attr('value'), '', ''); 
          } 
         } 
        ] 
       }, 
       editrules: { required: true } 
      }, 
      { name: 'Who', index: 'ContactName', width: 200, align: 'left', editable: true, edittype: 'text' }, 
      { name: 'Phone', index: 'ContactPhone', width: 100, align: 'left', editable: false }, 
      { name: 'Button', index: 'Button', width: 50, align: 'center' }, 
      { name: 'Comments', index: 'ContactComments', width: 240, align: 'left', editable: true, edittype: 'text' } 
     ], 
     pager: $("#pager"), 
     rowNum: 20, 
     sortname: 'Id', 
     sortorder: 'asc', 
     viewrecords: true, 
     height: '100%' 
    }).navGrid('#pager', { edit: false, add: true, del: false, search: false, refresh: false, addtext: 'Add Contact/Provider' }); 
}); 

希望這有助於再次在未來的某個人，並感謝@TPeczek。