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.

HukmChand - you don't show in your example code where you have defined your form. can you include that please and then hopefully it should be a little easier to figure the problem — jim tollan, Jul 26 '12 at 11:36
ok, thanks see the form now. bit puzzled!!. you have no `` types inside the div, are these created dynmically somewhere else??. can you give a little fuller detail as to how you populate any `` elements inside you div. as it stands, there's a huge gap in my understanding of your process — jim tollan, Jul 26 '12 at 11:44
First off, you have not bound the div to the model, creating a div and putting an id on it only works client-side. For anything to be bound, the value needs to be in the submit (post or get) when the form is submitted back to the server. — Steen Tøttrup, Jul 26 '12 at 11:55
@jimtollan No i am not loading div dynmically.Just coded plain html in View itself and binded to ReCreationSteps property.I don't have any other details on this.As i am in developing stage trying to get this done. — Hukam, Jul 26 '12 at 12:22
@SteenT I am just trying to get raw html to model property and split values into single steps and going to store in database. — Hukam, Jul 26 '12 at 12:26
hukmchand - can i suggest that you whack absolutely everything that you have into the question. as i said, i'm clueless as to how you expect to derive any inputs from the div. binding to a div just doesn't happen outside of javascript, so a traditional form post won't see the div as an `` type (if you get tired of me saying that, then just skip :-)) — jim tollan, Jul 26 '12 at 12:31
Are you saying that the "ReCreationSteps" property contains 'raw' HTML? You mention "splitting" the values from it. What does the data look like? Can you update your example? — anAgent, Jul 26 '12 at 12:37
If you want to do this kind of dynamic form/html, use JSON, don't "push" the html to the server, represent your "form" with JSON and push the JSON to the server. — Steen Tøttrup, Jul 26 '12 at 12:39
@jimtollan Thanks a lot for your help and info.I will try to use some other way. — Hukam, Jul 26 '12 at 12:39
hukmchand - as anAgent says, I think you owe it to the interested parties here to shed a bucketful more light on this question as something doesn't gel. for starters, your IssueViewModel pays only fleeting resemblance to the properties inside your view, plus there's no logic to show what you're doing to populate the div that should contain our old friends the `` badboys. more, more more please. as they say `siso`. JSON or a partialview may be your best bet here — jim tollan, Jul 26 '12 at 12:41
hukmchand - sorry for my continual questions on your question. but HOW are the steps being added, i.e. how are you adding new `
@jimtollan Take a look at this [demo]http://html5demos.com/contenteditable/. just place your cursor at end of 3th line and tap enter key,fourth step will automatically added. — Hukam, Jul 26 '12 at 13:22
ok, gotcha, so it's Html5 only that you're after... no worries – tho from the example you supplied (html5demos), there's a large section of javascript events that need to be added to your page code as well. Follow exactly what's going on it that demo and you should be fine. I never realised that you actually had a resource that you were able to refer to. — jim tollan, Jul 26 '12 at 13:38
final question - from what you say in comments below, i presume that javascript is not an option?? if not, then I don't see how this is going to work alas. if js is allowable, then you're off to the races — jim tollan, Jul 26 '12 at 14:23
@jimtollan js is allowable not ajax call.I am working on to keep some INPUT element as hidden and bind it to ReCreationSteps,before submitting the form just get raw html from div and update in hidden input's value.I hope it will work.I will update my answer once its completed. — Hukam, Jul 26 '12 at 14:33

anAgent · Accepted Answer · 2012-07-26T15:35:27.763

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

No luck with this code.Because @Html.Raw helpher will not creating any element.[AllowHtml] will help me to get the html to sever without any security threat exception. — Hukam, Jul 26 '12 at 13:42
I thought that might be the case. I'm working on a extension helper that might be what you want - update soon (I hope). Also, what does the input tag code look like? You don't see it included. THanks! — anAgent, Jul 26 '12 at 13:46
I can't find any appropriate input tag to post my raw html without using ajax.I just tried with div,but that didn't worked.So i came here to find appropriate Input tag. — Hukam, Jul 26 '12 at 13:53
@anAgent Thanks a lot.Will check and accept your answer soon. — Hukam, Jul 26 '12 at 14:38
I hope it helps. If you don't want the the idea of setting it up with the @using, you can find many examples of a simple MvcHtmlString helper like here: http://stackoverflow.com/a/2847712/1220302. — anAgent, Jul 26 '12 at 14:50
Also, for this to post back your values, you'll need to create a hidden field for "ReCreationSteps" and update it when one of the input changes. Since the model is not an input, then it's not going to post back. — anAgent, Jul 26 '12 at 15:30
I updated the example that adds a hidden input that you will need to set (client side) if you want to post back the values the user entered. — anAgent, Jul 26 '12 at 15:36

score 0 · Answer 2 · answered Jul 26 '12 at 11:50

0

If you want the user to be able to add multiple steps (one <li> per step) then you need to use JavaScript for defining a custom form. Is that your plan?

answered Jul 26 '12 at 11:50

Anders Arpi

8,277
3
33
49

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

2 Answers2