2

次のビューモデルがあり、問題の説明と問題を再現する手順を取得するために使用されます。

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 を取得できません。

誰でもこれについて私を助けてくれるか、他の解決策を提案してください。

4

2 に答える 2

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>
}

モックデータ

< 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");
    });
});
于 2012-07-26T13:13:04.553 に答える
0

ユーザーが複数のステップ (<li>ステップごとに 1 つ) を追加できるようにする場合は、JavaScript を使用してカスタム フォームを定義する必要があります。それはあなたの計画ですか？

于 2012-07-26T11:50:25.023 に答える