3

Buenos días, Estoy intentando utilizar un formulario que se abra de forma de Dialog y que al hacer submit realice las operaciones y quede dentro del dialog. Puedo abrir el formulario en un dialog, pero cuando hace el submit y realiza las acciones en el controller. al retornar me abre lo que estaba en el dialog en pagina completa. me podrían ayudar a que el la pagina dentro del dialog se quede en su lugar luego del sumbit.

Imagen como se muestra el dialog

Luego del Submit

/*Con esta funcion cargo el dialog*/

function abrirFormTelefono() {
    if ($("#Div-AB-Telefono").length == 0) {
        $("body").append("<div id='Div-AB-Telefono'><div id='Div-Telefono'></div></div>");

    }
    Preloader();
    $("#Div-AB-Telefono").dialog({
        autoOpen: true,
        show: {
            effect: "blind",
            duration: 500
        },
        hide: {
            effect: "blind",
            duration: 500
        },
        width: 1036,
        height: 400,
        title:"Teléfonos de contacto ",
        closeOnEscape: true,
    });
    $("#Div-Telefono").load("/TelefonoPersona/Create");
    PreloaderOff();
}
@using QBOWEB3.Clases.Datos
@model QBOWEB3.Models.TelefonoPersonaModel
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
@{
    ViewBag.Title = "Create";
}
<h3>Teléfonos De Contacto</h3>
<span>  @ViewBag.Afiliado</span>
    @using (Ajax.BeginForm("Create", "TelefonoPersona",
            new AjaxOptions
            {
                HttpMethod = "POST",
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "Div-Telefono"
            }))
    {
        <!-- whatever -->
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)
        <fieldset>
            <legend>TelefonoPersonaModel</legend>
            <table class="TableCampsEdicion">
                <tr>
                    <td class="tdLabel">
                        @Html.LabelFor(model => model.IdTipoTelefono)
                    </td>
                    <td class="tdTextBox">
                        @Html.DropDownListFor(model => model.IdTipoTelefono, new SelectList(new ListadoTiposTelefono().TiposList, "Id", "Descripcion"), new { id = "IdTipoTelefono", @class = "DDLCombo" })
                    </td>
                    <td class="tdLabel">
                        @Html.LabelFor(model => model.CodigoArea)
                    </td>
                    <td class="tdTextBox">
                        @Html.EditorFor(model => model.CodigoArea)
                    </td>
                    <td class="tdLabel">
                        @Html.LabelFor(model => model.Telefono)
                    </td>
                    <td class="tdTextBox">
                        @Html.EditorFor(model => model.Telefono)

                    </td>
                    <td class="tdLabel">
                        @Html.LabelFor(model => model.Interno)
                    </td>
                    <td class="tdTextBox">
                        @Html.EditorFor(model => model.Interno)
                    </td>
                     <td class="tdTextBox">
                       <input type="submit" value="Agregar" class="botonAzulMediano" style="width: 95px;margin-left: 10px;" />
                    </td>
                </tr>
                <tr>
                    <td class="tdTextBox" colspan="9">
                        @Html.ValidationMessageFor(model => model.IdTipoTelefono)
                        @Html.ValidationMessageFor(model => model.CodigoArea)
                        @Html.ValidationMessageFor(model => model.Telefono)
                        @Html.ValidationMessageFor(model => model.Interno)
                    </td>
                </tr>
            </table>
        </fieldset>
        <div id="itemsTelefono">@Html.Action("Index")</div>
        <script>
            $(function() {
            });
            function MostrarItemsTelefono(parameters) {
            }
        </script>
    }
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
<style>
    #CodigoArea, #Interno {
        width: 40px;
    }
    #Telefono {
        width: 80px;
    }
</style>

