So I have a complex form for an IncomeDeclaration.
Its going
to display a textfield GrossIncome for each Activity that the IncomeDeclaration is related
to... this all gets done on the server and works just fine.... the problem is. The User should also be able
to add Activities on the fly.. through javascript... so when the user clicks on Add Activity a Dropdown and a textfield must be appended
to the bottom the activities list... heres what Ive got so far
<tbody id="activities">
@Html.EditorFor(model => model.income.EconomicActivityIncomeDeclarations)
</tbody>
</table>
<a href="#" id="add_activity">Agregar Otra Actividad</a>
</fieldset>
<script type="text/javascript">
$("#add_activity").click(function () {
$.getJSON('/IncomeDeclarations/GetEconomicActivities', function (data) {
var select = new Select();
var data = new Array();
for (var i = 0; i < data.length; i++) {
var option = new Option(data[i]["name"], data[i]["i"])
//should do something here
}
//should call the template and append
to #activities
});
});
</script>
<script id="template" type="text/x-jquery-tmpl">
<tr>
<td><select name="income.EconomicActivityIncomeDeclarations[${SomeNumber}].EconomicActivityId">
${MyOptions}
</select></td>
<td><input type="text" name="income.EconomicActivityIncomeDeclarations[${SomeNumber}].GrossIncome" /></td>>
</tr>
</script>
}
The name attribute for both the select and the text_field is key for this
to work... otherwise modelbinding wont work... I would think that if the SomeNumber variable is set
to new Date.GetTime() model Binding should work just fine...
I actually dont see the need of ajax for this but thats another topic.. I just havent figured out a way
to do this without ajax...
right now I want
to get the template
to work and append the form elements
to the bottom of the list.
