введите здесь описание изображенияУ меня есть DropDownList и флажки в моем проекте MVC5. Я хочу сначала собрать данные, прежде чем отправлять их контроллеру через AJAX. Какое событие я могу использовать вместо кнопки onclick="SaveList"
? Прямо сейчас я использую эту кнопку, чтобы отправить
<div class="form-group pb-3" id="ddlEvent">
@Html.Label("Event", htmlAttributes: new { @class = "control-label font-weight-bold" })
@Html.DropDownList("EventID", new SelectList(Model.Events, "EventID", "DateDisplayCampus"), "Select Event", new { @class = "form-control" })
@Html.ValidationMessage("EventID", "", new { @class = "text-danger" })
</div>
@foreach (var item in Model.Programs) {
<p class="checkbox w-50 d-inline-block" id="programList">
<input type="checkbox" name="@item.ProgramName" id="program_@item.ProgramName" />
<label for="program_@item.ProgramName">@item.ProgramName</label> @*
<input name="@item.ProgramName" type="hidden" value="false" />*@
</p>
}
<button type="button" class="btn btn-danger" onclick="SaveList()">Save</button>
$(document).ready(function() {});
var SaveList = function() {
var SESSION_TIMES = [];
$("#programList input[id^=program]").each(function(index, val) {
debugger
var session = {};
var checkMajor = $(val).attr("name");
var isChecked = $(this).prop("checked");
if (isChecked) {
session = {
Major: checkMajor,
EventID: $("#EventID option:selected").val() //get EventId from dropdownlist
}
SESSION_TIMES.unshift(session); //add to the beginning of an array
}
debugger
});
// Ending of $("#programList input[id^=program]").each
//atleast if the sessiontTims array has an item, the going to ajax set the array to controller
if (SESSION_TIMES != 0) {
$.ajax({
url: "/SESSION_TIMES/SaveSessions", //controller/medthod
type: "POST",
data: {
list: JSON.stringify(SESSION_TIMES)
},
datatype: "json",
success: function(response) {
alert("Session saved")
window.location.href = '@Url.Action("Index", "SESSION_TIMES")';
},
error: function() {
alert('No Valid Data');
}
})
}
}
1 ответ
Другой вариант — привязать событие к отправке формы;
- заключить все это в тег
form
, я использовал idmyForm
- заменить кнопку на
type="submit"
- превратить
SaveList
в функцию - затем используйте событие
$("#myForm").on("submit")
.
<form id="myForm">
<div class="form-group pb-3" id="ddlEvent">
@Html.Label("Event", htmlAttributes: new { @class = "control-label font-weight-bold" })
@Html.DropDownList("EventID", new SelectList(Model.Events, "EventID", "DateDisplayCampus"), "Select Event", new { @class = "form-control" })
@Html.ValidationMessage("EventID", "", new { @class = "text-danger" })
</div>
@foreach (var item in Model.Programs)
{
<p class="checkbox w-50 d-inline-block" id="programList">
<input type="checkbox" name="@item.ProgramName" id="program_@item.ProgramName" />
<label for="program_@item.ProgramName">@item.ProgramName</label>
@*<input name="@item.ProgramName" type="hidden" value="false" />*@
</p>
}
<button type="submit" class="btn btn-danger">Save</button>
</form>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function () {
$("#myForm").on("submit",function(e){
e.preventDefault(); // this will stop the regular form redirect POST
SaveList(); // call SaveList
})
});
// turn SaveList to a function
function SaveList() {
var SESSION_TIMES = [];
// // checkboxElement
$("#programList input[id^=program]").each(function (index, val) {
debugger
var session = {};
//attr Id is a name of programName
var checkMajor = $(val).attr("name");
var isChecked = $(this).prop("checked");
if (isChecked) {
session = {
Major : checkMajor,
EventID: $("#EventID option:selected").val() //get EventId from dropdownlist
}
SESSION_TIMES.unshift(session); //add to the beginning of an array
}
debugger
});
// Ending of $("#programList input[id^=program]").each
//atleast if the sessiontTims array has an item, the going to ajax set the array to controller
//debugger
if (SESSION_TIMES != 0) {
$.ajax({
url: "/SESSION_TIMES/SaveSessions", //controller/medthod
type: "POST",
data: { list: JSON.stringify(SESSION_TIMES) },
datatype: "json",
success: function (response) {
alert("Session saved")
window.location.href = '@Url.Action("Index", "SESSION_TIMES")';
},
error: function () {
alert('No Valid Data');
}
})
} //Ending of if (SESSION_TIMES != 0)
} //Ending of SaveList
</script>
Похожие вопросы
Новые вопросы
jquery
jQuery — это библиотека JavaScript. Также рассмотрите возможность добавления тега JavaScript. jQuery — это популярная кросс-браузерная библиотека JavaScript, которая упрощает обход объектной модели документа (DOM), обработку событий, анимацию и взаимодействие AJAX, сводя к минимуму расхождения между браузерами. Вопрос с тегом jQuery должен быть связан с jQuery, поэтому jQuery должен использоваться рассматриваемым кодом, и в вопросе должны быть как минимум элементы, связанные с использованием jQuery.