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>

我尝试了很多可能性，但没有一个可行。当引擎下拉列表发生变化时，警报甚至都不起作用。

  $(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

我已经实现了和你一样的解决方案，它对我来说很好。

下面的下拉列表包含一些类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)将返回到ajax的错误块，因此请确保从服务器返回有效的JSON，这样就不会出现误报。

我没有列出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。

我希望这可以帮助您识别代码中可能出现的问题并解决问题。

来自partialview的所选列表的ID不会传递给控制器

1 个答案:

来自partialview的所选列表的ID不会传递给控制器​​

1 个答案:

来自partialview的所选列表的ID不会传递给控制器