Динамическая кнопка избранного — ASP.NET Core MVC

Я создал форму, в которой я получаю данные из базы данных, используя ASP.NET Core MVC и ADO.NET, в которой я показываю данные, используя цикл foreach. Теперь я попытался создать кнопку добавления в избранное, но я не понимаю, как ее создать, потому что как я могу добавить данные в список избранного по отдельности?

Вот моя разметка вида:

<div class = "filter_and_location" style = "right: 0%;">
    <div class = "property_information">
        @foreach (var item in Model)
        {
            <div class = "home-info">
                <a href = "#" class = "home-images">
                    <img src = "@item.pic1" />
                </a>
                <div class = "home-data">
                    <div class = "home-name">
                        <p>@item.tittle</p>
                    </div>
                    <div class = "price">
                        <p>@item.price</p>
                    </div>
                    <div class = "features">
                        <span>
                        @item.bedroom
                        @item.bathroom
                        </span>
                        <span>
                        2
                        </span>
                    </div>
                    <div class = "desc">
                        @item.descrip
                    </div>
                    @*This is the Favourite Button*@
                    <div class = "contact-save">
                        <a href = "tel:=11111111111" class = "phone_number">
                        <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
                        </a>
                        <div class = "popup" onclick = "myFunction()">
                            <a href = "tel:+928754756478" class = "phone_number">
                            </a>
                            <span class = "popuptext" id = "myPopup">tel:+928754756478</span>
                        </div>
                        <div class = "popupmsg" onclick = "myFunctionmsg()">
                            <a href = "#" class = "phone_number open_message"></a>
                            <span class = "popuptext" id = "myPopup1">abc123@exmaple.</span>
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>
</div>

Я комментирую строку, в которой хочу создать избранную кнопку.

Вот мой контроллер:

public IActionResult Rent(int PageNumber = 1)
{
    var data = rdb.GetDataHouse();

    ViewBag.Totalpages = Math.Ceiling(data.Count()/5.0);
    data = data.Skip((PageNumber - 1)*5).Take(5).ToList();

    return View(data);
}
[JS за 1 час] - 9. Асинхронный
[JS за 1 час] - 9. Асинхронный
JavaScript является однопоточным, то есть он может обрабатывать только одну задачу за раз. Для обработки длительных задач, таких как сетевые запросы,...
Топ-10 компаний-разработчиков PHP
Топ-10 компаний-разработчиков PHP
Если вы ищете надежных разработчиков PHP рядом с вами, вот список лучших компаний по разработке PHP.
Скраппинг поиска Apple App Store с помощью Python
Скраппинг поиска Apple App Store с помощью Python
📌Примечание: В этой статье я покажу вам, как скрапировать поиск Apple App Store и получить точно такой же результат, как на Apple iMac, потому что...
Редкие достижения на Github ✨
Редкие достижения на Github ✨
Редкая коллекция доступна в профиле на GitHub ✨
Подъем в javascript
Подъем в javascript
Hoisting - это поведение в JavaScript, при котором переменные и объявления функций автоматически "перемещаются" в верхнюю часть соответствующих...
Улучшение генерации файлов Angular
Улучшение генерации файлов Angular
Angular - это фреймворк. Вы можете создать практически любое приложение без использования сторонних библиотек.
0
0
89
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваше описание и код не передают ожидаемый результат. Возможно, вы хотите нажать кнопку «Избранное» и получить набор данных, соответствующий идентификатору в базе данных, через идентификатор. Я построил простой пример, может быть, то, что вы хотите.

Вид:

Отобразить данные на странице (подгружаю избранное из скрытой таблицы):

<div class = "filter_and_location" style = "right: 0%;">
    <div class = "property_information">
        @foreach (var item in Model)
        {
            <div class = "home-info">
                    <div class = "price">
                        <p>@item.Id</p>
                    </div>
                    <div class = "features">
                        <span>
                            @item.Name
                        </span>
                    </div>
                    @*This is the Favourite Button*@
                    <div class = "contact-save">
                        <button id = "@item.Id" onclick = "test(@item.Id)" class = "btn-primary">Submit</button>
                    </div>
            </div>
        }
    </div>
</div>

<div>
    <table class = "table" style = "display:none;">
        <thread>
            <tr>
                <td>Id</td>
                <td>Name</td>
            </tr>
        </thread>
        <tbody id = "tbody">
        </tbody>
    </table>
</div>

<script>
    function test(id)
    {
        $.ajax({
            type: 'POST',
            url: "/Home/Index",
            data: { id: id },
            success: function (response) {
                var html = "<tr><td>" + response.id + "</td>"
                         + "<td>" + response.name + "</td></tr>";
                
                $("#tbody").append(html);
                $(".table").show();
            },
            error: function (error) {
                console.info(error);
            }
        });
    }
</script>

Контроллер:

Получите соответствующие данные из базы данных, получив идентификатор, а затем вернитесь к таблице, показывающей избранные данные в представлении:

[HttpPost]
public IActionResult Index(int Id)
{
    //Match data with the same Id from the database
    //if necessary, you can create a new database and save it in the database
    var model = ...
    return Json(model);
}

Результат:

Прежде чем добавлять в избранное:

После добавления в избранное:

Вот случай, который вы можете использовать в качестве эталона.

Пожалуйста, дайте мне знать, если это то, что вы хотите.

Редактировать:

Вы можете изменить класс, используемый кнопкой, эти классы содержат цвет по умолчанию. Например, добавьте строку ниже в функцию успеха ajax:

$("#" + id).attr("class","btn-default");

Вы также можете добавить атрибут disabled для управления кнопкой, которая будет отключена после одного клика:

$("#" + id).attr("disabled", true);

Да, это хорошо, но как я могу передать более одного свойства, если хочу передать идентификатор, имя, описание.

Qasim Asghar 14.11.2022 08:39

Ваш идентификатор, имя, описание не совпадают с записью в базе данных? @Касим Асгар

Chen 14.11.2022 08:41

Хорошо, я понимаю, я просто хочу знать, как изменить цвет кнопки после отправки, чтобы показать, что она уже отправлена

Qasim Asghar 14.11.2022 08:57

Я обновил свой ответ, вы можете попробовать. @Касим Асгар

Chen 14.11.2022 09:12

Спасибо, но я использую ссылку и svg, так что у меня есть решение для этого

Qasim Asghar 14.11.2022 11:40

Пожалуйста, опишите подробно. Какой эффект вы хотите?

Chen 15.11.2022 02:01

Спасибо, я удалил свой svg и поставил тег <i> для значка, который решает мою проблему.

Qasim Asghar 15.11.2022 06:15

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