如何在 MVC 3 中将 Div 绑定到模型上的属性答案

【问题标题】：How to bind Div to Property on a model in MVC 3如何在 MVC 3 中将 Div 绑定到模型上的属性
【发布时间】：2012-07-26 11:25:00
【问题描述】：

我有以下视图模型，它将用于获取问题描述和重新创建问题的步骤。

public class IssueViewModel
{
   public string IssueDesc { get; set; }
   public string ReCreationSteps  { get; set; }
}

查看

@using (Html.BeginForm())
{
  @Html.LabelFor(model => model.IssueDescription)   
  @Html.TextAreaFor(m=>m.IssueDescription)
  @Html.LabelFor(model => model.ReCreationSteps )   
     <div class="editable" id="ReCreationSteps " name="ReCreationSteps" contenteditable="true">
        <ol>
          <li></li>
        </ol>
     </div>
  <input value="Create" type="submit" />
}

控制器

[HttpPost]
public ActionResult Create(IssueViewModel model)
{
   string html = model.Recreation;
   //<ol><li>Step:1 Enter the text</li><li>Step:2 Click the button <li></ol>
   Issue newIssue = model.ToIssue(); // here value will be splitted and add steps to table
   _issueRepository.AddIssue(Issue);
}

我想给用户一个简单的控件来输入问题重新创建步骤。所以我最终将 div 元素的 contenteditable 属性设置为 true。

我已将 ReCreationSteps 绑定到 Div 元素，但它不起作用。提交表单后，我无法在 ReCreationSteps 属性中获取 DIV 的值/html。

任何人都可以帮助我或建议我其他解决方案。

【问题讨论】：

HukmChand - 您没有在示例代码中显示您定义表单的位置。你能把它包括进去吗，然后希望它应该更容易解决问题
@jimtollan 我已经更新了示例。
好的，谢谢，现在看表格。有点疑惑！！。您在 div 中没有 <input> 类型，这些是在其他地方动态创建的吗？您能否更详细地说明如何在 div 中填充任何 <input> 元素。就目前而言，我对您的流程的理解存在巨大差距
首先，您没有将 div 绑定到模型，创建一个 div 并在其上放置一个 id 仅适用于客户端。对于要绑定的任何内容，当表单提交回服务器时，该值需要在提交（post 或 get）中。
@jimtollan 不，我没有动态加载 div。只是在 View 本身中编码纯 html 并绑定到 ReCreationSteps 属性。我没有任何其他细节。因为我正处于开发阶段试图完成这项工作。

标签： c# asp.net-mvc-3 html binding

【解决方案1】：

据我所知，您需要使用“AllowHtmlAttribute”来装饰您的模型并创建自定义扩展，以便正确保存您的信息。

更新

如果你想创建一个扩展包装器，你可以这样做：

扩展助手

  public static class CustomExtensions {

    public static IDisposable Step<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression) {
        ModelMetadata metadata = ModelMetadata.FromLambdaExpression(expression, html.ViewData);
        TextWriter writer = html.ViewContext.Writer;
        writer.WriteLine("<div class=\"editable\" id=\"Raw_{0}\" name=\"Raw_{0}\">", metadata.PropertyName);
        var modelValue = metadata.Model == null ? "" : metadata.Model.ToString();
        writer.WriteLine(modelValue);
        writer.WriteLine("<input type=\"hidden\" id=\"{0}\" name=\"{0}\" value=\"{1}\"/>", metadata.PropertyName, html.Encode(modelValue));

        return new CreationSteps(html, metadata);
    }

        private class CreationSteps : IDisposable {

            #region | Properties |
            private readonly TextWriter writer;
            private bool disposed;
            private ModelMetadata _metadata;
            #endregion

            /// <summary>
            /// Initialize a new instance of <see cref="CreationSteps"/>
            /// </summary>
            /// <param name="html"></param>
            /// <param name="metadata"></param>
            public CreationSteps(HtmlHelper html, ModelMetadata metadata) {
                this._metadata = metadata;
                this.writer = html.ViewContext.Writer;
            }

            #region | Public Methods |
            public void Dispose() {
                if (disposed) return;
                disposed = true;
                writer.WriteLine("</div>");
            }
            #endregion

        }
    }

查看

@using (@Html.Step(m => m.HtmlValues)) { 
    <p>Please fill in the above information.</p>
}

模拟数据

Step:1 输入文字：Step:2 点击按钮：我的按钮

JavaScript

$(document).ready(function () {
    $(".hook-text-event").change(function () {
        console.log(this.id + " has been changed");
    });
    $(".hook-button-event").click(function () {
        console.log(this.id + " has been clicked");
    });
});

【讨论】：

这段代码不走运。因为@Html.Raw helpher 不会创建任何元素。[AllowHtml] 将帮助我在没有任何安全威胁异常的情况下使 html 断开。
我认为可能是这样。我正在开发一个可能是您想要的扩展助手 - 尽快更新（我希望）。另外，输入标签代码是什么样的？你没有看到它包括在内。谢谢！
在不使用 ajax 的情况下，我找不到任何合适的输入标签来发布我的原始 html。我只是尝试使用 div，但没有奏效。所以我来这里寻找合适的输入标签。
慢慢梳理这个问题:)
@anAgent 非常感谢。将尽快检查并接受您的回答。

【解决方案2】：

如果您希望用户能够添加多个步骤（每个步骤一个 <li>），那么您需要使用 JavaScript 来定义自定义表单。这是你的计划吗？

【讨论】：