[英]Pass an id value from the model into a modal form using data-url="@Url.Action"
I have a form that displays a persons title and name.It shows a lot more than that, but this is the bit I am asking about.我有一个显示人名和姓名的表格。它显示的内容远不止这些,但这是我要问的一点。
I have a person table.我有一个人表。
If the user wants to change the person details, is it possible to open up a pop up modal form that lists all the persons in the person table, so that the user can either select an existing person, or insert a new person and when the user closes the pop up, the main form is populated with the selected/new persons details?如果用户想要更改人员详细信息,是否可以打开一个弹出模式表单,列出人员表中的所有人员,以便用户可以 select 现有人员,或插入新人员,当用户关闭弹出窗口,主窗体填充了所选/新人员的详细信息?
I am using ASP.NET Core MVC 5 and EF Core 5.我正在使用 ASP.NET Core MVC 5 和 EF Core 5。
Any help or pointing to a tutorial would be a great help, thanks.任何帮助或指向教程将是一个很大的帮助,谢谢。
UPDATE -更新 -
I have tried the following -我已经尝试了以下 -
I have created a modal partial view -我创建了一个模态局部视图 -
@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>
I have added the following script to site.js -我已将以下脚本添加到 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');
})
})
})
And the controller -还有 controller -
[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);
}
I call the modal with the the following in my main form -我在主要形式中使用以下内容调用模态 -
<button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#personModal"
data-url="@Url.Action("Create")" >Insert</button>
The above code shows the modal and populates the table.上面的代码显示了模式并填充了表格。
However nothing happens when you press save??但是,当您按保存时没有任何反应?
UPDATE 2 -更新 2 -
I changed the button in the modal for to我将模式中的按钮更改为
input type="submit" value="Submit" name="Submit" class="btn btn-success float-right" id="SubmitForm" />
And then changed the form tag in my modal form to -然后将我的模态表单中的表单标签更改为 -
<form method="post" asp-controller="Admin" asp-action="Create">
That worked.那行得通。
Now I am wondering how you can pass the id value of the model into the Modal form using the data-url part of the calling button?现在我想知道如何使用调用按钮的 data-url 部分将 model 的 id 值传递到模态表单中?
<button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#personModal"
data-url="@Url.Action("Create")" >Insert</button>
You can use @Url.Action("Create",new { id=xxx})
,here is a demo:您可以使用@Url.Action("Create",new { id=xxx})
,这是一个演示:
Html(I use "sss" as a sample data of id): 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: 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');
})
})
Controller: Controller:
public IActionResult Create1(string id) {
return Ok();
}
Update: If you want to use @Model.Id
:更新:如果你想使用@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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.