I found a way
first a helper for offline collections, that a i found on internet
public static class HtmlPrefixScopeExtensions { private const string idsToReuseKey = "__htmlPrefixScopeExtensions_IdsToReuse_"; public static IDisposable BeginCollectionItem(this HtmlHelper html, string collectionName) { if (html.ViewData["ContainerPrefix"] != null) { collectionName = string.Concat(html.ViewData["ContainerPrefix"], ".", collectionName); } var idsToReuse = GetIdsToReuse(html.ViewContext.HttpContext, collectionName); var itemIndex = idsToReuse.Count > 0 ? idsToReuse.Dequeue() : Guid.NewGuid().ToString(); var htmlFieldPrefix = string.Format("{0}[{1}]", collectionName, itemIndex); html.ViewData["ContainerPrefix"] = htmlFieldPrefix; // autocomplete="off" is needed to work around a very annoying Chrome behaviour whereby it reuses old values after the user clicks "Back", which causes the xyz.index and xyz[...] values to get out of sync. html.ViewContext.Writer.WriteLine("<input type=\"hidden\" name=\"{0}.index\" autocomplete=\"off\" value=\"{1}\" />", collectionName, html.Encode(itemIndex)); return BeginHtmlFieldPrefixScope(html, htmlFieldPrefix); } public static IDisposable BeginHtmlFieldPrefixScope(this HtmlHelper html, string htmlFieldPrefix) { return new HtmlFieldPrefixScope(html.ViewData.TemplateInfo, htmlFieldPrefix); } private static Queue<string> GetIdsToReuse(HttpContextBase httpContext, string collectionName) { // We need to use the same sequence of IDs following a server-side validation failure, // otherwise the framework won't render the validation error messages next to each item. var key = idsToReuseKey + collectionName; var queue = (Queue<string>)httpContext.Items[key]; if (queue == null) { httpContext.Items[key] = queue = new Queue<string>(); var previouslyUsedIds = httpContext.Request[collectionName + ".index"]; if (!string.IsNullOrEmpty(previouslyUsedIds)) foreach (var previouslyUsedId in previouslyUsedIds.Split(',')) queue.Enqueue(previouslyUsedId); } return queue; } private class HtmlFieldPrefixScope : IDisposable { private readonly TemplateInfo templateInfo; private readonly string previousHtmlFieldPrefix; public HtmlFieldPrefixScope(TemplateInfo templateInfo, string htmlFieldPrefix) { this.templateInfo = templateInfo; previousHtmlFieldPrefix = templateInfo.HtmlFieldPrefix; templateInfo.HtmlFieldPrefix = htmlFieldPrefix; } public void Dispose() { templateInfo.HtmlFieldPrefix = previousHtmlFieldPrefix; } }
then using an editor template
<tr> @using (Html.BeginCollectionItem("ListaObraSocialPrepagasSeleccionadas")) { <td> <input type="radio" name="RolesUserTableRadio" /> @Html.HiddenFor(model => model.Id, new { @readonly = "readonly" }) </td> <td> @Html.HiddenFor(model => model.Id, new { @readonly = "readonly" }) @Html.DisplayTextFor(model => model.Name) </td> }
a partial view to manage the list
<script type="text/javascript"> $(document).ready(function () { $("#btnAddRoles").click(function () { var rolId = $("#ddRoles").val(); if (rolId == null || rolId == '') { alert("Debe seleccionar un rol."); return; } var foundRol = $("#RolesUserTable").find("input[value='" + rolId + "']"); if (foundRol.size() > 0) { alert("Ya se ha agregado el rol."); return; } $.ajax({ url: '@Url.Action("AddRoles", "Users")', data: { rolId: rolId }, type: 'GET', contentType: 'application/x-www-form-urlencoded', success: function (data) { if (data.Valid) { $("#RolesUserTable").append(data.html); } else { alert('El rol seleccionado no existe'); } }, error: function (jqXHR, exception) { alert('Error durante la llamada al servidor.' + jqXHR.responseText); }, complete: function () { } }); }); $("#btnDeleteRoles").click(function () { var myRadio = $('input[name=RolesUserTableRadio]'); var radio = myRadio.filter(':checked'); if (radio.size() == 0) { alert("Debe seleccionar un rol."); return; } if (!confirm("¿Confirma que desea eliminar el rol seleccionado?")) { return; } $(radio).closest('tr').remove(); }); }); </script> <div style="width: 100%; overflow-x: auto;"> <table id="RolesUserTable" class="table table-striped"> <thead> <tr> <th></th> <th>Rol</th> </tr> </thead> @Html.EditorFor(m => m.Roles) </table> </div>
and finnaly the dropdown and the table
<div class="form-group"> <label for="ddRoles" class="col-sm-2 control-label">Roles</label> <div class="col-sm-3"> @Html.DropDownList("ddRoles", new SelectList(ViewBag.Roleslist, "Id", "Name", null), "Seleccione un rol", new { @class = "selectpicker", data_live_search = "true" }) </div> <div class="btn-group"> <button id="btnAddRoles" type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span></button> <button id="btnDeleteRoles" type="button" class="btn btn-default"><span class="glyphicon glyphicon-minus"></span> </button> </div> </div> <div> @Html.Partial("_Roles") </div>
