[英]Kendo Grid MVC combine ajax binding and server editing
有沒有辦法結合ajax綁定和服務器編輯?
我希望當前的操作,如閱讀,分頁,排序和刪除,由ajax請求和服務器編輯創建和更新完成,因為我有一個需要使用整頁的復雜表單。
我嘗試在自定義列中插入操作鏈接,但它說我不能在ajax綁定上使用服務器編輯。
是的,通過使用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 View中我有:
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");
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.