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

表单 Ajax + 对话框 Jquery C# MVC

  • 772

早上好，我正在尝试使用一个表单，Dialog它在执行submit操作时以dialog. 我可以在 a 中打开表单dialog，但是当它submit执行时，并在controller. 当我返回时，它会dialog以整页的形式打开其中的内容。你能帮我，让里面的页面dialog在sumbit.

显示对话框的图像

提交后

/*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>

控制器

  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

    我知道问题出现在弹出窗口的“添加”按钮中，它执行表单的提交，该表单位于 Ajax.BeginForm 内。

    如果主页定义了另一个表单，这可能会导致问题，请记住不能嵌套表单标签，您应该从主页中删除该表单。

    虽然我建议您评估通过 ajax 发送弹出数据，但使用 jquery $.ajax 而不是通过 Ajax.BeginForm()

    将 JSON 发送到 ASP.NET MVC 操作方法参数

    这样您就可以控制通话并且无需提交表单

    • 4

  2. 检查 JS 是否被复制jquery.unobtrusive-ajax.js，因为您在调用包时在开头和脚本部分调用 JS jqueryval；为避免提交，您可以使用$.ajaxjQuery 发出 AJAX 请求。

    祝你好运。

    • 0

  3. 您可以使用：

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

    [Ajax de envio de datos al controlador]

    return false;
});

    有了event.preventDefault()它，您就可以避免提交的提交功能，您可以通过 AJAX 将所有数据发送到控制器。

    这避免了回发，您可以在已打开的同一视图中呈现您想要的任何内容。

    • 0