Я пытаюсь выполнять грубые операции с помощью модального окна, но я не знаю, как получить доступ к конкретным данным, необходимым для работы с выбранным элементом.
@model IEnumerable<Category>
@{
ViewData["Title"] = "Index";
}
<h1>Categories</h1>
<button><a asp-controller = "Category" asp-action = "Create">Add Category +</a></button>
<table>
<thead>
<tr>
<th>
Category Name
</th>
<th>
Display Order
</th>
<th>
Created Date
</th>
<th>
Edit Category
</th>
<th>
Delete Category
</th>
</tr>
</thead>
<tbody>
@foreach(var obj in Model)
{
<tr>
<td>@obj.Name</td>
<td>@obj.DisplayOrder</td>
<td>@obj.CreatedDateTime</td>
<td>
<button><a asp-controller = "Category" asp-action = "Edit" asp-route-id = "@obj.Id">Edit Category</a></button>
</td>
<td>
<button onclick = "add()"><a asp-controller = "Category" asp-action = "Delete" asp-route-id = "@obj.Id">Delete Category</a></button>
</td>
</tr>
}
</tbody>
</table>
<partial name = "_viewpartial"/>
Здесь у меня есть представление категории, отображающее таблицу со строками таблицы для каждой точки данных в базе данных. Я могу получить доступ к идентификатору в цикле, позволяющем мне удалять элементы в моем методе «Удалить действие». Но как я могу использовать этот конкретный идентификатор в своем модальном частичном представлении, находящемся вне цикла, для вызова метода «Удалить действие»?
Вот мой частичный взгляд
<div class = "modal-container">
<div class = "modal-wrapper">
<p>Are you sure you want to delete this category?</p>
//selected category will have its name as the disabled input value next line
<input value = "Category" disabled/>
<div class = "confirmation">
<button><a asp-controller = "Category" asp-action = "Index">Cancel</a></button>
<button><a asp-controller = "Category" asp-action = "Delete">Delete</a></button>
</div>
</div>
</div>
Примечание. Я буду использовать Javascript для обработки всплывающего модуля.
Пожалуйста, постарайтесь быть ясным. Я очень новичок в ASP.NET
Редактировать: в настоящее время у меня есть кнопка «Удалить», которая переходит к методу действия «Удалить», но, конечно, я хочу, чтобы это делала только кнопка «Удалить» в модальном окне. Таким образом, кнопка удаления в таблице будет служить только для вызова модального окна с функцией Add()
, когда я смогу заставить его работать.
Я могу предложить обходной путь здесь. В этом модальном всплывающем окне html поместите скрытый ввод и заполните его с помощью кнопки удаления таблицы при нажатии кнопки (js). Для этого вам нужно подключить клиентский скрипт к кнопке этой таблицы. Я вижу, что у вас уже есть add(), прикрепленный к его событию click.
<td>
<input type='hidden' value = "@obj.id" />
<button onclick = "add();">
<a asp-controller = "Category" asp-action = "Modal" asp-route-id = "@obj.Id">Delete Category</a>
</button>
</td>
function add()
{
var hiddenVal = $(this).parent().find("input[type='hidden']").val();
var modalHidden = $("#mhidden").val(hiddenVal);
return false;
}
IDK, какова фактическая цель добавления, но здесь я использую то же имя, чтобы найти идентификатор и добавить его. Здесь скрыто еще одно скрытое поле в html вашего модала. Теперь в модальных окнах удалите кнопку вызова асинхронного/ajax-вызова, чтобы удалить идентификатор, сохраненный в #mhidden.
Вы не можете передавать данные частичному представлению на стороне клиента. Все это происходит на стороне сервера.
Поскольку все это происходит на стороне клиента, было бы лучше просто сделать это с помощью javascript, а затем вызвать ваш контроллер через AJAX, передав правильный идентификатор записи или используя скрытое поле, как предложил Amit Ranjan.
Однако другой подход, не такой чистый, но более простой, поскольку вы новичок в asp...
@await Html.PartialAsync("_viewpartial", @obj.Id)
<div style = "display:none">
. Вы даже можете дать ему идентификатор, чтобы его было легко найти... <div id = "[email protected]" style = "display:none">
onclick = "$('#[email protected]').show();"
Хммм, это создает модальное окно для каждого элемента. Думаю, поэтому он не оптимален. Не много знаю об AJAX или Jquery, так что спасибо! Это было полезно!