How do you add @html tags using javascript?

Question

There's sometimes that you need to add another textbox or other input type for additional information. Ok, say, A Customer can have many Address . As the user completes the form and as he reach the address he can hit the plus sign to add another textbox for another address. So what I did is something like this: (don't know if it's recommended or not)

Html:

<a href="#" class="add-address">Additional Address</a>
<div class="address-container"></div>

JS:

<script>
$(function() {
  var i = 0;
  var addAddress = function() {
    var strBuilder = '<input type="text" name="Addresses[i].Location" />';
    $('.address-container').append(strBuilder);
    i++;

    return false;
  };
  $('.add-address').click(addAddress);
});
</script>

So my question is:

1. It is possible to add the textbox as this @Html.EditorFor() ?
2. It would really be great if I can also add in the @Html.ValidationMessageFor() , is it possible?

I'm using ASP.NET MVC 4; EF Code first approach.

Any help would be much appreciated. Thanks.

Answer 1

Just use i for name attribute.

name="Addresses[' + i + '].Location"

This shoud bind with your model.

  var i = 0;
  var addAddress = function() {
    var strBuilder = '<input type="text" value="" name="Addresses[' + i + '].Location">';
    $('.address-container').append(strBuilder);
    i++;
    return false;
  };

See this post which was much useful for me.

Updated

for validation just add this attributes too along with input element.

data-val-email="The Email field is not a valid e-mail address." 

data-val="true"

An idea behind this is that, appending correct element with name attribute and validation(data-val="true"). You can see rendered html for already working page where you have used validation.

Answer 2

No, razor works on he server side. Once you're on the client, you don't have access to @Html . This post shows how to model bind with lists, though it looks like you already have a grasp on that with your i iterator.

Generally, I'll have razor produce a mocked Address[0] , then copy that generated html into the javascript to generate. It should retain all client-side validation attributes that jQuery looks for.

Answer 3

It is possible to use Razor generated tags on the client side. Create an EditorFor template file that uses {...} syntax for dynamic properties. Then use it like this.

<script type="text/javascript">
    var editorFor = '@Html.EditorFor(...)';
    var i = 0;

    $().ready(function(){
        $('.address-container').append(editorFor.replace("{id}", i));
        i++;
    }

});
</script>

Answer 4

You are not able to add HTML helpers on the client side. You can, however, add simple HTML controls using jquery in a number of ways. You can use the append function as you have above or the html function.

Your validation will also have to be handled client side.

But for best practices, you should create a partial view template of address text fields and then use Knockout to add a new template each time the user clicks add new address. You can then handle validation easily because your viewmodel will be bound to your MVC model.