MVC - Моя форма не передает выбранную опцию моего выпадающего списка

Question

Я пытаюсь опубликовать свои выпадающие значения на моем контроллере, используя сообщение ajax. Все значения формы проходят просто отлично, за исключением моего выпадающего списка выбора. Когда я смотрю на элемент select с помощью devtools браузера, он имеет имя SortByList.

Модель

public IList<SortBy> SortByList { get; set; }

public class SortBy
{
    public string Text { get; set; }
    public bool Selected { get; set; }
}

Просмотреть выпадающий список

@using (Html.BeginForm("FDCLSubmit", "Reports", FormMethod.Post, new { id = 
"reportForm", @class = "report-form col-9" }))
{
<div class="row">
    <b class="col-2" style="padding-top: 5px;">Sort By</b>
    <select asp-for="SortByList" class="form-control col-3">
        @for (var x = 0; x < Model.SortByList.Count; x++)
        {
            <option value="@Model.SortByList[x].Text">@Model.SortByList[x].Text</option>
        }
    </select>
</div>
(saveSubmit button partial view here)
}

Ajax Post

$('#saveSubmit').on('click', function (evt) {
    var report = $('form').serialize();
    var form = new Object();
    form.report = report;
    form.EnteredCriteriaName = $('#EnteredCriteriaName').val();

    //Ajax form post
    $.ajax({
        type: 'POST',
        data: form.report,
        contentType: dataType,
        url: '@Url.Action("FDCLCheckIfExists", "Reports")',
        success: function (data) {
            if (data.exists == true) {
                //Toggle the error modal and display messages
                $('#existsModal').modal('toggle');
                $('#modalYes').on('click', function () {
                    //User selected to replace report criteria
                    $.ajax({
                        type: 'POST',
                        data: form.report,
                        contentType: dataType,
                        url: '@Url.Action("SaveFDCLCriteria", "Reports")',
                        success: function (data) {
                            console.log(data);
                            if (data.success) {
                                window.location.href = data.url;
                            } else {
                                //Toggle the error modal and display messages
                                $('#errorsModal').modal('toggle');
                                //Add <br> tags when there is a linebreak in the string.  This will add the line breaks into the HTML.
                                $('#errorsModal .modal-body p').html(data.message.replace(/(?:\r\n|\r|\n)/g, '<br>'));
                            }
                        }
                    });
                });
            }
        }
    });
});

Контроллер

Я установил свою точку останова в этом контроллере, и это где SortByList свойство моего report выглядит как нулевое.

public ActionResult FDCLCheckIfExists(FirstDollarCreditListing report, string EnteredCriteriaName)
{
    var criteria = report.ConvertToCriteria(report);
    criteria.CriteriaName = EnteredCriteriaName;
    var rep = new ReportFirstDollarCreditListing();
    var exists = rep.DoesCriteriaNameAlreadyExist(criteria);
    return Json(new { exists = exists });
}

Answer 1

Во-первых, вам нужно знать, когда вы используете $('form').serialize(), он будет передавать данные вроде:

SortByList=aaa

Но SortByList в вашей модели - это список, ему нужны такие данные, как:

SortByList[0]=aaa

Вот рабочая демонстрация:

1.Модель (необходимо добавить свойство для получения выбранного элемента):

public class FirstDollarCreditListing
{
    public string SelectedSort { get; set; }
    public IList<SortBy> SortByList { get; set; }
}

2.Просмотр:

Примечание : Когда вы используете .serialize(), он генерирует данные в формате «строки запроса», который должен быть отправлен с использованием значения по умолчанию contentType, равного application/x-www-form-urlencoded; charset=UTF-8, а не JSON.

@model FirstDollarCreditListing
<form>
    <div class="row">
        <b class="col-2" style="padding-top: 5px;">Sort By</b>
        <select asp-for="SelectedSort" class="form-control col-3">
            @for (var x = 0; x < Model.SortByList.Count; x++)
            {
                <option value="@Model.SortByList[x].Text">@Model.SortByList[x].Text</option>
            }
        </select>        
    </div>
    <div>
        <input id="saveSubmit" type="button" value=" submit" />
    </div>
</form>
<input id="EnteredCriteriaName" value="asd" />
@section Scripts
{
<script>
    $('#saveSubmit').on('click', function (evt) {
        var report = $('form').serialize();

        var EnteredCriteriaName = $('#EnteredCriteriaName').val();

        //Ajax form post
        $.ajax({
            type: 'POST',
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            data:report+"&EnteredCriteriaName="+EnteredCriteriaName,
            url: '@Url.Action("FDCLCheckIfExists", "Home")',
            success: function (data) {
                 //..
            }
    });
});
</script>
}

3. Контроллер:

[HttpPost]
public void FDCLCheckIfExists(FirstDollarCreditListing report, string EnteredCriteriaName)
{
    //...   
}

Результат: