Ajax.BeginForm submitting the form twice

Question

I have a problem with my modal on inserting data. Every time I add a new row it get's a second identical row into the database. I don't really know exactly what I did wrong so if you have a ideea on how to solve this please help me.

This is my controller:

 public ActionResult IndexEvent()
    {
        return View(db.tbl_Event.ToList());
    }

    [HttpGet]
    public ActionResult AddEvent()
    {
        return PartialView();
    }

    [HttpPost]
    public ActionResult AddEvent(BOL3.tbl_Event eve)
    {
        if(ModelState.IsValid)
        {
            db.tbl_Event.Add(eve);
            db.SaveChanges();
        }
        return PartialView("_Detail", db.tbl_Event.ToList());
    }

,here is my Index view, _Detail partial view and Add partial view (in the same order):

@model IEnumerable<BOL3.tbl_Event>

@{
    ViewBag.Title = "Index";
}

<link href="@Url.Content("~/Content/bootstrap/css/bootstrap.min.css")" rel="stylesheet" />
<link href="@Url.Content("~/Content/bootstrap/css/bootstrap-theme.min.cs")" rel="stylesheet" />
<link href="@Url.Content("~/Content/bootstrap/css/font-awesome.min.cs")" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

<div id="main-div">
    <div class="clearfix">&nbsp;</div>
    <div class="clearfix">&nbsp;</div>
    <div class="container">
        <a href="@Url.Action("AddEvent", "Prog")" id="Add" class="btn btn-primary btn btn-xs"><i class="glyphicon glyphicon-plus"></i>&nbsp; Add New</a>
        <br />
        <br />
        <div id="div-record">
            @Html.Partial("_Detail")
        </div>
    </div>
</div>

<div class="modal fade" id="Add-Model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Add Event</h4>
            </div>
            <div class="divForAdd">
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        $('#Add').click(function (event) {
            event.preventDefault();
            $.get(this.href, function (response) {
                $('.divForAdd').html(response);
            });
            $('#Add-Model').modal({
                backdrop: 'static',
            }, 'show');
        });

@model IEnumerable<BOL3.tbl_Event>

<div class="table-responsive">
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Event Name</th>
                <th>Starting Event (Date and Time)</th>
                <th>Ending Event (Date and time)</th>
                <th>All Day ?</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
            @foreach(var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Event)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Start_Date)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.End_Date)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.All_Day)
                    </td>
                    <td>
                        <a href="@Url.Action("EditEvent", "Prog", new { id = item.ID})" class="editDialog"><i class="glyphicon glyphicon-pencil"></i>&nbsp;Edit</a>
                    </td>
                    <td>
                        @Ajax.ActionLink(" Delete", "DeleteEvent", "Prog", new { @id = item.ID }, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "div-record" }, new { @class = "glyphicon glyphicon-trash" })
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

@model BOL3.tbl_Event

@using (Ajax.BeginForm("AddEvent", "Prog", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "div-record", OnSuccess = "$('.close').click()" }))
{
    <div class="modal-body">
        <div class="row form-group">
            <div class="col-md-12">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-pushpin"></i></span>
                    @Html.TextBoxFor(m => m.Event, new { @class = "form-control" })
                </div>
            </div>
        </div>
        <div class="row form-group">
            <div class="col-md-12">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                    @Html.TextBoxFor(m => m.Start_Date, new { @class = "form-control" })
                </div>
            </div>
        </div>
        <div class="row form-group">
            <div class="col-md-12">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                    @Html.TextBoxFor(m => m.End_Date, new { @class = "form-control" })
                </div>
            </div>
        </div>
        <div class="row form-group">
            <div class="col-md-12">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                    @Html.TextBoxFor(m => m.All_Day, new { @class = "form-control" })
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-success" name="cmd">Save</button>
    </div>
    
}

I tried something else but that also gave me a problem (see this link: "Refresh table list using Ajax in Asp.Net Mvc") Thank you.

Sorry if it sounded like that, I want to know exactlly why this thing happens. I put a breakpoint to see what is wrong but it doesn't display any error, it display's the ID of the last -1 value. — Jon A, Apr 06 '17 at 10:09
It shows when debugged that the AddEvent (post) method is actioned twice. Why does that happen? — Jon A, Apr 06 '17 at 10:22
I believe I have an correct answer for you. Anyway, you could debug this behavior not only by debugging your web application, but also by debugging JS code in your browser. And by watching sent http requests to your app, you would find out where the problem is. But don't be sad, we all did same mistakes as you, so learn from that and keep going :) — Pavel Pája Halbich, Apr 06 '17 at 10:35
Your right @Pavel Halbich that what happens when your a beginer and it's the first time using this. Thanks — Jon A, Apr 06 '17 at 10:59
@Usman why is it the _layout page important? the problem is that when I try to submit a new row I get a copy of that with a new Id. — Jon A, Apr 06 '17 at 11:04
@JonA i believe the problem might be in scripts so can you share what scripts are you loading in _layout page? — Usman, Apr 06 '17 at 11:07

Usman · Accepted Answer · 2017-04-06T12:05:05.100

15

this problem is occuring because you have loaded <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> twice in the _layout page as well as index page and because of that it causes ajax to send request twice. so remove the link either from Index page or _layout page

Why it causes to submit twice?

if you look at the code of unobtrusive-ajax it has function $(document).on("click", "form[data-ajax=true] which is responsible for sending the request so when you submit the form this function trigger's differently on each script you loaded which causes the request to send twice (if someone can explain better feel free to edit)

edited Apr 06 '17 at 12:05

answered Apr 06 '17 at 11:17

Usman

4,615
2
17
33

OK I will try this and replay. Thanks – Jon A Apr 06 '17 at 11:17
It worked, many thank for your answer, this really helped me a lot. If I may ask why does this behav. happens when the script has another copy in the project? – Jon A Apr 06 '17 at 11:20
i believe its because it has function `$(document).on("click",` which causes the form to submit so when you add script two times it triggers this function twice on both scripts separately – Usman Apr 06 '17 at 11:31
Thanks for the info, didn't know that, from now on I will look twice at the scripts so that this never happens again. Many thanks again! – Jon A Apr 06 '17 at 13:41
5 years later you saved me. Was looking all over internet wondering why my form was submitted twice. Having two references to unobtrusive js was the reason. – Dunge Aug 16 '22 at 20:53

score 3 · Answer 2 · edited May 23 '17 at 12:09

3

It is because you have JS function binded to element #Add and you are not disabling anchror href correctly, thus having two requests (since your anchor has link attribute as well). In this SO question How can I disable HREF if onclick is executed? you can se, that correct click handling should be like

$('#Add').click(function (event) {
        event.preventDefault();
        $.get(this.href, function (response) {
            $('.divForAdd').html(response);
        });
        $('#Add-Model').modal({
            backdrop: 'static',
        }, 'show');

        return false;      // this is essential 
    });

edited May 23 '17 at 12:09

Community

1
1

answered Apr 06 '17 at 10:32

Pavel Pája Halbich

1,529
2
17
22

Thanks for your replay, but I still have the same issue even with that. But thank you for your answer. I appriciate it. – Jon A Apr 06 '17 at 11:03
I saw the link that you gave me, but I don't understand somthing. I have the add button like this " Add ", and there I saw that he had at href a link (http://.....), what's with that? – Jon A Apr 06 '17 at 11:09

Ajax.BeginForm submitting the form twice

2 Answers2