Home / Questions / 2561
Accepted
Ariel Octavio D'Alfeo
Asked: 2020-01-15 10:25:54 +0800 CST 2020-01-15 10:25:54 +0800 CST

Form Ajax + Dialog Jquery C# MVC

  • 772

Good morning, I am trying to use an form that opens in the form of Dialogand that when doing submitthe operations and remains inside the dialog. I can open the form in a dialog, but when it does the , submitand performs the actions on the controller. When I return, it opens what was in it on dialoga full page. Could you help me so that the page inside dialogit stays in its place after the sumbit.

Image as the dialog is shown

After the 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();
        }
    }
}
c#

3 Answers

  1. Best Answer

    I understand that the problem occurs in the "Add" button of the popup, it performs a submit of the form, which is inside an Ajax.BeginForm.

    If the main page has another form defined this can cause problems, remember that there cannot be nested form tags, you should remove the form from the main page.

    Although I would recommend that you evaluate sending the popup data through ajax but using the jquery $.ajax and not through the Ajax.BeginForm()

    Sending JSON to an ASP.NET MVC Action Method Argument

    This way you control the call and there is no submit of a form

    • 4

  2. Check that the JS is not being duplicated jquery.unobtrusive-ajax.js, since you are calling the JS at the beginning and in the script section when calling the bundle jqueryval; to avoid the submit you can make the AJAX request with $.ajaxjQuery.

    Good luck.

    • 0

  3. You can use:

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

    [Ajax de envio de datos al controlador]

    return false;
});

    With event.preventDefault()it you avoid the submit function of the submit, and you can send all the data by an AJAX to the controller.

    This avoids postback and you can render whatever you want in the same view you already have open.

    • 0