3

ajaxバインディングとサーバー編集を組み合わせる方法はありますか？

読み取り、ページング、並べ替え、削除などの現在のアクションをajaxリクエストで実行し、サーバー編集で作成と更新を実行する必要があります。これは、ページ全体を使用する必要がある複雑なフォームがあるためです。

カスタム列にアクションリンクを挿入してみましたが、ajaxバインディングでサーバー編集を使用できないと表示されます。

4

1 に答える 1

9

確かに、これは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 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();
        }

グリッドの上部に 1 つのリンクのみが必要な場合は、これを行うだけです。

.ToolBar(toolbar =>
        {
            toolbar.Custom().Action("Create", "SomeController").Text("<span class=\"k-icon k-i-plus\"></span> Create"); 
        })
于 2012-11-30T10:39:05.613 に答える