Kendo Grid MVC結合了ajax綁定和服務器編輯

Question

有沒有一種方法來結合ajax綁定和服務器編輯？

我希望當前的操作，如閱讀，分頁，排序和刪除，由ajax請求和服務器編輯創建和更新完成，因爲我有一個複雜的形式，需要使用整個頁面。

我試圖通過在自定義列中插入動作鏈接，但它說我不能在ajax綁定上使用服務器編輯。

Answer 1

是的，這可以通過使用template()並使用Kendo客戶端模板來實現。

客戶端模板基本上是在運行時在客戶端上執行的JavaScript，因此我們可以傳入Kendo UI知道的變量，這些將是模型屬性名稱。

所以，如果你想有一個鏈接，可能鏈接到一個詳細信息頁面，例如，你將每行旁邊：

#=...# - Evaluates the JavaScript code expression or a string property from the data item and outputs the result in the template. 
#...# - Evaluates the JavaScript code expression inside, but doesn't output value. 
#:...# - Evaluates the JavaScript code expression or a string property from the data item and outputs the result in the template which is HTML encoeded. 

最簡單的解決方案/例如添加新列，像這樣：

columns.Template(x => null).ClientTemplate(Html.ActionLink("DisplayText", "Edit", new { Id = "id" }).ToHtmlString().Replace("id", "#=ClientPayeeCodeId#")); 

我創建了一個HTML輔助來幫助我實現這個，所以我可以自定義的HTML，集中實施等：

在Razor視圖我有：

columns.Template(x => null).ClientTemplate(Html.KendoActionLink("Foo", "Bar", "This is a Test", "Name",htmlAttributes: null, routeValues: new Dictionary<string, string>() { { "someParameter", "someValue" }, { "someParameter2", "someValue2" } })); 

和我的擴展方法：

 /// <summary> 
     /// This should be used in the Kendo UI ClientTemplate() Calls to generate MVC ActionLinks in a Kendo UI Grid 
     /// </summary> 
     /// <example> 
     /// Usage: 
     /// <code> 
     /// columns.Template(x => x.Foo).ClientTemplate(Html.KendoActionLink("Index", "Home", "View Foo","Foo")); 
     /// </code> 
     /// </example> 
     /// <param name="action">"The Action Name of a Controller you wish to call"</param> 
     /// <param name="controller">The Controller Name of a Controller you wish to call</param> 
     /// <param name="linkText">Text to display to the user</param> 
     /// <param name="propertyName">The property name that acts as the ID for the MVC Action</param> 
     /// <param name="htmlAttributes">Additonal Html attribute to add to the anchor tag</param> 
     /// <returns>A Relative Url string to the Action you wish to Call</returns> 
     public static string KendoActionLink(this HtmlHelper helper, string action, string controller, string linkText, string propertyName, IDictionary<string, string> htmlAttributes, IDictionary<string,string> routeValues) 
     { 
      //TODO: Support for MVC RouteLink (KendoRoutLink Method) and nested grids (I think) will need to use \\#= # 

      TagBuilder tag = new TagBuilder("a"); 

      string kendoUrl; 

      //Kendo UI uses #=variableName# to escape from from text/html to JavaScript 
      if (!string.IsNullOrEmpty(propertyName)) 
      { 
       kendoUrl = string.Format("~/{0}/{1}/#={2}#", controller, action, propertyName); 
      } 
      else 
      { 
       kendoUrl = string.Format("~/{0}/{1}", controller, action); 
      } 

      if (routeValues != null) // Adding the route values as query string, only kendo values for now 
       kendoUrl = kendoUrl + "?" + String.Join("&", routeValues.Select(kvp => String.Format("{0}=#={1}#", HttpUtility.UrlEncode(kvp.Key), HttpUtility.UrlEncode(kvp.Value))).ToArray()); 

      string kendoIcon = "<span class=\"k-icon k-i-restore\"></span>"; 

      tag.Attributes["href"] = UrlHelper.GenerateContentUrl(kendoUrl, helper.ViewContext.HttpContext); 

      tag.SetInnerText(kendoIcon + linkText); 

      if (htmlAttributes != null) 
      { 
       foreach (KeyValuePair<string, string> attribute in htmlAttributes) 
       { 
        tag.Attributes[attribute.Key] = attribute.Value; 
       } 
      } 

      tag.AddCssClass("k-button k-button-icontext"); 

      return tag.ToString(); 
     } 

如果你想在網格頂部只有一個鏈接，只是這樣做。

.ToolBar(toolbar => 
     { 
      toolbar.Custom().Action("Create", "SomeController").Text("<span class=\"k-icon k-i-plus\"></span> Create"); 
     })