How to bind Div to Property on a model in MVC 3

Question

I have a following view model and it will be used to get Issue Description and Steps to recreate issue.

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

View

@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" />
}

Controller

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

I would like to give an user a simple control to enter issue recreation steps.So I end up with the contenteditable attribute set to true for div element.

I have binded ReCreationSteps to Div element,but its not working.I can't get the value/html of DIV in ReCreationSteps property once the form is submitted.

Anyone help me on this or suggest me some other solution.

Answer 1

From what I see you will need to decorate your model with the "AllowHtmlAttribute" and create a custom extension so you information is saved correctly.

UPDATE

If you want to create a extension wrapper, you could do something like this:

Extension Helper

  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

        }
    }

View

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

Mock Data

< ol >< li >Step:1 Enter the text: < input id="text1" class="hook-text-event" />< li >Step:2 Click the button: < button id="button2" class="hook-button-event" >My Button< 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");
    });
});