CODEWITHSUNDEEP
javascriptasp.net-mvcrazorhtml-helper
Armaxis
Armaxis

Reputation: 161

Access model's field in html attributes in MVC

Anyway, I am using MVC Razor, and I want to implement a text area, where user can input text with HTML-formatting and some field (or textblock) where this text will instantly appear in formatted way while user is typing it.

Right now I have a test label where I want to display the inputted text and the text area, where user will type. The model has two fields: ID and Text.

<label id="test">There will appear typed text</label>
@Html.TextAreaFor(model => template.Text, new { @class = "span10", rows = 12, @onkeyup = "$('#test').text('testing');" })

Right now the listener on TextArea works fine and puts "testing" inside the label. However I want it to put dynamic value, and also I need the test label to have dynamic id, like "test_1" (since there will be more than 1 pair textare-label). I tried something like this:

@Html.TextAreaFor(model => template.Text, new { @class = "span10", rows = 12, @onkeyup = "$('#[email protected]').text('@template.Text');" })

But this didn't work. So, I have two questions:

  1. How to pass model's fields ID and Text inside of the html attributes in @onkeyup
  2. What container should I better use instead of label to correctly display the html code.

Upvotes: 1

Views: 1651

Answers (2)

Armaxis
Armaxis

Reputation: 161

UPD. Solution found! Special thanks to Jason for help.

<div id="[email protected]">@Html.Raw(@template.Text)</div>
@Html.TextAreaFor(model => template.Text, new { @class = "span10", rows = 12, id = "textarea-" + @template.Id, @onkeyup = "$('#test-" + @template.Id + "').html(document.getElementById('textarea-" + @template.Id + "').value);" })

Upvotes: 0

Jasen
Jasen

Reputation: 14250

1) It's just string concatenation

@Html.TextAreaFor(model => template.Text,
    new { @class = "span10", rows = 12,
    @onkeyup = "$('#test_" + @template.Id + "').text('" + @template.Text + "');" })

2) Label seems ok here if it describes the text area field

Edit

Since you've got jquery let's drop the @onkeyup and do this unobtrusively

<div id="format"></div>
@Html.TextAreaFor(model => template.Text,
    new { @class="span10", rows=12, id="code" })

<script>
    $(function() {
        $("#code").on("keyup", function(e) {
            var markup = $(this).val();
            var markupDiv = $("<div></div>").html(markup);
            $("#format").empty().append(markupDiv.html());
        });
    });
</script>

We use an in-memory div $("<div></div>") to encode the markup then append it to the div placeholder.

jsFiddle

Upvotes: 2

Related Questions