EditorFor HTML Helper with knockout答案

【问题标题】：EditorFor HTML Helper with knockoutEditorFor HTML Helper with knockout
【发布时间】：2013-03-13 15:41:29
【问题描述】：

我认为拥有一个扩展版本会非常有用 EditorFor HTML 助手，它自动为 Knockout JS 写出值数据绑定。

这适用于客户端视图模型和服务器端视图模型相同的情况 - 我已经使用 ko 映射自动生成客户端视图模型并通过 AJAX 获取视图模型。

有没有其他人尝试过这样的事情，或者是否有任何项目包含类似于我在这里的想法？

这样做的好处是在重构时不会有丢失数据绑定值的危险。

【问题讨论】：

你知道knockoutmvc.com吗？虽然我听说过关于它的坏消息stackoverflow.com/questions/11618042/…。但是，您可能会从中窃取一些扩展名:)
我去看看谢谢
我在 MVC3 中为此启动了一个类似的项目，但是当我们听说 MVC4 中带有 Knockout 集成的单页应用程序模板时，我们停止了它的工作。不幸的是，这并没有实现，我们再也没有回到这个项目。现在，我相信该功能正在 SP2 中返回（或已经返回）。

标签： asp.net-mvc knockout.js html-helper

【解决方案1】：

想要将 htmlAttributes 重载添加到上面乍得的答案中，以便任何希望将其放入并使其工作的人。所有其他助手都可以很容易地从这些示例中构建出来。（感谢 Chad，您的扩展帮助我轻松过渡到使用淘汰赛！）

using System.Collections.Generic;
using System.Linq.Expressions;
using System.Web.Mvc.Html;

namespace System.Web.Mvc {
    public static class KnockoutExtensions {
        public static MvcHtmlString KnockoutTextBoxFor<TModel, TProperty>( this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression ) {
            var metadata = ModelMetadata.FromLambdaExpression( expression, htmlHelper.ViewData );
            var htmlAttributes = HtmlAttributesForKnockout( metadata );
            return htmlHelper.TextBoxFor( expression, htmlAttributes );
        }

        public static MvcHtmlString KnockoutTextBoxFor<TModel, TProperty>( this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, object attributes ) {
            // convert passed anonymous object (attributes) into IDictionary<string,object> to pass into attribute parser
            var attrs = HtmlHelper.AnonymousObjectToHtmlAttributes( attributes ) as IDictionary<string, object>;
            var metadata = ModelMetadata.FromLambdaExpression( expression, htmlHelper.ViewData );

            var htmlAttributes = HtmlAttributesForKnockout( metadata, attrs );

            return htmlHelper.TextBoxFor( expression, htmlAttributes );
        }

        private static Dictionary<string, object> HtmlAttributesForKnockout( ModelMetadata metadata, IEnumerable<KeyValuePair<string, object>> attributes = null ) {
            var htmlAttributes = new Dictionary<string, object>();

            var knockoutParameter = String.Format( "value: {0}", metadata.PropertyName );
            htmlAttributes.Add( "data-bind", knockoutParameter );

            if ( attributes != null ) foreach ( var attr in attributes ) htmlAttributes.Add( attr.Key, attr.Value );

            return htmlAttributes;
        }
    }
}

【讨论】：

【解决方案2】：

我们已经按照这些思路做了一些事情，但远非完美，而且我们在自定义扩展中还有更多内容，但我提取了精髓。

using System.Web.Mvc.Html;

namespace System.Web.Mvc
{
    public static class EditorForExtensions
    {
        public static MvcHtmlString TextBoxForViewModel<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression)
        {
            ModelMetadata metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);

            var htmlAttributes = HtmlAttributesForKnockout(metadata);

            return htmlHelper.TextBoxFor(expression, htmlAttributes);
        }

       private static Dictionary<string, object> HtmlAttributesForKnockout(ModelMetadata metadata)
        {
            var htmlAttributes = new Dictionary<string, object>();

            var knockoutParameter = String.Format("value: {0}", metadata.PropertyName);

            htmlAttributes.Add("data-bind", knockoutParameter);

            return htmlAttributes;
        }
    }
}

然后可以这样使用：

@Html.TextBoxForViewModel(m => m.Name)

【讨论】：