asp .net mvc：使用 ajax 填充选择选项答案

【问题标题】：asp .net mvc: Populating select option with ajaxasp .net mvc：使用 ajax 填充选择选项
【发布时间】：2023-03-19 05:14:01
【问题描述】：

我正在使用带有 json 数据的 jquery ajax 填充一个选择选项，并且它工作正常，但是当我单击提交按钮时，我的选项值变为空。这是我的代码：

查看：

@using (Html.BeginForm("Index", "Teste", FormMethod.Post))
{
@Html.AntiForgeryToken()
<div class="row">
    <div class="col-md-8">
        Data Agendamento
    </div>
    <div class="col-md-8">
        @Html.TextBox("DataAgendamento", null, new { @onchange = "horarios();" })
    </div>
    <div class="col-md-8">
        Hora Agendamento
    </div>
    <div class="col-md-8">
        <select id="HoraAgendamento" name="HoraAgendamento"></select>
    </div>
    <input type="submit" value="Enviar" class="btn btn-default" />
</div>
}
<script>
    function horarios() {
        var Dia = $('#DataAgendamento').val();
        $.ajax({
            url: '/Teste/Popula',
            type: "GET",
            dataType: "JSON",
            data: { dia: Dia },
            success: function (horarios) {
                $("#HoraAgendamento").html("");
                $.each(horarios, function (i, hora) {
                    console.log(i);
                    console.log(hora.Hora);
                    $("#HoraAgendamento").append(
                        $('<option></option>').val(hora.Id).text(hora.Hora));
                });
            }
        });
    }
</script>

我的控制器（直到问题发生）

[HttpPost]
    public ActionResult Index(FormCollection form)
    {

        string dt_data;
        dt_data = form["DataAgendamento"] + " " + form["HoraAgendamento"];

问题是我将 form["HoraAgenmento"] 设置为 null。

【问题讨论】：

在开发者工具中使用检查元素进行检查时，您是否得到了填充选项
你正在使用 var Dia = $('#DataAgenmento').val();获得价值。但是您没有分配文本框的 id。@Html.TextBox("name", new { id = "name"}, new { @class= "text-field" })
@KateFernando id 和 name 将由 mvc 框架分配，这里不关心
@Krishna，谢谢...没错。
@Rodney，选择列表中有任何值吗？

标签： javascript c# ajax asp.net-mvc

【解决方案1】：

用代码试试

string dt_data = Request.Form["DataAgendamento"].ToString() + " " + Request.Form["HoraAgendamento"].ToString();

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。

【解决方案2】：

我看不出您将该值设为 null 的原因。我试着做你在这里做的事情，我可以完美地获得这个价值。请看下面我做了什么：

<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script>
    function horarios() { 

    var Dia = $('#DataAgendamento').val();
    $.ajax({
        url: '@Url.Action("Popula")',
        type: "GET",
        dataType: "JSON",
        data: { dia: Dia },
        success: function (horarios) {

            $("#HoraAgendamento").html("");
            $.each(horarios, function (i, hora) {
                console.log(i);
                console.log(hora.Hora);
                $("#HoraAgendamento").append(
                    $('<option></option>').val(hora.Id).text(hora.Hora));
            });
        }
    });
}
</script>

@using (Html.BeginForm("Index1", "Home", FormMethod.Post))
{
    @Html.AntiForgeryToken()
    <div class="row">
        <div class="col-md-8">
            Data Agendamento
        </div>
        <div class="col-md-8">
            @Html.TextBox("DataAgendamento", null, new { @onchange = "horarios();" })
        </div>
        <div class="col-md-8">
            Hora Agendamento
        </div>
        <div class="col-md-8">
            <select id="HoraAgendamento" name="HoraAgendamento"></select>
        </div>
        <input type="submit" value="Enviar" class="btn btn-default" />
    </div>
}
    public JsonResult Popula(string dia)
    {
        var obj = new { Id = 1, Hora = "Drop down" };
        var obj1 = new { Id = 2, Hora = "Drop down 2" };
        List<Object> ob = new List<object>();
        ob.Add(obj);
        ob.Add(obj1);
        return Json(ob, JsonRequestBehavior.AllowGet);
    }

    public ActionResult Index1(FormCollection form)
    {
        string dt_data;
        dt_data = form["DataAgendamento"] + " " + form["HoraAgendamento"];

        return View();
    }

结果：

我的建议是检查 Id 的值是否从 Popula() 正确传递。

【讨论】：

【解决方案3】：

这是一个奇怪的解决方案，但它现在可以工作了。

我刚刚在我的 JavaScript 中将 hora.Id 替换为 hora.Hora，如下所示

旧的：

$('<option></option>').val(hora.Id).text(hora.Hora));

新的：

$('<option></option>').val(hora.Hora).text(hora.Hora));

谢谢大家。

【讨论】：