Kendo Grid MVC 结合了 ajax 绑定和服务器编辑
Posted
技术标签:
【中文标题】Kendo Grid MVC 结合了 ajax 绑定和服务器编辑【英文标题】:Kendo Grid MVC combine ajax binding and server editing 【发布时间】:2012-11-18 11:40:12 【问题描述】:有没有办法将 ajax 绑定和服务器编辑结合起来?
我希望当前的操作,例如读取、分页、排序和删除,通过 ajax 请求和通过服务器编辑创建和更新来完成,因为我有一个需要使用整页的复杂表单。
我尝试在自定义列中插入操作链接,但它说我不能在 ajax 绑定上使用服务器编辑。
【问题讨论】:
【参考方案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 Helper 来帮助我实现这一点,这样我就可以自定义 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");
)
【讨论】:
以上是关于Kendo Grid MVC 结合了 ajax 绑定和服务器编辑的主要内容,如果未能解决你的问题,请参考以下文章
Kendo UI 将 DropDownList 添加到 Grid (MVC)
设置 Kendo UI Grid Popup (MVC) 的宽度