Ответ JQuery AJAX неверен со второй попытки - PullRequest
0 голосов
/ 08 июня 2019

У меня есть проект C # .NET Core, использующий частичное представление Razor и jQuery.

Я делаю AJAX-запрос jQuery, как показано ниже, который обращается к API, чтобы вернуть данные для загрузки в модальный режим.

$(document).on('click', '.editmodal', function () {
        var optionnumber = $(this).attr('number');
        document.getElementById("EditOption").value = optionnumber;
        var form = document.getElementById('race');
        var formData = new FormData(form);

        $.ajax({
            url: '@Url.Action("ViewEditRaceOption", "Races")',
            type: 'POST',
            data: formData,
            dataType: 'html',
            processData: false,
            contentType: false,
            cache: false,
            async: false,
            success: function(response) {
            if (response) {  // check if data is defined
                $("#optionmodal").html(response);
                console.log(response)
            }
            }

    });

        document.getElementById("EditOption").value = 0;
        $('#optionsmodal').modal('show');
    });

При первом запуске все работает нормально.Ответ на вкладке «Сеть» возвращает HTML-код и загружает его на страницу.

Однако во второй раз ответ является неправильным, поскольку он не заменил значения моей формы.Это как если бы модель не была привязана к виду.

Контроллер выглядит следующим образом.

[HttpPost]
        public async Task<IActionResult> ViewEditRaceOption(RaceViewModel race)
        {
            var vm = race;
            var option = race.RaceOptionData.FirstOrDefault(o => o.Number == race.EditOption);
            vm.OptionAffiliatedDiscountValue = option.AffiliatedDiscountValue;
            vm.OptionColour = option.OptionColour;
            vm.OptionEmbedMapURL = option.EmbedMapURL;
            vm.OptionEntryPremium = option.Premium;
            vm.OptionEntryPrice= option.AffiliatedDiscountValue;
            vm.OptionMaxEntries= option.MaxEntries;
            vm.OptionName= option.Name;
            vm.OptionRaceDistance = option.RaceDistance;
            vm.OptionStartTime = option.StartTime;
            vm.OptionCertificateFileName = option.CourseMeasurementCertificateFileName;
            return PartialView("OptionModal", vm);
        }

Установка точки останова в строке Return показывает, что данные верныв возвращенной модели.

Частичное представление выглядит следующим образом


<div class="row">
    <div class="col-md-4">
        <div class="form-group">
            <label value="OptionName" class="control-label">Option Name</label>
            <br /><small class="text-muted">The name of this Race Option</small>
            <input asp-for="OptionName" placeholder="Your 10k" type="text" class="form-control" aria-label="Name">
            <span asp-validation-for="OptionName" class="text-danger"></span>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
            <label name="OptionRaceDistance" value="Race Distance" class="control-label">Distance</label>
            <br /><small class="text-muted">Choose a race distance, used for Age Grading </small>

            <select asp-for="OptionRaceDistance" required class="form-control">
                <option value="" selected>--select--</option>
                <option value="M1">1 mile</option>
                <option value="KM5">5 km</option>
                <option value="KM6">6 km</option>
                <option value="M4">4 miles</option>
                <option value="KM8">8 km</option>
                <option value="M5">5 miles</option>
                <option value="KM10">10 km</option>
                <option value="KM12">12 km</option>
                <option value="KM15">15 km</option>
                <option value="M10">10 miles</option>
                <option value="KM20">20 km</option>
                <option value="Half">Half Marathon</option>
                <option value="KM25">25 km</option>
                <option value="KM30">30 km</option>
                <option value="Marathon">Marathon</option>
                <option value="KM50">50 km</option>
                <option value="M50">50 miles</option>
                <option value="KM100">100 km</option>
                <option value="KM150">150 km</option>
                <option value="M100">100 miles</option>
                <option value="KM200">200 km</option>
                <option value="Other">Other</option>
            </select><br />
            <span asp-validation-for="OptionRaceDistance" class="text-danger"></span>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
            <label name="OptionMaxEntries" value="Maximum Entries" class="control-label">Maximum Entries</label>
            <br /><small class="text-muted">The maximum capacity of the race</small>


            <input asp-for="OptionMaxEntries" class="form-control" type="number" />
            <span asp-validation-for="OptionMaxEntries" class="text-danger"></span>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label name="OptionStartTime" value="Start Time" class="control-label">Race Start Time</label>
            <br /><small class="text-muted">Start time in HH:MM</small>
            <input asp-for="OptionStartTime" value="19:00" asp-format="{0:hh:mm}" class="form-control" type="time" />
            <span asp-validation-for="OptionStartTime" class="text-danger"></span>
        </div>
    </div>


    <div class="col-md-6">
        <div class="form-group">
            <label class="control-label">Colour</label>
            <br /><small class="text-muted">Choose the colour for this option. </small>
            <select asp-for="OptionColour" class="form-control">
                <option value="White" selected>White</option>
                <option value="Red">Red</option>
                <option value="Blue">Blue</option>
                <option value="Yellow">Yellow</option>
                <option value="Green">Green</option>
                <option value="Silver">Silver</option>
                <option value="Orange">Orange</option>
            </select><br />
        </div>
    </div>
</div>


<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label class="control-label">Course Measurement Certificate</label>
            <br /><small class="text-muted">PDF file of certificate for this race option</small>
            <input asp-for="OptionCourseMeasurementCertificateFile" type="file" class="form-control" />
            <span asp-validation-for="OptionCourseMeasurementCertificateFile" class="text-danger"></span>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label class="control-label">Course Map URL</label>
            <br /><small class="text-muted">Provide a URL to a Garmin, Strava or other course mapping tool</small>
            <input asp-for="OptionEmbedMapURL" class="form-control" />
            <span asp-validation-for="OptionEmbedMapURL" class="text-danger"></span>
        </div>
    </div>
</div>




@if (Model.RaceData.CanBePremium)
                    {
<div class="row">
    <div class="col-md-4">
        <div class="form-group">
            <div class="checkbox">
                <label>
                    <input asp-for="OptionEntryPremium" /> Premium Race Option
                    <br /><small class="text-muted">This is a premium race option and will cost @Model.BaseCurrency.Symbol@Model.BaseFee.ToString("0.00") per race entry</small>
                </label>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
            <label value="OptionEntryPrice" class="control-label">Entry Price</label>
            <br /><small class="text-muted">The price of the normal race entry</small>
            <input asp-for="OptionEntryPrice" type="number" class="form-control" aria-label="Amount" placeholder="10.00" asp-format="{0:0.00}" >
            <span asp-validation-for="OptionEntryPrice" class="text-danger"></span>
        </div>
    </div>

    <div class="col-md-4">
        <div class="form-group">
            <label class="control-label">Affiliation Discount</label>
            <br /><small class="text-muted">Value of discount for affiliation</small>
            <input asp-for="OptionAffiliatedDiscountValue" type="number" class="form-control" aria-label="Amount" value="2.00" asp-format="{0:0.00}" >
            <span asp-validation-for="OptionAffiliatedDiscountValue" class="text-danger"></span>
        </div>
    </div>
</div>

                    }



Кроме того, нажатая кнопка сама генерируется динамически при частичном просмотре в случае, если это полезная информация

Есть идеи, почему это?Я бы хотел, чтобы кнопка выполнялась и каждый раз получала правильный ответ.

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