Javascript 如何打开模态窗口并将模型传递给js
我学习情态动词，我有一个问题。现在模态打开，但有样式显示：无，它不想关闭窗口，我不知道如何传递到ajax我的模型 我有一个控制器，它有一个应该更新或添加记录的方法。但我不知道如何在js上做 这是我的主页Javascript 如何打开模态窗口并将模型传递给js,javascript,ajax,asp.net-core,modal-dialog,bootstrap-modal,Javascript,Ajax,Asp.net Core,Modal Dialog,Bootstrap Modal,我学习情态动词，我有一个问题。现在模态打开，但有样式显示：无，它不想关闭窗口，我不知道如何传递到ajax我的模型 我有一个控制器，它有一个应该更新或添加记录的方法。但我不知道如何在js上做 这是我的主页 <!-- Modal placeholder --> <div id="modal-placeholder"></div> <!-- Button trigger modal --> <button type=&
<!-- Modal placeholder -->
<div id="modal-placeholder"></div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="ajax-modal" id="modalButton">
Add new pupil
</button>
<h1>Index</h1>
<div id="Results"></div>
<table class="table">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Email)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Email)
</td>
<td>
<a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
<a asp-action="Details" asp-route-id="@item.Id">Details</a> |
<form asp-action="Delete" asp-route-id="@item.Id" onsubmit="return jQueryAjaxDelete(this)" class="d-inline">
<input type="submit" value="Delete" class="btn btn-danger" />
</form>
</td>
</tr>
}
</tbody>
</table>
@model Models.Pupils
@{
ViewData["Title"] = "Index";
}
<div class="modal bd-example-modal-lg" tabindex="-1" role="dialog" id="form-modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form asp-action="AddOrEdit" asp-route-id="@Model.Id" onsubmit="return editPupil(this);" autocomplete="off">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="Id" />
<div class="col-md-8 order-md-1">
<div class="row">
<div class="mb-3">
<label for="address">Pupil name</label>
<label asp-for="Name" class="control-label"></label>
<input type="text" asp-for="Name" class="form-control" id="Name" placeholder="">
<span asp-validation-for="Name" class="text-danger"></span>
<div class="invalid-feedback">
Please enter valid name.
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label asp-for="Email" class="control-label"></label>
<input asp-for="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-6 offset-md-3">
<input type="submit" value="Submit" class="btn btn-primary btn-block" />
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="loaderbody" id="loaderbody">
<div class="loader"></div>
</div>
@model Models.com
@{
ViewData[“标题”]=“索引”；
}
&时代；
学生姓名
请输入有效的名称。
@model IEnumerable<Pupils>
<div id="modal-placeholder"></div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="ajax-modal" id="modalButton">
Add new pupil
</button>
<h1>Index</h1>
<div id="Results"></div>
<table class="table">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Email)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Email)
</td>
<td>
<a onclick="Edit(@item.Id)" style="color: #007bff">Edit</a> |
<a asp-action="Details" asp-route-id="@item.Id">Details</a> |
<form asp-action="Delete" asp-route-id="@item.Id" onsubmit="return jQueryAjaxDelete(this)" class="d-inline">
<input type="submit" value="Delete" class="btn btn-danger" />
</form>
</td>
</tr>
}
</tbody>
</table>
@section Scripts{
<script>
const patentBox = $('#Results');
const modalButton = $('#modalButton');
modalButton.on('click', function () {
debugger;
$.ajax({
url: '/Home/Add',
type: "GET",
success: function (content) {
patentBox.html(content);
$('#form-modal').modal('show');
},
error: function (data) {
console.error(data.responseText);
toastr.error('Error', '!!!');
}
});
});
function Edit(id) {
$.ajax({
url: '/Home/Edit?id='+id,
type: "GET",
success: function (content) {
patentBox.html(content);
$('#form-modal').modal('show');
},
error: function (data) {
console.error(data.responseText);
toastr.error('Error', '!!!');
}
});
};
addPupil = form => {
try {
$.ajax({
type: 'POST',
url: form.action,
data: new FormData(form),
contentType: false,
processData: false,
success: function (res) {
console.log(res.isValid);
if (res.isValid) {
window.location.href = res.url;
$('#form-modal').modal('hide');
}
else
$('#form-modal .modal-body').html(res.html);
},
error: function (err) {
console.log(err);
}
});
} catch (ex) {
console.log(ex);
}
return false;
};
editPupil = form => {
try {
$.ajax({
type: 'POST',
url: form.action,
data: new FormData(form),
contentType: false,
processData: false,
success: function (res) {
if (res.isValid) {
window.location.href = res.url;
$('#form-modal').modal('hide');
}
else
$('#form-modal .modal-body').html(res.html);
},
error: function (err) {
console.log(err);
}
});
} catch (ex) {
console.log(ex);
}
return false;
};
</script>
}
@model IEnumerable
增加新学生
指数
@DisplayNameFor（model=>model.Name）
@DisplayNameFor（model=>model.Email）
@foreach（模型中的var项目）
{
@DisplayFor（modelItem=>item.Name）
@DisplayFor（modelItem=>item.Email）
@model IEnumerable<Pupils>
<div id="modal-placeholder"></div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="ajax-modal" id="modalButton">
Add new pupil
</button>
<h1>Index</h1>
<div id="Results"></div>
<table class="table">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Email)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Email)
</td>
<td>
<a onclick="Edit(@item.Id)" style="color: #007bff">Edit</a> |
<a asp-action="Details" asp-route-id="@item.Id">Details</a> |
<form asp-action="Delete" asp-route-id="@item.Id" onsubmit="return jQueryAjaxDelete(this)" class="d-inline">
<input type="submit" value="Delete" class="btn btn-danger" />
</form>
</td>
</tr>
}
</tbody>
</table>
@section Scripts{
<script>
const patentBox = $('#Results');
const modalButton = $('#modalButton');
modalButton.on('click', function () {
debugger;
$.ajax({
url: '/Home/Add',
type: "GET",
success: function (content) {
patentBox.html(content);
$('#form-modal').modal('show');
},
error: function (data) {
console.error(data.responseText);
toastr.error('Error', '!!!');
}
});
});
function Edit(id) {
$.ajax({
url: '/Home/Edit?id='+id,
type: "GET",
success: function (content) {
patentBox.html(content);
$('#form-modal').modal('show');
},
error: function (data) {
console.error(data.responseText);
toastr.error('Error', '!!!');
}
});
};
addPupil = form => {
try {
$.ajax({
type: 'POST',
url: form.action,
data: new FormData(form),
contentType: false,
processData: false,
success: function (res) {
console.log(res.isValid);
if (res.isValid) {
window.location.href = res.url;
$('#form-modal').modal('hide');
}
else
$('#form-modal .modal-body').html(res.html);
},
error: function (err) {
console.log(err);
}
});
} catch (ex) {
console.log(ex);
}
return false;
};
editPupil = form => {
try {
$.ajax({
type: 'POST',
url: form.action,
data: new FormData(form),
contentType: false,
processData: false,
success: function (res) {
if (res.isValid) {
window.location.href = res.url;
$('#form-modal').modal('hide');
}
else
$('#form-modal .modal-body').html(res.html);
},
error: function (err) {
console.log(err);
}
});
} catch (ex) {
console.log(ex);
}
return false;
};
</script>
}
@model Pupils
<div class="modal bd-example-modal-lg" tabindex="-1" role="dialog" id="form-modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form asp-action="Add" onsubmit="return addPupil(this);" autocomplete="off">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="Id" />
<div class="row">
<div class="col-md-8 order-md-1">
<div class="form-group">
<label for="address">Pupil name</label>
<label asp-for="Name" class="control-label"></label>
<input type="text" asp-for="Name" class="form-control" id="Name" placeholder="">
<span asp-validation-for="Name" class="text-danger"></span>
<div class="invalid-feedback">
Please enter valid name.
</div>
</div>
<div class="form-group">
<label asp-for="Email" class="control-label"></label>
<input asp-for="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Submit" class="btn btn-primary btn-block" />
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
@model Pupils
<div class="modal bd-example-modal-lg" tabindex="-1" role="dialog" id="form-modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form asp-action="Edit" asp-route-id="@Model.Id" onsubmit="return editPupil(this);" autocomplete="off">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="Id" />
<div class="row">
<div class="col-md-8 order-md-1">
<div class="form-group">
<label for="address">Pupil name</label>
<label asp-for="Name" class="control-label"></label>
<input type="text" asp-for="Name" class="form-control" id="Name" placeholder="">
<span asp-validation-for="Name" class="text-danger"></span>
<div class="invalid-feedback">
Please enter valid name.
</div>
</div>
<div class="form-group">
<label asp-for="Email" class="control-label"></label>
<input asp-for="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Submit" class="btn btn-primary btn-block" />
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
public class HomeController : Controller
{
private readonly Mvc3_1Context _context;
public HomeController(Mvc3_1Context context)
{
_context = context;
}
public IActionResult Index()
{
var model = _context.Pupils.ToList();
return View(model);
}
public IActionResult Add()
{
return PartialView("_PartialAdd");
}
[HttpPost]
public async Task<IActionResult> Add([Bind("Name,Email")] Pupils pupils)
{
if (!ModelState.IsValid)
{
return Json(new { isValid = false });
}
_context.Add(pupils);
await _context.SaveChangesAsync();
return Json(new { isValid = true, url = "/Home/Index" });
}
public IActionResult Edit(int id)
{
var pupil = _context.Pupils.Find(id);
return PartialView("_PartialEdit", pupil);
}
[HttpPost]
public async Task<IActionResult> Edit(int id, Pupils pupils)
{
if (id != pupils.Id)
{
return NotFound();
}
if (!ModelState.IsValid)
{
return Json(new { isValid = false });
}
_context.Update(pupils);
await _context.SaveChangesAsync();
return Json(new { isValid = true, url = "/Home/Index" });
}
}