英文:
Load modal as partial view with asp.net only
问题
以下是您要求的翻译内容：
我是一个刚开始使用asp.net和web开发的新手，我想知道是否有任何方法仅使用asp.net控制器来加载'bootstrap modal'？
### 例如：
部分视图HTML，命名为/View/Project/Edit.cshtml：
```html
@model Project
<div class="modal fade" id="editProject" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="editHeader"></h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form asp-controller="Project" asp-action="Edit" method="post">
<div class="modal-body">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="row">
<div class="col-sm-6">
<div class="form-floating mb-3 mt-3">
<input asp-for="Code" type="text" class="form-control" placeholder="Project code">
<label asp-for="Code">Project code</label>
<span asp-validation-for="Code" class="text-danger"></span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Update</button>
</div>
</form>
</div>
</div>
</div>
Index视图HTML，命名为/View/Project/Index.cshtml：
... 表格从这里开始 ...
<tbody class="table-group-divider">
@foreach (Project project in Model)
{
<tr>
<td>@project.Description</td>
<td>@project.Code</td>
<td>@project.CellAgeCode</td>
<td>@project.Current</td>
<td>@project.Time</td>
<td>@project.Series</td>
<td>@project.Parallel</td>
<td>@project.CurrentQC</td>
<td>@project.TimeQC</td>
<td>@project.OcvMin.Value</td>
<td>@project.CcvMin.Value</td>
<td>@project.OcvQC</td>
<td>@project.CcvQC</td>
<td>@project.OcvMax.Value</td>
<td>@project.CcvMax.Value</td>
<td>@project.Factory</td>
<td>
<div class="btn-group btn-group-sm" role="group">
<a asp-controller="Project" asp-action="Edit" asp-route-id="@project.Id" class="btn-group-sm btn-outline-primary">
<i class="bi bi-pencil-square"></i>
</a>
<a asp-controller="Project" asp-action="Delete" asp-route-id="@project.Id" class="btn-group-sm btn-outline-danger">
<i class="bi bi-trash3"></i>
</a>
</div>
</td>
</tr>
}
</tbody>
... 表格结束 ...
以及在单击表格内<a>标签时触发的控制器代码：
[HttpGet]
public async Task<IActionResult> Edit(int id)
{
IEnumerable<Project> projects = await Getter.GetProjects();
Project? project = projects?.FirstOrDefault(x => x.Id == id);
if (project == null)
{
return View("Index");
}
else
{
return PartialView("Edit", project);
}
}
是否有方法使模态框显示为弹出窗口，而无需任何JS或JQuery？谢谢 
<details>
<summary>英文:</summary>
I'm a new in asp.net and web in general and I would like to know if there is any way to load `bootstrap modal` using `asp.net` controllers only?
### For example:
partial view html named /View/Project/Edit.cshtml:
```html
@model Project
<div class="modal fade" id="editProject" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="editHeader"></h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form asp-controller="Project" asp-action="Edit" method="post">
<div class="modal-body">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="row">
<div class="col-sm-6">
<div class="form-floating mb-3 mt-3">
<input asp-for="Code" type="text" class="form-control" placeholder="Project code">
<label asp-for="Code">Project code</label>
<span asp-validation-for="Code" class="text-danger"></span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Update</button>
</div>
</form>
</div>
</div>
</div>
Index html named /View/Project/Index.cshtml:
... table start here ...
<tbody class="table-group-divider">
@foreach (Project project in Model)
{
<tr>
<td>@project.Description</td>
<td>@project.Code</td>
<td>@project.CellAgeCode</td>
<td>@project.Current</td>
<td>@project.Time</td>
<td>@project.Series</td>
<td>@project.Parallel</td>
<td>@project.CurrentQC</td>
<td>@project.TimeQC</td>
<td>@project.OcvMin.Value</td>
<td>@project.CcvMin.Value</td>
<td>@project.OcvQC</td>
<td>@project.CcvQC</td>
<td>@project.OcvMax.Value</td>
<td>@project.CcvMax.Value</td>
<td>@project.Factory</td>
<td>
<div class="btn-group btn-group-sm" role="group">
<a asp-controller="Project" asp-action="Edit" asp-route-id="@project.Id" class="btn-group-sm btn-outline-primary">
<i class="bi bi-pencil-square"></i>
</a>
<a asp-controller="Project" asp-action="Delete" asp-route-id="@project.Id" class="btn-group-sm btn-outline-danger">
<i class="bi bi-trash3"></i>
</a>
</div>
</td>
</tr>
}
</tbody>
... end of table ...
And the code from the controller that fire when click on the <a> tag inside the table:
[HttpGet]
public async Task<IActionResult> Edit(int id)
{
IEnumerable<Project> projects = await Getter.GetProjects();
Project? project = projects?.FirstOrDefault(x => x.Id == id);
if (project == null)
{
return View("Index");
}
else
{
return PartialView("Edit", project);
}
}
Is there any why to make the modal to show as popup without any JS or JQuery?
Thanks
答案1
得分: 0
你可以在主视图中使用Ajax渲染你的部分视图。
英文:
No..I dont think so..you can render your Partial View with ajax in your main view
答案2
得分: 0
Here is the translated code portion:
例如，看看这个
$.ajax({
type: "POST",
data: {
任何你需要的东西
},
url: '....',
success: function (response) {
//这是你想要注入部分内容的模态框
$('#bodyModal').html(response);
$('#sdpModal').modal('show');
},
error: function () {
alert("发生了错误!!!");
}
});
英文:
For example look at this
$.ajax({
type: "POST",
data: {
AnyThing you need
},
url: '....',
success: function (response) {
//This is your modal that you want to inject your partial in it
$('#bodyModal').html(response);
$('#sdpModal').modal('show');
},
error: function () {
alert("An error has occured!!!");
}
});
答案3
得分: 0
感谢大家的帮助，我必须在 site.js 中实现以下代码：
const buttons = 'button[data-bs-toggle="win-modal"]';
$(function () {
$(document).on('click', buttons, function () {
var url = $(this).data('url');
var decodeUrl = decodeURIComponent(url);
$.get(decodeUrl).done(function (data) {
PlaceHolder.html(data);
PlaceHolder.find('.modal').modal('show');
})
});
});
英文:
Thanks for everyone for the help, I had to implement the following code in the site.js:
const buttons = 'button[data-bs-toggle="win-modal"]';
$(function () {
$(document).on('click', buttons, function () {
var url = $(this).data('url');
var decodeUrl = decodeURIComponent(url);
$.get(decodeUrl).done(function (data) {
PlaceHolder.html(data);
PlaceHolder.find('.modal').modal('show');
})
});
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论