使用 data-url="@Url.Action" 将模型中的 id 值传递到模态形式
Pass an id value from the model into a modal form using data-url="@Url.Action"
我有一个显示人员头衔的表格，name.It 显示的远不止这些，但这就是我要问的。
我有一个人table。
如果用户想要更改人物详细信息，是否可以打开一个弹出模式表单，列出该人物中的所有人物table，以便用户可以select 一个现有的人，或者插入一个新人，当用户关闭弹出窗口时，主表单会填充 selected/new 人的详细信息？
我正在使用 ASP.NET Core MVC 5 和 EF Core 5。
任何帮助或指向教程都会很有帮助，谢谢。
更新 -
我尝试了以下 -
我创建了模态局部视图 -
@model Person
<div class="modal fade" id="personModal" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="personModalLabel">Persons</h4>
<button type="button" class="close" data-dismiss="modal">
<span>x</span>
</button>
</div>
<div class="modal-body">
<form action="Create">
<table class="table table-bordered table-striped table-hover">
<tbody>
@foreach (var pers in ViewBag.PersonList)
{
<tr>
<td style="display:none">@pers.Id</td>
<td class="text-left">
<a asp-action="details" asp-controller="admin" asp-route-id="@pers.Id" title="Click to select vaccination centre">@pers.Title.Description</a><br />
</td>
<td class="text-left ">
@pers.Forename
</td>
<td class="text-left ">
@pers.Surname
</td>
</tr>
}
</tbody>
</table>
<br />
<div class="form-row">
<label asp-for="TitleId" class="control-label col-md-2">Title</label>
<div class="col-md-4 mb-2">
<select asp-for="TitleId" asp-items="@(new SelectList(ViewBag.TitleList, "Id", "Description"))" style=" width: 363px; height: 37px"></select>
<span asp-validation-for="TitleId" class="text-danger"></span>
</div>
</div>
<div class="form-row">
<label asp-for="Forename" class="control-label col-md-2">Forename</label>
<div class="col-md-4 mb-2">
<input asp-for="Forename" class="form-control" maxlength="100" />
<span asp-validation-for="Forename" class="text-danger"></span>
</div>
</div>
<div class="form-row">
<label asp-for="Surname" class="control-label col-md-2">Surname</label>
<div class="col-md-4 mb-2">
<input asp-for="Surname" class="form-control" maxlength="100" />
<span asp-validation-for="Forename" class="text-danger"></span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-save="modal">Save</button>
</div>
</div>
</div>
</div>
我已将以下脚本添加到 site.js -
$(function () {
var placeHolderElement = $('#PlaceHolderHere');
$('button[data-toggle="ajax-modal"]').click(function (event) {
var url = $(this).data('url');
$.get(url).done(function(data) {
placeHolderElement.html(data);
placeHolderElement.find('.modal').modal('show');
})
})
placeHolderElement.on('Click', '[data-save="modal"]', function (event) {
var form = $(this).parents('.modal').find('form');
var actionUrl = form.attr('action');
var sendData = form.serialize();
$.post(actionUrl, sendData).done(function (data) {
placeHolderElement.find('.modal').modal('hide');
})
})
})
和控制器-
[HttpGet]
public IActionResult Create()
{
List<Person> personList = _personRepository.Persons.ToList();
ViewBag.PersonList = personList;
List<Title> titleList = _titleRepository.Titles.ToList();
ViewBag.TitleList = titleList;
Person pers = new Person();
return PartialView("_PersonModalPartial", pers);
}
[HttpPost]
public IActionResult Create(Person pers)
{
_personRepository.CreatePerson(pers);
List<Person> personList = _personRepository.Persons.ToList();
ViewBag.PersonList = personList;
List<Title> titleList = _titleRepository.Titles.ToList();
ViewBag.TitleList = titleList;
return PartialView("_PersonModalPartial", pers);
}
我在我的主窗体中使用以下调用模态 -
<button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#personModal"
data-url="@Url.Action("Create")" >Insert</button>
以上代码显示模态并填充 table。
但是当你按下保存时没有任何反应！？
更新 2 -
我将模式中的按钮更改为
input type="submit" value="Submit" name="Submit" class="btn btn-success float-right" id="SubmitForm" />
然后将模态表单中的表单标签更改为 -
<form method="post" asp-controller="Admin" asp-action="Create">
有效。
现在我想知道如何使用调用按钮的数据-url 部分将模型的 id 值传递到模态表单中？
<button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#personModal"
data-url="@Url.Action("Create")" >Insert</button>
你可以使用@Url.Action("Create",new { id=xxx})，这里有一个演示：
Html（我用“sss”作为id的样本数据）：
<button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#personModal"
data-url="@Url.Action("Create1",new { id="sss"})">
Insert
</button>
js:
$('button[data-toggle="ajax-modal"]').click(function (event) {
var url = $(this).data('url');
$.get(url).done(function (data) {
placeHolderElement.html(data);
placeHolderElement.find('.modal').modal('show');
})
})
控制器：
public IActionResult Create1(string id) {
return Ok();
}
结果：
更新：
如果你想使用 @Model.Id:
<button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#personModal"
data-url="@Url.Action("Create1",new { id=Model.Id})">
Insert
</button>
我有一个显示人员头衔的表格，name.It 显示的远不止这些，但这就是我要问的。
我有一个人table。
如果用户想要更改人物详细信息，是否可以打开一个弹出模式表单，列出该人物中的所有人物table，以便用户可以select 一个现有的人，或者插入一个新人，当用户关闭弹出窗口时，主表单会填充 selected/new 人的详细信息？
我正在使用 ASP.NET Core MVC 5 和 EF Core 5。
任何帮助或指向教程都会很有帮助，谢谢。
更新 -
我尝试了以下 -
我创建了模态局部视图 -
@model Person
<div class="modal fade" id="personModal" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="personModalLabel">Persons</h4>
<button type="button" class="close" data-dismiss="modal">
<span>x</span>
</button>
</div>
<div class="modal-body">
<form action="Create">
<table class="table table-bordered table-striped table-hover">
<tbody>
@foreach (var pers in ViewBag.PersonList)
{
<tr>
<td style="display:none">@pers.Id</td>
<td class="text-left">
<a asp-action="details" asp-controller="admin" asp-route-id="@pers.Id" title="Click to select vaccination centre">@pers.Title.Description</a><br />
</td>
<td class="text-left ">
@pers.Forename
</td>
<td class="text-left ">
@pers.Surname
</td>
</tr>
}
</tbody>
</table>
<br />
<div class="form-row">
<label asp-for="TitleId" class="control-label col-md-2">Title</label>
<div class="col-md-4 mb-2">
<select asp-for="TitleId" asp-items="@(new SelectList(ViewBag.TitleList, "Id", "Description"))" style=" width: 363px; height: 37px"></select>
<span asp-validation-for="TitleId" class="text-danger"></span>
</div>
</div>
<div class="form-row">
<label asp-for="Forename" class="control-label col-md-2">Forename</label>
<div class="col-md-4 mb-2">
<input asp-for="Forename" class="form-control" maxlength="100" />
<span asp-validation-for="Forename" class="text-danger"></span>
</div>
</div>
<div class="form-row">
<label asp-for="Surname" class="control-label col-md-2">Surname</label>
<div class="col-md-4 mb-2">
<input asp-for="Surname" class="form-control" maxlength="100" />
<span asp-validation-for="Forename" class="text-danger"></span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-save="modal">Save</button>
</div>
</div>
</div>
</div>
我已将以下脚本添加到 site.js -
$(function () {
var placeHolderElement = $('#PlaceHolderHere');
$('button[data-toggle="ajax-modal"]').click(function (event) {
var url = $(this).data('url');
$.get(url).done(function(data) {
placeHolderElement.html(data);
placeHolderElement.find('.modal').modal('show');
})
})
placeHolderElement.on('Click', '[data-save="modal"]', function (event) {
var form = $(this).parents('.modal').find('form');
var actionUrl = form.attr('action');
var sendData = form.serialize();
$.post(actionUrl, sendData).done(function (data) {
placeHolderElement.find('.modal').modal('hide');
})
})
})
和控制器-
[HttpGet]
public IActionResult Create()
{
List<Person> personList = _personRepository.Persons.ToList();
ViewBag.PersonList = personList;
List<Title> titleList = _titleRepository.Titles.ToList();
ViewBag.TitleList = titleList;
Person pers = new Person();
return PartialView("_PersonModalPartial", pers);
}
[HttpPost]
public IActionResult Create(Person pers)
{
_personRepository.CreatePerson(pers);
List<Person> personList = _personRepository.Persons.ToList();
ViewBag.PersonList = personList;
List<Title> titleList = _titleRepository.Titles.ToList();
ViewBag.TitleList = titleList;
return PartialView("_PersonModalPartial", pers);
}
我在我的主窗体中使用以下调用模态 -
<button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#personModal"
data-url="@Url.Action("Create")" >Insert</button>
以上代码显示模态并填充 table。
但是当你按下保存时没有任何反应！？
更新 2 -
我将模式中的按钮更改为
input type="submit" value="Submit" name="Submit" class="btn btn-success float-right" id="SubmitForm" />
然后将模态表单中的表单标签更改为 -
<form method="post" asp-controller="Admin" asp-action="Create">
有效。
现在我想知道如何使用调用按钮的数据-url 部分将模型的 id 值传递到模态表单中？
<button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#personModal"
data-url="@Url.Action("Create")" >Insert</button>
你可以使用@Url.Action("Create",new { id=xxx})，这里有一个演示：
Html（我用“sss”作为id的样本数据）：
<button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#personModal"
data-url="@Url.Action("Create1",new { id="sss"})">
Insert
</button>
js:
$('button[data-toggle="ajax-modal"]').click(function (event) {
var url = $(this).data('url');
$.get(url).done(function (data) {
placeHolderElement.html(data);
placeHolderElement.find('.modal').modal('show');
})
})
控制器：
public IActionResult Create1(string id) {
return Ok();
}
结果：
更新：
如果你想使用 @Model.Id:
<button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#personModal"
data-url="@Url.Action("Create1",new { id=Model.Id})">
Insert
</button>