CODEWITHSUNDEEP
c#jqueryasp.net-mvc
user1740381
user1740381

Reputation: 2199

Add element dynamically in MVC form

I am working on a asp.net mvc-5 project. I have following c# model:

public class Settings
{
    public int Id { get; set; }

    public string Name { get; set; }

    public string Value { get; set; }

    public int ParentId { get; set; }

    public List<Settings> SubSettings { get; set; }
}

I am rendering this model on razor view by using EditorTemplates as explained here. Now i want to add remove Settings node dynamically like:

enter image description here

When we click on red button the element should get deleted (which is quite simple and i already implemented it) and when we click on green button the node should get added to its appropriate place (here i want your help).

The node should added is such a way that default model binder can map it to its right place, can anyone please explain me how can i do this?

Upvotes: 2

Views: 4830

Answers (3)

user3559349
user3559349

Reputation:

The key to ensuring dynamically added elements post back correctly for binding is to use an indexer. One way to do this is to create the elements representing the new object, giving them a fake indexer (so this one does not post back) and then cloning the elements and updating the index. For example

View

<div id="NewSetting" style="display:none">
  <tr>
    <td><input type="text" name="Settings[#].ID value /></td>
    <td><input type="text" name="Settings[#].Name value /></td>
    <td>.....</td> // more properties of Settings
    <td><input type="hidden" name="Settings[#].Index" value ="%"/></td>
  </tr>
</div>

Note the use of a dummy indexer to prevent this one being posted back

Script

$(AddButton).click(function() {
  var index = // assign a unique value
  var clone = $('#NewSetting').clone();
  // Update the index of the clone
  clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
  clone.html($(clone).html().replace(/"%"/g, '"' + index  + '"'));
  $(SomeElement).append(clone);
}

Obviously change AddButton and SomeElement selectors to suit your needs. You will also need to ensure your editor template for creating existing Settings include the Settings[].Index property.

Upvotes: 4

Daveo
Daveo

Reputation: 19912

You can do this via Javascript. You can use jQuery to clone the an existing dom element then change the name. Or you could you a Ajax request to get the new HTML see this post for an example.

So you HTML/View need to contain a index for each dynamic item e.g.

<input type="checkbox" name = "Foo[0].Skills" value="true"/>
<input type="checkbox" name = "Foo[1].Skills" value="true"/>
<input type="checkbox" name = "Foo[2].Skills" value="true"/>

Alternatively you could use a JavaScript template engine to dynamically as new HTML form elements such as http://handlebarsjs.com/

Upvotes: 0

Georgi Bilyukov
Georgi Bilyukov

Reputation: 627

I would recommend you not to add/delete the nodes but hide/show them.

Include all the possible nodes in your model and use jquery to show and hide when the buttons are clicked.

Upvotes: 0

Related Questions