我正在使用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",{
"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>
}