部分视图中选定列表的 ID 未传递给控制器

Question

我有一个包含三个下拉菜单的局部视图，显示在我网页的几个视图中。

我需要将最后一个下拉列表的选定 ID 发送到控制器：这是局部视图中的最后一个下拉菜单：

 <div class="col-sm-10">
   @Html.DropDownList("engines", new SelectList(string.Empty, "Value", "Text"), "--Select engine--", new { @class = "dropdown-toggle form-control" })
 </div>

我尝试了很多可能性，但其中 none 行得通。当引擎下拉列表发生变化时，甚至警报都不起作用。

  $(document).ready(function () {
    $("#engines").change(function () {
        document.getElementById("btnSearch").disabled = false;
        document.getElementById("result").hidden = false;


        alert($('#engines').val());
    })

我试过这种方法，但是没有调用我的控制器的方法：

var UrlSettings = {
    ModelsUrl: '@Url.Action("GetModels", "Home")',
    EngineUrl: '@Url.Action("GetEngines", "Home")',
    EngineChange: '@Url.Action("ChangeEngine", "Home")'
}

  $(document).ready(function () {
    $("#engines").change(function () {
        document.getElementById("btnSearch").disabled = false;
        document.getElementById("result").hidden = false;

        $.ajax({
            type: 'POST',
            url: UrlSettings.EngineChange,
            dataType: 'json',
            data: { id: $("#engines").val() },
            success: function (engines) {                    
            },
            error: function (ex) {                   
            }
        });
    })`enter code here`
});

这是来自控制器的方法，我需要将 id 作为参数传递

public JsonResult ChangeEngine(int? id)
    {
        return Json(null);
    }

这是我的完整局部视图Html代码：

<div class="car-filter-wrapper">
@*@using (Ajax.BeginForm("SearchForCars", "Home", null))//, new AjaxOptions { UpdateTargetId = "DivCategoriesTree", OnSuccess = "success", HttpMethod = "Post" }, new { make = "makes" }))
    {*@
@using (Html.BeginForm("SearchForCars", "Home", FormMethod.Post))
{
    <div class="col-sm-4" style="height: 10em;display: flex;align-items: center ; padding-top:25px;">
        <i class="fa fa-car" style="font-size:60px;color:red; padding-left:20px;"></i>
        <strong style="padding-left:20px;"></strong>
    </div>

    <div class="col-sm-4">
        <div style="padding-top:15px;">
            <form class="form-control-static">
                <div class="form-group">
                    <div class="row">
                        <div class="col-sm-10">
                            @if (ViewData.ContainsKey("makes"))
                        {
                        @Html.DropDownList("makes", ViewData["makes"] as List<SelectListItem>, "--Select--", new { @class = "dropdown-toggle form-control" })
                            }
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-10">
                            <p></p>
                            @Html.DropDownList("models", new SelectList(string.Empty, "Value", "Text"), "--Select--", new { @class = "dropdown-toggle form-control" })
                        </div>
                    </div>
                    <div class="row">
                        <p></p>
                        <div class="col-sm-10">
                            @Html.DropDownList("engines", new SelectList(string.Empty, "Value", "Text"), "--Select--", new { @class = "dropdown-toggle form-control" })
                        </div>
                    </div>
                </div>

            </form>

        </div>
    </div>

    <div class="col-sm-4" style="height: 10em;display: flex;align-items: center ; padding-top:25px;">
        <input type="submit" id="btnSearch" onclick="location.href='@Url.Action("SearchForCars", "Home")'" class="btn btn-default active" value="Search" disabled="disabled" style="width:150px;" />
    </div>
}

你能帮忙解决这个问题吗？

Answer 1

我已经实施了与您相同的解决方案，并且对我来说效果很好。

下面的下拉列表包含 class AudioClass 的一些硬编码项目。

@Html.DropDownList("engines", new SelectList(new List<AudioClass> {new AudioClass {Id=1, Name = "Audio1"}, new AudioClass { Id = 2, Name = "Audio2" } }, "Id", "Name"), "--Select engine--", new { @class = "dropdown-toggle form-control" })

我的脚本块如下所示。

<script>
var UrlSettings = {
    EngineChange: '@Url.Action("Process", "Home")',
}
$(document)
    .ready(function() {
        $("#engines")
            .change(function() {
                $.ajax({
                    type: 'POST',
                    url: UrlSettings.EngineChange,
                    dataType: 'json',
                    data: { id: $("#engines").val() },
                    success: function (engines) {                         
                        alert("success");
                    },
                    error: function (ex) {
                        alert(ex);
                    }
                });
            });
    });
</script>

一些提示。从控制器操作返回 Json(null) 会 return 到 ajax 的错误块所以确保你从服务器 return 有效 JSON 这样你就不会得到 false正面。

我没有包含 document.getElementById 行，因为它们与我无关。但是，如果您将它包含在代码中，那么请确保这些元素存在于 DOM 中，或者在处理它们之前进行空检查，否则代码将在这些行上出错并调用 AJAX不会发生。

if (document.getElementById("btnSearch") != null) {
    document.getElementById("btnSearch").disabled = false;
}

if (document.getElementById("result") != null) {
    document.getElementById("result").hidden = false;
}

您将在开发者工具的控制台中看到 Uncaught TypeError: Cannot set property 'disabled' of null 错误。

希望本文能帮助您找出代码中可能存在的问题并解决问题。

部分视图中选定列表的 ID 未传递给控制器

Id of a selectedlist from partialview is not passed to controller

ajax

asp.net-mvc

partial-views