Introduccion
El otro día el Gran Eduard (@Eiximenis) me resolvió una duda que tenia acerca del modelBinder y el potente enlace de datos que presenta ASP.NET MVC.
Ha raíz de este post y del comentario de “ar7uro”, en el que planteaba la posibilidad de evitar las llamadas al servidor para ir agregando elementos a la colección.
Como resolverlo
Podríamos definir una variable javascript donde escribiéramos todo el código o hacerlo a través de la obtención del Html de la vista. Yo me he decantado por esta segunda versión.
Así que partiendo del ejemplo de Eduard, vamos a realizar algunos cambios:
– Dentro de la vista parcial:
1: @model MvcApplication5.Models.Direccion
2:
3: <div class="editor-label">
4: @Html.LabelFor(model => model.Calle)
5: </div>
6: <div class="editor-field">
7: @Html.Editor(string.Format("{0}[{1}].{2}", "Direcciones", "xxx", "Calle"))
8: @Html.ValidationMessage(string.Format("{0}[{1}].{2}","Direcciones", "xxx", "Calle"))
9:
10: </div>
11: <div class="editor-label">
12: @Html.LabelFor(model => model.Numero)
13: </div>
14: <div class="editor-field">
15: @Html.Editor(string.Format("{0}[{1}].{2}", "Direcciones", "xxx", "Numero"))
16: @Html.ValidationMessage(string.Format("{0}[{1}].{2}", "Direcciones", "xxx", "Numero"))
17: </div>
Hemos eliminado el Prefix y el número que se le va a asignar.
– Dentro de la vista de Cliente:
He modificado el código javascript, para realizar una primera llamada para obtener el html, y para que en el click del botón incremente el contador de Direcciones, y reemplace ‘xxx’ por dicho valor.
1: <script type="text/javascript">
2: var idx = 0;
3: var direccionTemplate = "";
4: $(document).ready(function () {
5: alert('hola');
6: $.get('@Html.Raw(Url.Action("CreateDir","Direcciones"))', function (data) {
7: direccionTemplate = data;
8: });
9:
10: $('#cmdNewDir').click(function () {
11: var newTemplate = direccionTemplate.replace(/xxx/g,idx.toString());
12: idx++;
13: $('#direcciones').append(newTemplate);
14: });
15:
16:
17: });
18: </script>
Espero que os sea de utilidad!!!