Controller

  public class TelefonoPersonaController : BaseController
  {

  public ActionResult Create()
  {

        return PartialView();
    }

    //
    // POST: /TelefonoPersona/Create

    [HttpPost]
    public ActionResult Create(TelefonoPersonaModel model)
    {

        if (model == null)
            return PartialView();

        if (model.IdPersona == 0)
        {

            model.IdPersona = ConsultaIdPersona();

        }


        try
        {
            if (ModelState.IsValid)
            {

                if (model.Nuevo())
                {
                    model.grabado = true;
                    ListItemsCarga().Add(model);
                    var modelnull = new TelefonoPersonaModel();
                    return PartialView(modelnull);
                }
                
                else
                {
                    return PartialView(model);
                }
            }
            return PartialView(model);
        }
        catch
        {
            return PartialView();
        }
    }
}
5
  • En lugar de usar $("body").append("<div id='Div-AB-Telefono'><div id='Div-Telefono'></div></div>"); porque simplemente no defines el <div> en el html y le asignas el style="display:none;" de esta forma no se visualizara hasta que el dialogo lo muestre. Commented el 14 ene. 2016 a las 19:43
  • En que accion se realiza el post de la view ? Entiendo que el problema se presenta en el boton "Agregar" del popup, pero que codigo ejecutas en el click de ese boton? Commented el 14 ene. 2016 a las 19:48
  • El Botón enviá el formulario (submit). ya encontré la solución. En el web.config me faltaba estas lineas: <appSettings> <add key="ClientValidationEnabled" value="true" /> <add key="UnobtrusiveJavaScriptEnabled" value="true" /> </appSettings> Commented el 14 ene. 2016 a las 19:59
  • 1
    RESUELTO: En el web.config me faltaba estas lineas: <appSettings> <add key="ClientValidationEnabled" value="true" /> <add key="UnobtrusiveJavaScriptEnabled" value="true" /> </appSettings> Commented el 14 ene. 2016 a las 20:01
  • @ArielOctavioD'Alfeo deberías agregar esto como respuesta a tu propia pregunta y marcarlo como aceptada! es totalmente válido! salutes!!!
    – Alan
    Commented el 19 ene. 2016 a las 15:23

3 respuestas 3

4

Entiendo que el problema se presenta en el boton "Agregar" del popup, el mismo realiza un submit del form, el cual esta dentro de un Ajax.BeginForm.

Si la pagina principal tienes definido otro form esto puede causar problemas, recuerda que no puede haber tags form anidados, deberias quitar el form de la pagina principal.

Aunque recomendaria que evalues enviar los datos del popup mediante ajax pero usando el $.ajax de jquery y no por medio del Ajax.BeginForm()

Sending JSON to an ASP.NET MVC Action Method Argument

De esta forma tu controlas la llamada y no hay ningun submit de un form

4
  • Lei varios articulos e hice pruebas, pero no he logrado que el formulario se comporte como con el submit (Hablando de las decoraciones que se le agregan al modelo) para controlar y mostrar los errores o datos que faltan en el formulario. Puede ser que si utilizo JSON tengo que hacer las validaciones por JS?. Si no es asi, y se puede utilizar todos las decoraciones de c# MVC. ¿Me podrias explicar como, o pasarme un ejemplo? Muchas gracias Leandro. Commented el 15 ene. 2016 a las 12:49
  • Sería una buena idea copiar las partes clave del enlace aquí (y ponerlas en español). Los enlaces pueden romperse y entonces esta respuesta perderá parte de su sentido.
    – Alvaro Montoro
    Commented el 15 ene. 2016 a las 15:34
  • Podrias lanzar las validaciones de asp.net mvc desde javascript usando $('form').valid(), si habilitaste las key ClientValidationEnabled UnobtrusiveJavaScriptEnabled en el config esto genera codigo cliente para lanzar las validaciones stackoverflow.com/questions/5127813/… Commented el 15 ene. 2016 a las 16:17
  • 1
    Un detalle mas, el tag div y form que represente el popup deberias ubicarlo por fuera del form de la pagina principal, recuerda que en html puede definir varios tag forms pero no pueden estar anidados Commented el 15 ene. 2016 a las 16:27
0

Verifica que no se este duplicando el JS jquery.unobtrusive-ajax.js, ya que estas llamando el JS al principio y en la sección de script al realizar el llamado del bundle jqueryval; para evitar el submit puedes realizar la petición AJAX con $.ajax de jQuery.

Buena suerte.

0

Puedes usar:

$("#submit").on('submit', function(event){
    event.preventDefault();

    [Ajax de envio de datos al controlador]

    return false;
});

Con el event.preventDefault() evitas la función de envío del submit, y puedes enviar todos los datos por un AJAX al controlador.

Esto evita el postback y puedes renderizar lo que desees en la misma vista que ya posees abierta.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.