Question

我正在使用Asp.Net MVC开发调查应用程序。我有一个名为Index.cshtml的页面，其中包含一个问题表和一个``添加新''按钮。单击按钮后，将使用jQuery打开一个弹出窗口。我正在从控制器中调用视图以填充名为AddOrEdit.cshtml（子页面）的jQuery对话框。我正在添加新的问题和选项。问题是一个文本字段，其选项已添加到可编辑表中。单击submt按钮后，将触发“提交表单”事件（保存或更新）。但是ajax发送两次请求。这些请求之一发送空对象，另一个请求发送完整对象。我在哪里犯错了？

根据我的研究，导致此问题的原因是，不干扰用户的验证器放置在2个不同的页面上。但这不是我的情况。

当我在f12中使用chrome调试时，两个请求之一的发起人会“ jquery”另一个“ other”的发起人这两个发布请求之一的类型显示为“ XHR”，另一个请求的类型显示为“ XHR”是“文档”。

Index.cshtml

TreeComponent

AddOrEdit.cshtml

@{
ViewBag.Title = "Soru Listesi";
}

<h2>Soru Oluşturma</h2>
<a class="btn btn-success" style="margin-bottom: 10px" 
onclick="PopupForm('@Url.Action("AddOrEdit","Question")')"><i class="fa fa-plus"></i> Yeni Soru Oluştur</a><table id="questionTable" class="table table-striped table-bordered accent-blue" style="width: 100%">
<thead>
    <tr>
        <th>Soru No</th>
        <th>Soru Adı</th>
        <th>Oluşturma Tarihi</th>
        <th>Güncelleme Tarihi</th>
        <th>Güncelle/Sil</th>
    </tr>
</thead>
</table>
<link 
href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" 
rel="stylesheet" />



 @section Scripts{
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>

<script>


    var Popup, dataTable;
    $(document).ready(function() {

        dataTable = $("#questionTable").DataTable({
            "ajax": {
                "url": "/Question/GetData",
                "type": "GET",
                "datatype": "json"
            },
            "columnDefs": [
                { targets: 2 }
            ],
            "scrollX": true,
            "scrollY": "auto",
            "columns": [
                { "data": "QuestionId" },
                { "data": "QuestionName" },
                {
                    "data": "CreatedDate",
                    "render": function(data) { return getDateString(data); }
                },
                {
                    "data": "UpdatedDate",
                    "render": function(data) { return getDateString(data); }
                },
                {
                    "data": "QuestionId",
                    "render": function(data) {
                        return "<a class='btn btn-primary btn-sm' onclick=PopupForm('@Url.Action("AddOrEdit", "Question")/" +
                            data +
                            "')><i class='fa fa-pencil'></i> Güncelle</a><a class='btn btn-danger btn-sm' style='margin-left:5px' onclick=Delete(" +
                            data +
                            ")><i class='fa fa-trash'></i> Sil</a>";
                    },
                    "orderable": false,
                    "searchable": false,
                    "width": "150px"
                }
            ],
            "language": {
                "emptyTable":
                    "Soru bulunamadı, lütfen <b>Yeni Soru Oluştur</b> butonuna tıklayarak yeni soru oluşturunuz. "
            }
        });
    });


    function getDateString(date) {
        var dateObj = new Date(parseInt(date.substr(6)));
        let year = dateObj.getFullYear();
        let month = (1 + dateObj.getMonth()).toString().padStart(2, '0');
        let day = dateObj.getDate().toString().padStart(2, '0');
        return day + '/' + month + '/' + year;
    };


    function PopupForm(url) {
        var formDiv = $('<div/>');
        $.get(url)
            .done(function(response) {
                formDiv.html(response);
                Popup = formDiv.dialog({
                    autoOpen: true,
                    resizable: true,
                    title: 'Soru Detay',
                    modal: true,
                    height: 'auto',
                    width: '700',
                    close: function() {
                        Popup.dialog('destroy').remove();
                    }

                });
            });
    }

    function SubmitForm(form) {
        debugger;
        if (form.checkValidity() === false) {
            debugger;
            event.preventDefault();
            event.stopPropagation();
        }
        form.classList.add('was-validated');
        if ($(form).valid()) {
            var question = {};
            question.questionId = 1111;
            var options = new Array();
            $("#questionForm TBODY TR").each(function() {
                var row = $(this);
                var option = {};
                option.OptionId = row.find("TD").eq(0).html();
                option.OptionName = row.find("TD").eq(1).html();
                options.push(option);
            });
            question.options = options;
            question.responses = new Array();
            $.ajax({
                type: "POST",
                url: form.action,
                data: JSON.stringify(question),
                success: function(data) {
                    if (data.success) {
                        debugger;
                        Popup.dialog('close');
                        dataTable.ajax.reload();
                        $.notify(data.message,
                            {
                                globalPosition: "top center",
                                className: "success",
                                showAnimation: "slideDown",
                                gap: 1000
                            });
                    }
                },
                error: function(req, err) {
                    debugger;
                    alert('req : ' + req + ' err : ' + err.data);
                },
                complete: function(data) {
                    alert('complete : ' + data.status);
                }
            });
        }
    }


    function ResetForm(form) {
        Popup.dialog('close');
        return false;
    }

    function Delete(id) {
        if (confirm('Bu soruyu silmek istediğinizden emin misiniz?')) {
            $.ajax({
                type: "POST",
                url: '@Url.Action("Delete", "Question")/' + id,
                success: function(data) {
                    if (data.success) {
                        dataTable.ajax.reload();
                        $.notify(data.message,
                            {
                                className: "success",
                                globalPosition: "top center",
                                title: "BAŞARILI"
                            })
                    }
                }

            });
        }
    }

</script>
}

Answer 1

event.preventDefault（）;移动此行并将其立即放在函数SubmitForm（窗体）之后{

像下面这样：

function SubmitForm(form) { 
    debugger; 
event.preventDefault(); 
if (form.checkValidity() === false) { 
debugger; 

event.stopPropagation(); 
} 
form.classList.add('was-validated'); 
if ($(form).valid()) { 
var question = {}; 
question.questionId = 1111; 
var options = new Array(); 
$("#questionForm TBODY TR").each(function() { 
var row = $(this); 
var option = {}; 
option.OptionId = row.find("TD").eq(0).html(); 
option.OptionName = row.find("TD").eq(1).html(); 
options.push(option); 
}); 
question.options = options; 
question.responses = new Array(); 
$.ajax({ 
type: "POST", 
url: form.action, 
data: JSON.stringify(question), 
success: function(data) { 
if (data.success) { 
debugger; 
Popup.dialog('close'); 
dataTable.ajax.reload(); 
$.notify(data.message, 
{ 
globalPosition: "top center", 
className: "success", 
showAnimation: "slideDown", 
gap: 1000 
}); 
} 
}, 
error: function(req, err) { 
debugger; 
alert('req : ' + req + ' err : ' + err.data); 
}, 
complete: function(data) { 
alert('complete : ' + data.status); 
} 
}); 
} 
}

Asp.Net Mvc Html.BeginFormSubmit ajax发送两次请求（一个人键入xhr，另一个人发送文档）

1 个答案: