How can we add field controls dynamically?
Hi everyone,
I was working on creating a custom widget and this widget in turn have multiple controls. I was displaying all controls inside a field as below.
Key Value
--------------------------------------------------------------
Age checkbox
Name text
Company text
In my view file I was creating controls based on key, value pair which are available in the dictionary.
<div class="@Model.CssClass sf-fieldWrp">
<table>
<tr>
<td>
<table>
@foreach (var item in Model.FieldItems)
<tr>
@if (item.Value == "checkbox")
<td>@item.Key</td>
<td> <input id="associationCheckbox" type="@item.Value" name="@item.Key" placeholder="@item.Key" value="false"/></td>
else
<td>@item.Key</td>
<td> <input type="@item.Value" name="@item.Key" value="@Model.Value" placeholder="@item.Key" /> </td>
</tr>
</table>
</td>
<td>
<span>
<button type="button" class="btn btn-success" style='float:none;cursor:pointer' ng-click='RemoveWidget()'>AddPerson</button>
</span>
</td>
</tr>
</table>
<span>
<button type="button" class="btn btn-danger" style='float:none;cursor:pointer' ng-click='AddWidget()'>Remove</button>
</span>
</div>
Now my requirement for me is to include/remove the chosen fields based on button click. Rough design looks as below. Could you please provide few suggestions for this implementation?
Please check images in this order. 1. Initial 2. AfterAdd 3. AfterRemove
Thanks,
Balu
Hi Balu,
You can add the input elements programmatically using JavaScript. You need to add an unique id and name to the inputs to differentiate them. Then those values should be picked up and send to the Controller Action. This is standard ASP.NET MVC functionality you need to implement.
You can also check:
http://forums.asp.net/t/1779884.aspx?Add+Input+Fields+dynamically+in+client+side+
http://stackoverflow.com/questions/6869661/client-side-validating-dynamically-generated-form-elements-in-mvc-3-0
Regards,
Nikola Zagorchev
Telerik by Progress
Hi Nikola,
Thank your information. Already this issue got fixed.
Thanks,
Balu