如何创建自定义 html 帮助程序以将图标添加到输入 kendo 组合框

Question

如何使用这个解决：

public static IHtmlContent CpaKendoComboBoxFor<TModel, TProperty>(this IHtmlHelper<TModel> htmlHelper,
      Expression<Func<TModel,TProperty>> expression, string inputId, object htmlAttributes = null)
    {
        var propertyId = string.Join("_", expression.Body.ToString().Split('.').Skip(1));
        
        StringBuilder result = new StringBuilder();
        
          result.Append( htmlHelper.Kendo().TextBoxFor(expression).HtmlAttributes(htmlAttributes).ToHtmlString());//error null reference
       

        var spanEditBtn = new TagBuilder("span");
        spanEditBtn .MergeAttribute("name", TagBuilder.CreateSanitizedId("btnEdit" + propertyId, ""));
        spanEditBtn .GenerateId("btnEdit" + propertyId , "");
        spanEditBtn .AddCssClass("k-icon k-edit-value k-i-edit");
        spanEditBtn .MergeAttribute("style", "padding-left: 40px;display: flex;");
        spanEditBtn .MergeAttribute("role", "button");
        spanEditBtn .MergeAttribute("unselectable", "on");
       // spanEditBtn .MergeAttribute("onclick", "editTextBoxKendo('" + propertyId + 2  + "')");
        //spanEditBtn .InnerHtml.AppendHtml(spanClearIcon);

        //spanWidget.InnerHtml.AppendHtml(spanEditBtn );
        result.Append(spanEditBtn .ToHtmlString());

       // var str = String.Format(combobox.ToString()+ spanEditBtn .ToString());
        


        return htmlHelper.Raw(result.ToString());
    }

当使用@Html.CpaKendoComboBoxFor(model => model.id, nameof(Model.id) + ViewData["FG"])

显示错误空引用。

Answer 1

通过用 TDynamic 替换 TModel 解决了错误：

     public static IHtmlContent CpaKendoComboBoxFor<TDynamic, TProperty>(this IHtmlHelper<TDynamic> htmlHelper,
      Expression<Func<TDynamic, TProperty>> expression, string inputId, object htmlAttributes = null)
    {
        
        
        StringBuilder result = new StringBuilder();
        var spanWidget = new TagBuilder("span");
        //spanWidget.AddCssClass("k-widget ");


        var propertyId = string.Join("_", expression.Body.ToString().Split('.').Skip(1));
        var spanEditBtn = new TagBuilder("span");
        spanEditBtn.MergeAttribute("name", TagBuilder.CreateSanitizedId("btnClear" + propertyId, ""));
        spanEditBtn.GenerateId("btnClear" + propertyId , "");
        spanEditBtn.AddCssClass("k-clear-value");
        spanEditBtn.MergeAttribute("style", "padding-left: 40px;display: flex;");
        spanEditBtn.MergeAttribute("role", "button");
        spanEditBtn.MergeAttribute("unselectable", "on");
        // spanClearBtn.MergeAttribute("onclick", "clearTextBoxKendo('" + propertyId + 2  + "')");
        //spanClearBtn.InnerHtml.AppendHtml(spanClearIcon);
        var spanEditBtn2 = new TagBuilder("span");
        spanEditBtn2.AddCssClass("k-icon k-i-edit");
        spanEditBtn.InnerHtml.AppendHtml(spanEditBtn2);
        // result.Append(spanClearBtn.ToHtmlString());
        // htmlHelper.Kendo().ComboBoxFor(expression).

        spanWidget.InnerHtml.AppendHtml(spanEditBtn.ToHtmlString());
        // result.Append(htmlHelper.Kendo().ComboBoxFor(expression).ToHtmlString());//error null reference
        // var str = String.Format(combobox.ToString()+ spanClearBtn.ToString());
        spanWidget.InnerHtml.AppendHtml(htmlHelper.Kendo().ComboBoxFor(expression).ToHtmlString());

        return new HtmlString(spanWidget.ToHtmlString());
        //return htmlHelper.Raw(result.ToString());
    }

但是如何将标签添加到内部 html htmlHelper.Kendo().ComboBoxFor(expression)

Answer 2

为“使用自定义 html 帮助程序向输入 kendo 组合框添加图标”添加新答案

 public static IHtmlContent CpaKendoCombobox(this IHtmlHelper htmlHelper,Kendo.Mvc.UI.Fluent.ComboBoxBuilder comboBox,
        string inputName, string formGuid, string pathForVchEdit,string vchName)

    {

        StringBuilder result = new StringBuilder();

        var spanWidget = new TagBuilder("span");
        spanWidget.AddCssClass("k-mainEditComboBoxItem");
        
        //var propertyId = string.Join("_", expression.Body.ToString().Split('.').Skip(1));
        var spanEditBtn = new TagBuilder("span");
        spanEditBtn.MergeAttribute("name", TagBuilder.CreateSanitizedId("btnClear" + inputName, ""));
        spanEditBtn.GenerateId("btnClear" + inputName+ formGuid, "");
        spanEditBtn.AddCssClass("k-editComboBoxItem");
        spanEditBtn.MergeAttribute("style", "display:none;padding-top:1px;margin-right:-55px;padding-right: 1px;cursor: pointer;font-size:1.3em ");
        spanEditBtn.MergeAttribute("role", "button");
        spanEditBtn.MergeAttribute("unselectable", "on");
        spanEditBtn.MergeAttribute("onclick", "editSelectedItemKendoComboBox('" + inputName + formGuid + "')");
        
        var spanEditBtn2 = new TagBuilder("span");
        spanEditBtn2.AddCssClass("k-icon k-i-track-changes-enable");
        spanEditBtn2.MergeAttribute("style", "font-size:1.3em ");
        spanEditBtn.InnerHtml.AppendHtml(spanEditBtn2);

        string script = @"<script>$(function() {" + "\n" +
                        "var input = $('.k-mainEditComboBoxItem'),div = $('.k-editComboBoxItem'); " + "\n" +
                        "input.mouseover(function() {if(!isNullOrEmpty($('#'+'" + inputName + formGuid + "').data('kendoComboBox').value())) div.show(); }); " + "\n" +
                        "input.mouseout(function() { div.hide(); }); " + "\n" +
                        "}); " +
                        "function editSelectedItemKendoComboBox(comboBoxId){ " + "\n" +
                        "let valueId=$('#'+comboBoxId+'').data('kendoComboBox').value();" +
            "cpaContentPageLoadingWithParam('" + pathForVchEdit + "', { Id: valueId }, 'Test " + vchName+"', '', 'k-icon k-i-edit');} " + "\n" +
            
                        "</script> ";

        StringBuilder callendarScript = new StringBuilder();
        callendarScript.AppendLine(script);

        spanWidget.InnerHtml.AppendLine(new HtmlString(callendarScript.ToString()));



        spanWidget.InnerHtml.AppendHtml(comboBox.ToHtmlString());
        spanWidget.InnerHtml.AppendHtml(spanEditBtn);

        result.Append(spanWidget.ToHtmlString());


        return htmlHelper.Raw(result.ToString());
    }

如何创建自定义 html 帮助程序以将图标添加到输入 kendo 组合框

how to create custom html helper for add icon to input kendo combobox

c#

asp.net-core

kendo-asp.net-core