Как я могу передать данные в частичное представление?

Я пытаюсь выполнять грубые операции с помощью модального окна, но я не знаю, как получить доступ к конкретным данным, необходимым для работы с выбранным элементом.

@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(), когда я смогу заставить его работать.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
64
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я могу предложить обходной путь здесь. В этом модальном всплывающем окне html поместите скрытый ввод и заполните его с помощью кнопки удаления таблицы при нажатии кнопки (js). Для этого вам нужно подключить клиентский скрипт к кнопке этой таблицы. Я вижу, что у вас уже есть add(), прикрепленный к его событию click.

HTML

<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...

  1. Переместите частичное представление внутрь цикла и передайте ему данные следующим образом: @await Html.PartialAsync("_viewpartial", @obj.Id)
  2. Оберните частичный вид выше в <div style = "display:none">. Вы даже можете дать ему идентификатор, чтобы его было легко найти... <div id = "[email protected]" style = "display:none">
  3. Теперь у вас есть скрытый диалог для каждой записи в вашей таблице. Теперь вам просто нужно сделать его видимым, когда кто-то нажимает кнопку удаления. Для этого добавьте к кнопке событие клика: onclick = "$('#[email protected]').show();"

Хммм, это создает модальное окно для каждого элемента. Думаю, поэтому он не оптимален. Не много знаю об AJAX или Jquery, так что спасибо! Это было полезно!

Estif 26.04.2023 15:28

Другие вопросы по теме