javascript - MVC - 我的表单没有通过我的选择下拉列表的选择选项

Question

我正在尝试使用 ajax 帖子将我的下拉值发布到我的控制器。除了我的下拉选择列表之外，所有表单值都可以正常传递。当我使用浏览器的 devtools 查看 select 元素时，它的名称为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)
}

阿贾克斯邮报

$('#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 });
}

标签： javascriptc#ajaxasp.net-mvcasp.net-core

Answer 1

首先，您需要知道何时使用$('form').serialize()它会传递如下数据：

SortByList=aaa

但是模型中的 SortByList 是一个列表，它需要如下数据：

SortByList[0]=aaa

这是一个工作演示：

1.Model（需要添加一个属性来接收选中的item）：

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)
{
    //...   
}

结果：