@malexander

Почему выводятся одно и то же значение несколько раз?

Добрый вечер, в первый раз на хабре, надеюсь подскажите в чем дело.
Суть такая, что при нажатии на кнопку, данные отправляются на сервер(в данном случае ссылки на соц-сети), и должны добавляться в БД. Но почему то, выводится только одно значение 4 раза, а не 4 разных значений
JS
// FormData
        var form = new FormData() 
        $(".save-links button").click(function () {
            var val = GetValuesLink()
            var storage = {
                Mname: [
                    { mname: "vk" },
                    { mname: "tg" },
                    { mname: "inst" },
                    { mname: "facebook" }
                ],
                Link: [
                    { link: val.vk },
                    { link: val.tg },
                    { link: val.inst },
                    { link: val.facebook }
                ]
            }
            var storageForSubmit = {
                Mname: "",
                Link: ""
            }
            for (var i = 0; i < storage.Link.length; i++) {
                storageForSubmit.Mname = storage.Mname[i].mname
                storageForSubmit.Link = storage.Link[i].link

                form.append("Media", JSON.stringify(storageForSubmit))
                SubmitDataLinks(storageForSubmit)
            }
        })
        function SubmitDataLinks(storageForSubmit) {
            $(document).ready(function(){
                $.ajax({
                type: "POST",
                url: "@Url.Action("SaveFile")",
                data: form,
                processData: false,
                contentType: false,
                success: function () {
                    console.log("Успешно!")
                },
                error: function () {
                    console.log("Ошибка!")
                }
            })
            })
        }
        function GetValuesLink() {
            var vk = document.querySelector(".link-vk input").value
            var tg = document.querySelector(".link-tg input").value
            var inst = document.querySelector(".link-inst input").value
            var facebook = document.querySelector(".link-facebook input").value

            return {
                vk: vk,
                tg: tg,
                inst: inst,
                facebook: facebook
            }
        }

SERVER
[HttpPost]
        public void SaveFile(UploadMedia Medium)
        {
            Console.WriteLine(Medium.media);
        }

Сам класс который хранит значения
public class UploadMedia
{
    public string? media { get; set; }
}

Результат вот такой..
6409efee2b4cb952356447.jpeg
  • Вопрос задан
  • 247 просмотров
Решения вопроса 1
vabka
@vabka Куратор тега ASP.NET
Токсичный шарпист
Код на js сейчас на столько плохой и запутанный, что легче его полностью переписать, чем разбираться, что в нём не так.
Больше всего у меня подозрений на странную функцию SubmitDataLinks и странное перекладывание данных из одного в другое в обработчике нажатия на кнопку
Спойлер

Перекладывание
var storage = { // Зачем вообще такая табличная форма нужна?
                Mname: [
                    { mname: "vk" },
                    { mname: "tg" },
                    { mname: "inst" },
                    { mname: "facebook" }
                ],
                Link: [
                    { link: val.vk },
                    { link: val.tg },
                    { link: val.inst },
                    { link: val.facebook }
                ]
            }
            var storageForSubmit = { // Почему один и тот же объект постоянно перезаписывается?
                Mname: "",
                Link: ""
            }
            for (var i = 0; i < storage.Link.length; i++) {
                storageForSubmit.Mname = storage.Mname[i].mname // А не проще было бы for-of сделать?
                storageForSubmit.Link = storage.Link[i].link

                form.append("Media", JSON.stringify(storageForSubmit))
                SubmitDataLinks(storageForSubmit) // Вот сюда в итоге один и тот же объект будет отправляться
            }


Отправка:
function SubmitDataLinks(storageForSubmit) { // storageForSubmit даже не используется
            $(document).ready(function(){// зачем оно в .ready обёрнуто???
                $.ajax({
                type: "POST",
                url: "@Url.Action("SaveFile")",
                data: form, // Поведение при использовании FormData недокументировано
                processData: false,
                contentType: false, // Поведение при contentType=false недокументировано
                success: function () {
                    console.log("Успешно!")
                },
                error: function () {
                    console.log("Ошибка!")
                }
            })
            })
        }




1. Меняем серверную часть:
Контроллер:
[HttpPost]
public void SaveFile([FromBody] UploadMedia data)
{
  Console.WriteLine(data);
}


UploadMedia:
public record UploadMedia(string MediaName, string MediaLink);


2. Меняем нафиг весь js:
document.addEventListener('DOMContentLoaded', () => {
    const saveFileEndpoint = '@Url.Action("SaveFile")';
    const readLinks = () => ({
        "vk": document.querySelector("input.link-vk").value,
        "tg": document.querySelector("input.link-tg").value,
        "inst": document.querySelector("input.link-inst").value,
        "facebook": document.querySelector("input.link-facebook").value,
    })

    const submitLinks = async (links) => {
        for (const mediaWithLink of links) {
            await fetch(saveFileEndpoint, {
                method: "POST",
                body: JSON.stringify(mediaWithLink),
                headers: {
                    "Content-Type": "application/json"
                }
            })
        }
    }

    const onSaveLinks = async () => {
        const allLinks = readLinks();
        const linksList = Object.keys(allLinks).map(key => ({ "MediaName": key, "MediaLink": allLinks[key] }));
        try {
            await submitLinks(linksList);
            console.log("Ссылки сохранены");
        } catch (e) {
            console.error(`Произошла ошибка при отправке ссылок: ${e.message}`);
        }
    };

    document.querySelector("button.save-links").addEventListener("click", onSaveLinks);
});
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы