如何在ASP.NET MVC劍道網格中出現錯誤後保持行編輯模式？

Question

環境：Visual Studio 2012，ASP.NET MVC 4，Kendo UI Complete，Telerik OpenAccess 2013.3.101。

該方案是如下：

1）劍術網格被設置用於「內聯」編輯。

2）網格有一列包含一個發佈日期類型值列表的kendo dropdownlist。

3）在任何行中，下拉列表的值應該是唯一的。有一個名爲DateTypeValidation的模型驗證屬性來檢查所選日期類型是否存在於其他行中。

4）用戶點擊「添加新」按鈕並添加一個新行。該行更改爲「編輯」模式，填寫所有字段並選擇一個datetype值。 5）按'Update'按鈕，DateTypeValidation（）返回false，表示所選日期類型存在於其他行中。

6）服務器端處理髮生錯誤，錯誤處理程序顯示一條消息。

5）現在網格行離開編輯模式，刪除髒指示符並顯示從用戶更改的新值，但通過按鈕「編輯」和「刪除」更改爲顯示模式。

這令用戶感到困惑，因爲沒有線索的當前數據狀態。有沒有辦法如何通過按鈕「更新」和「取消」將網格行重置爲「編輯模式」，並指示網格/行的當前狀態。

Answer 1

我終於得到了這個可行。關鍵是要麼把這個

elemPhoneType.select(0); //Re-set the list as non-selection 

或取消註釋掉這在JS功能OnIndexChangedPhoneTypeList（），但從來沒有啓用這兩個編碼。

//keep the grid in edit-mode 
//var grid = $("#PhonesSubGrid").data("kendoGrid"); 
//grid.one("dataBinding", function (e) { 
// e.preventDefault(); 
//}); 

的視圖：

@using Kendo.Mvc.UI; 
@using Telerik.OpenAccess; 

@model IEnumerable<mdc.Models.ViewModels.ContactPhoneVM> 
@{  
    var actionValidatePhoneType = Url.Action("ValidatePhoneTypeExists", "Locations");  
} 

@(Html.Kendo().Grid(Model) 
    .Name("PhonesSubGrid") 
    .HtmlAttributes(new { style = "text-align:left; max-width: 776px;" }) 
    .Columns(columns => 
    { 
     columns.Bound(p => p.SITE_NUM).Visible(false); 
     columns.Bound(p => p.CONTACT_ID).Visible(false);   
     columns.Bound(p => p.ddlPhoneType.TypeName).EditorTemplateName("PhoneTypeDropDownEditor").Title("Phone Type") 
       .ClientTemplate("#= ddlPhoneType.TypeName #"); 
     columns.Bound(p => p.PHONE_NUMBER).Title("Number"); 
     columns.Bound(p => p.PHONE_EXT).Title("Extension"); 
     columns.Command(c => { c.Edit(); c.Destroy(); });   
    })  
    .Pageable(pager => pager 
     .Input(true) 
     .Numeric(true) 
     .Info(true) 
     .PreviousNext(true) 
     .Refresh(true) 
     .PageSizes(true)) 
    .Sortable() 
    .Scrollable() 
    .Selectable() 
    .Filterable() 
    .ToolBar(t => { t.Create(); })  
    .Events(events => events.Edit("SubGrid_OnRowEditing")) 
    .DataSource(  
     dataSource => dataSource       
     .Ajax() 
     .Batch(false) 
     .ServerOperation(false)    
     .Model(m => 
     { 
      m.Id(p => p.ID); 
      m.Field(p => p.CONTACT_ID).DefaultValue(1); 
      m.Field(p => p.SITE_NUM) 
        .DefaultValue(mdc.LocationContext.LocationID); 
      m.Field(p => p.PHONE_NUMBER).Editable(true); 
      m.Field(p => p.PHONE_EXT).Editable(true); 
      m.Field(p => p.ddlPhoneType).Editable(true) 
        .DefaultValue(new mdc.Models.ViewModels.PhoneTypeListItemModel { TypeID = 0, TypeName = "Select a phone type" }); 
     })   
     .Create(update => update.Action("CreateContactPhoneRecord", "Locations")) 
     .Update(update => update.Action("UpdateContactPhoneRecord", "Locations")) 
     .Destroy(update => update.Action("DeleteContactPhoneRecord", "Locations")) 
    ) 
) 

的下拉列表編輯模板：

@(Html.Kendo().DropDownList() 
    .Name("ddlPhoneType") 
    .HtmlAttributes(new { required = true }) 
    .OptionLabel("Select a phone type")   
    .DataValueField("TypeID") 
    .DataTextField("TypeName") 
    .BindTo((System.Collections.IEnumerable)ViewData["phone_type_list"]) 
    .Events(events => events.Change("OnIndexChangedPhoneTypeList"))  
) 

的客戶端腳本：

<script type="text/javascript"> 
function OnIndexChangedPhoneTypeList() {    
    var elemPhoneType = $("#ddlPhoneType").data("kendoDropDownList"); 

    //var inputVal = document.getElementById("phoneTypeValue"); 
    //inputVal.value = elemPhoneType.options.dataSource[elemPhoneType.selectedIndex - 1].TypeID 


    if (elemPhoneType != null && elemPhoneType.selectedIndex > 0) { 
     var selPhoneTypeId = elemPhoneType.options.dataSource[elemPhoneType.selectedIndex - 1].TypeID; 
     $.ajax({ 
      url: '@actionValidatePhoneType', 
      type: "post", 
      data: { 
       ContactID: selectedContactId, PhoneType: selPhoneTypeId 
      }, 
      dataType: "json", 
      success: function (result) { 
       if (result == 'false' || result == false) 
       { 
        alert('A phone type may only be used once for a contact. Please choose a different phone type.'); 

        elemPhoneType.select(0); //Re-set the list as non-selection 

        //keep the grid in edit-mode 
        //var grid = $("#PhonesSubGrid").data("kendoGrid"); 
        //grid.one("dataBinding", function (e) { 
        // e.preventDefault(); 
        //}); 


        return false; 
       } 
      }, 
      error: function (xhr, status) { 
       alert('Validating phone type failed. Error: ' + xhr.responseText); 
      } 
     }); 
    } 
} 
</script> 

控制器：

public partial class LocationsController : Controller 
{ 
    [AcceptVerbs(HttpVerbs.Post)] 
    public ActionResult CreateContactPhoneRecord([DataSourceRequest] DataSourceRequest request, ContactPhoneVM phone) 
    { 
     bool result = false; 

     if (ModelState.IsValid) 
     { 
      try 
      { 
       result = _contactsRepository.AddPhone(phone.SITE_NUM, phone.CONTACT_ID, phone.PHONE_TYPE, phone.PHONE_NUMBER, phone.PHONE_EXT, ""); 
      } 
      catch (Exception ex) 
      { 
       string msg = ex.Message; 
      } 
     } 
     return Json(new[] { phone }.ToDataSourceResult(request, ModelState)); 
    } 

    [AcceptVerbs(HttpVerbs.Post)] 
    public string ValidatePhoneTypeExists(long ContactID, long PhoneType) 
    { 
     long _siteId = mdc.LocationContextCompile.LocationID; 
     List<long> phonetypeids = new List<long>(); 
     List<ContactPhoneVM> phones = _contactsRepository.GetContactPhones(ContactID, _siteId); 
     foreach (ContactPhoneVM pvm in phones) 
     { 
      phonetypeids.Add(pvm.PHONE_TYPE); 
     } 

     if (phonetypeids.Contains(PhoneType)) 
      return "false"; 
     else 
      return "true"; 
    } 
}