Ждать 2 функции Javascript и 2 функции C #? - PullRequest
1 голос
/ 15 мая 2019

У меня есть веб-приложение, выполненное в ASP.NET Core MVC.У меня есть 2 функции JavaScript и 2 функции C #, которые должны быть выполнены подряд.

Что мне нужно сделать:

Нажмите кнопку> Всплывающая форма> Введите значение> Отправьте значение обратно в метод в контроллере> Используйте это значение в другом методе в том жеконтроллер> Добавить значение ко всем строкам.

Процесс, о котором я подумал:

Есть 1 кнопка> Нажатие на кнопку вызывает 2 функции JavaScript> Сначала запускается функция SetDate, затем AppendDateбудет выполняться> Функция SetDate объединена в форме, которая находится в частичном представлении> Прежде чем она сможет перейти к функции AppendDate, она должна сначала завершить первую функцию (так как форма также вызовет функцию C #, которая получает результат изform)> Затем другая функция C # должна быть запущена вторым событием onclick.

Код HTML-формы ниже:

@model IEnumerable<application.Models.Moederblad>

<div id="element_to_pop_up">
    <a class="b-close">x</a>
    @using (Html.BeginForm("Incassodatum", "Moederblads", FormMethod.Post, new { id = "dateForm" }))
    {
        <br />
        <div class="row">
            <div class="col-md-6">
                <label for="Incassodatum">Incassodatum</label>
                <input class="form-control" placeholder="Bijvoorbeeld: 19-02-2020" type="text" data-val="true" data-val-regex="Dat is geen geldige datum" data-val-regex-pattern="^(0[1-9]|[12][0-9]|3[01])[/](0[1-9]|1[012])[/](19|20)[0-9]{2}$, " id="Incassodatum" name="Incassodatum">
            </div>
        </div>
        <div class="row">
        </div>
        <br>
        <input name="__RequestVerificationToken" type="submit" class="btn btn-primary submit" value="Toevoegen" id="submit">
    }
</div>

Ниже Javascript:

$(document).ready(function () {
// DOM Ready
async function SetDate() {
    // Binding a click event
    // From jQuery v.1.7.0 use .on() instead of .bind()
    $('#AppendDateToIncassoDatum').bind('click', function (e) {

        // Prevents the default action to be triggered. 
        e.preventDefault();

        // Triggering bPopup when click event is fired
        $('#element_to_pop_up').bPopup();

        document.getElementById("dateForm").onsubmit = function () {
            var form = this;
            document.getElementById("IncassoDatum").value = "Laden...";
            setTimeout(function () {
                form.submit();
            }, 3000); // 3 seconds
            return false;
        };
    });
}

//Append functie naar knop
async function AppendDate() {
    await SetDate();
    $('#AppendDateToIncassoDatum').attr('onclick', "location.href='/Moederblads/AppendDateToIncassoDatum'");
}
AppendDate();
});

Затем метод C #, который получает значение из формы (подтверждается, что этот метод работает)

    public IActionResult Incassodatum(string Incassodatum)
    {
        string date= "";
        if (ModelState.IsValid)
        {
            date = Incassodatum;
        }
        else
        {
            date = "Daar ging wat mis";
        }
        TempData["Incassodatum"] = $"{Incassodatum}";
        return null; 
    }

Затем второй метод C #, который получает значение из указанного выше метода и который устанавливаетзначение для всех строк.

     [HttpPost, ValidateAntiForgeryToken]
    public IActionResult AppendDateToIncassoDatum([Bind("<All model properties>")]Moederblad moederblad)
    {
        if (ModelState.IsValid && TempData["Incassodatum"] != null)
        {
            //Datum van vandaag in juiste formaat pakken en in een variabele stoppen
            var datum = TempData["Incassodatum"].ToString();
            if (datum == null)
            {
                return View("Error");
            }

            //Model content ophalen
            var model = _context.Moederblad.ToList();

            //We gebruiken hier een foreach statement omdat we elke rij willen updaten
            foreach (var entry in model)
            {
                //Hier check je of de gehele string van Incasso datum niet al een string heeft met de datum van vandaag, zoja breekt hij de operatie af
                //zo niet, gaat ie door en vult hij de datum aan.
                if (entry.Incassodatum.Contains(datum))
                {
                    return View("Error-BA");
                }
                else
                {
                    entry.Incassodatum += ", " + datum;
                }
            }
            //opslaan van de geupdate gegevens
            _context.SaveChanges();

            if (datum != null)
            {
                return View("Success");
            }
            else
            {
                return View("Error");
            }
        }
        //Mocht het opslaan misgaan, stuur door naar de error page
        else
        {
            return View("Error");
        }
    }

Но что происходит сейчас, так это то, что когда я нажимаю кнопку, то после загрузки формы она непосредственно запускает второй JAVФункция ascript и форма даже не имеют значения в этой точке.Вторая функция javascript затем запускает функцию C # и перенаправляет меня безрезультатно.Он должен запускаться всякий раз, когда первый метод C # имеет значение из формы.У кого-нибудь есть идеи, как это сделать?Застрял на 3 дня сейчас .....

Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 15 мая 2019

Разбиваем ваш поток:

  1. Нажмите на кнопку - встроенная функция на стороне клиента

  2. Форма всплывает - обработчик события JS, прикрепленный к событию нажатия кнопки, управляет DOM. Просто базовый JS.

  3. Введите значение - действие пользователя

  4. Отправить значение обратно в метод в контроллере - AJAX-запрос, все еще довольно простой

  5. Используйте это значение в другом методе того же контроллера. Действие контроллера может вызывать столько других методов, либо сколько угодно. Единственное, что имеет значение, это ответ, который в конечном итоге возвращается в конце.

  6. Добавить значение ко всем строкам. - Просто ваш успешный обратный вызов по запросу AJAX. Предположительно, вы собираетесь вернуть что-то вроде JSON. Затем вы будете использовать данные в этом объекте для выполнения каких-либо манипуляций с DOM. Базовый материал JS.

Короче говоря, здесь нет ничего сложного. С того места, где я сижу, это просто основной поток запросов AJAX, где вы запрашиваете новые данные с сервера, а затем используете JS для динамического изменения страницы, как только вы получите ответ. То, что происходит на стороне сервера, не имеет значения, если конечный результат возвращает требуемые данные клиенту.

0 голосов
/ 15 мая 2019

Это правильный поток.Вы спутали себя с использованием двух событий над одной кнопкой.Давайте пройдемся по потоку JS, который у вас есть:

  1. После загрузки страницы запускается функция $ (document) .ready
  2. В конце этой функции вы вызываете AppendDate ();явно
  3. Что будет делать функция AppendDate ()?Вызывает первую функцию SetDate (), которая будет привязывать адскриптор onclick к кнопке с id = AppendDateToIncassoDatum.И затем возвращает run назад к AppendDate (), который добавит еще один обработчик к той же кнопке с id = AppendDateToIncassoDatum.
  4. Таким образом, при загрузке страницы у вас будет два события onclick над вашей кнопкой.И когда вы нажмете эту кнопку, все эти два события сработают одно за другим: первый onr - покажет ваше всплывающее окно, второй - перенаправит вас в указанное место.Между этими двумя событиями не будет паузы.

ИМХО, что-то не так с потоком, который вы пытаетесь реализовать.Перенаправление должно быть привязано к другому элементу управления

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...