Hello. I have previously posted a problem with an ajax form , but I still can't finish this module. The problem is that when I open this Formulario Ajax
(which opens in a dialog
and its div
form is outside any other form - it is inside the layout
), I add the data and when submitting it happens more than 1 time through the action of controller
(up to 10 times ), as if the submit button had been pressed many times, and it never deletes the data from the textbox
.
<div id='Div-AB-Email' style="display: none">
<div id='Div-Email'></div>
</div>
JS:
function abrirFormEmail() {
Preloader();
preloaderBusquedas("Div-Email");
$("#Div-AB-Email").dialog({
autoOpen: true,
open: function (event, ui) {
$("#Div-Email").load("/EmailPersona/Create");
$("#Mail").val("");
$("#Observaciones").val("");
},
focus: function (event, ui) { $("#Mail").focus(); },
show: {
effect: "blind",
duration: 500,
},
hide: {
effect: "blind",
duration: 500
},
width: 1036,
height: 400,
title: "Email de contacto ",
closeOnEscape: true,
});
PreloaderOff();
}
C#:
public class EmailPersonaController : BaseController
{
public PartialViewResult Create()
{
return PartialView();
}
[HttpPost]
public PartialViewResult Create(EmailPersonaModel model)
{
if (model == null)
return PartialView();
if (model.IdPersona == 0)
{
model.IdPersona = ConsultaIdPersona();
ModelState.Remove("IdPersona");
}
try
{
if (ModelState.IsValid)
{
if (model.Nuevo())
{
model.grabado = true;
ListItemsCarga().Add(model);
var modelnull = new EmailPersonaModel();
return PartialView(modelnull);
}
else
{
return PartialView(model);
}
}
else
{
if (string.IsNullOrEmpty(model.Mail))
TempData["ErrorEmail"] = "Debe escribir el mail que desea agregar a la lista";
}
return PartialView(model);
}
catch (Exception e)
{
if (e.Message == "ERROR: 23505: llave duplicada viola restricción de unicidad «uq_email_per»")
{
TempData["ErrorEmail"] = "El Mail que quiere cargar pertenece a otra persona";
}
return PartialView();
}
}
}
Razor:
@model QBOWEB3.Models.EmailPersonaModel
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
@{
ViewBag.Title = "Create";
}
@using (Ajax.BeginForm("Create", "EmailPersona",
new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "Div-Email"
}))
{
<fieldset>
<h3>Email De Contacto</h3>
<span>@ViewBag.Afiliado</span>
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<legend>EmailPersonaModel</legend>
<div id="contenidoEmail">
<table class="TableCampsEdicion">
<tr>
<td class="tdLabel">
@Html.LabelFor(model => model.Mail)
</td>
<td class="tdTextBox">
@Html.EditorFor(model => model.Mail)
</td>
<td class="tdLabel">
@Html.LabelFor(model => model.Observaciones)
</td>
<td class="tdTextBox">
@Html.EditorFor(model => model.Observaciones)
</td>
@Html.EditorFor(model => model.IdPersona)
<td class="tdTextBox">
<input type="submit" value="Agregar" class="botonAzulMediano" style="width: 95px; margin-left: 10px;" />
</td>
</tr>
<tr>
<td class="tdTextBox" colspan="5">
@Html.ValidationMessageFor(model => model.Mail)
@Html.ValidationMessageFor(model => model.Observaciones)
</td>
</tr>
</table>
@* <div id="itemsEmail">@Html.Action("Index")</div>*@
@if (@TempData["ErrorEmail"] != null && @TempData["ErrorEmail"].ToString() != "")
{
<script>
$(function () {
mensaje("@TempData["ErrorEmail"]");
});
</script>
}
@if (Model != null && Model.grabado)
{
<script>
$(function () {
$("#Mail").val("");
$("#Observaciones").val("");
});
</script>
}
<script>
$(function () {
$("#Mail").focus();
Enter_por_Tab();
PreloaderOff();
})
</script>
</div>
</fieldset>
}
As I suggested in the comments, you could try changing Ajax.BeginForm for an invocation that uses $.ajax from jquery.
To send the form you could use jquery's .serialize() on it
form
Web API With AJAX: Submit Form Data After Serialization
In the example it is observed that it is used
data: $('#form1').serialize(),
to send the dataform
to the action of the controllerBut don't define an Ajax or Html BeginForm in the partialview, instead use the tag
form
likehtml
.>>In the create action of the controller, what should I return?
The return depends, some return a json or an HttpStatusCodeResult indicating a
Ok
fromhttp
But it could also be a void or a simple value like string or bool