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:

It is possible to add the textbox as this @Html.EditorFor()?
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.

go for nested collections see here itorian.com/2013/04/nested-collection-models-in-mvc-to-add.html — Zaki
– Zaki, Commented Jul 31, 2014 at 15:00
There's no such thing as "@Html tags". @ is used to denote the start of a .NET statement in a Razor view. Html is a reference to HtmlHelper - this isn't available to client-side code and therefore can't be called in JavaScript. — Yuck
– Yuck, Commented Jul 31, 2014 at 15:02
You're looking to dynamically add HTML elements using JavaScript or more likely with jQuery. You can also search for JavaScript templating. — Yuck
– Yuck, Commented Jul 31, 2014 at 15:04

Ashwini Verma · Accepted Answer · 2014-07-31 15:20:21Z

2

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.

edited Jul 31, 2014 at 15:20

answered Jul 31, 2014 at 15:13

Ashwini Verma

7,5257 gold badges39 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Boy Pasmo Over a year ago

But how do you add the @Html.ValidationMessageFor()?

Jonesopolis · Accepted Answer · 2014-07-31 15:06:43Z

1

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.

answered Jul 31, 2014 at 15:06

Jonesopolis

25.4k12 gold badges72 silver badges115 bronze badges

Comments

jimSampica · Accepted Answer · 2014-07-31 15:17:38Z

1

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>

answered Jul 31, 2014 at 15:17

jimSampica

12.5k3 gold badges69 silver badges87 bronze badges

2 Comments

Boy Pasmo Over a year ago

Never used EditorFor templates before but should try this.

jimSampica Over a year ago

You can use this technique for any of the html helpers.

BenMorel · Accepted Answer · 2014-08-01 07:55:53Z

0

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.

edited Aug 1, 2014 at 7:55

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Jul 31, 2014 at 16:12

MikeV

5853 silver badges11 bronze badges

Collectives™ on Stack Overflow

How do you add @html tags using javascript?

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related