从partialview中选择列表的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> 

我尝试了很多的可能性，但没有他们工作。当引擎下拉改变时，甚至没有警报不起作用。

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

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