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

Question

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

3

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

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。

请问是否有人能够帮助我解决这个问题或提供其他解决方案？

- Hukam

好的，谢谢，现在看到表单了。有点困惑！你的 <input> 类型没有在 div 内部，是在其他地方动态创建的吗？能否详细说明一下如何填充 div 内部的任何 <input> 元素？目前，我对你的过程理解有很大的空白。 - jim tollan

@jimtollan 不，我没有动态加载div。只是在视图中编写了普通的HTML，并绑定到ReCreationSteps属性。我对此没有其他详细信息。由于我还处于开发阶段，正在努力完成这个任务。 - Hukam

@SteenT 我只是试图将原始HTML转换为模型属性，并将值拆分为单个步骤，然后存储在数据库中。 - Hukam

hukmchand - 我可以建议你将你所有的东西都放到问题中。就像我说的，我对你希望如何从div中获取任何输入毫无头绪，因为在JavaScript之外，绑定到div是不会发生的，所以传统的表单提交不会将div视为<input>类型（如果你厌倦了我一直说这个，那就跳过吧 :-)) - jim tollan

@jimtollan 看一下这个[demo]http://html5demos.com/contenteditable/。只需将光标放在第三行的末尾，然后按下回车键，第四步就会自动添加。 - Hukam

显示剩余10条评论

2个回答

0

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

- Anders Arpi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- anAgent · Accepted Answer

从我所看到的，您需要使用 "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>
}

模拟数据

< ol >< li >步骤1 输入文本：< input id="text1" class="hook-text-event" />< li >步骤2 点击按钮：< button id="button2" class="hook-button-event" >我的按钮< li >

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");
    });
});