Ajax.BeginForm两次提交表单

Question

插入数据时我的模态有问题。每次添加新行时，它都会在数据库中输入第二行。我并不确切地知道我做错了什么，所以如果你有一个关于如何解决这个问题的想法请帮助我。

这是我的控制者：

 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());
    }

，这是我的索引视图，_Detail局部视图和添加局部视图（按相同顺序）：

＆＃13;

＆＃13;

@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>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

@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>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

@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>
    
}

＆＃13;

＆＃13;

＆＃13;

我尝试了别的东西，但这也给了我一个问题（请看这个链接：＆＃34; Refresh table list using Ajax in Asp.Net Mvc＆＃34;）谢谢。

Answer 1

此问题正在发生，因为您已在<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>以及_layout page中加载index page两次，因此会导致ajax两次发送请求。请从Index page或_layout page

中删除该链接

  

为什么会导致两次提交？

如果你查看unobtrusive-ajax的代码，它有函数$(document).on("click", "form[data-ajax=true]负责发送请求，所以当你提交表单时，这个函数会在你加载的每个脚本上触发不同的导致请求发送两次（如果有人可以解释更好随意编辑）

Answer 2

这是因为您将JS函数绑定到元素#Add并且您没有正确禁用anchror href，因此有两个请求（因为您的锚点也具有 link 属性）。在这个问题How can I disable HREF if onclick is executed?中你可以说，正确的点击处理应该像

$('#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 
    });