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局部视图和添加局部视图(按相同顺序):

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

我尝试了别的东西,但这也给了我一个问题(请参阅此链接:" 在Asp.Net Mvc中使用Ajax刷新表列表 ")谢谢.

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]负责发送请求的函数 ,那么当你提交表单时,这个函数会在你加载的每个脚本上以不同的方式触发,导致请求发送两次(如果有人能解释得更好,可以随意编辑)