Идентификатор выбранного списка из частичного просмотра не передается контроллеру

Question

У меня есть частичный вид с тремя выпадающими списками, который отображается на нескольких веб-страницах.

Мне нужно отправить выбранный идентификатор последнего выпадающего списка к контроллеру: Это последний выпадающий в частичном виде:

<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` 
}); 

Это метод от контроллера, где мне нужно передать идентификатор в качестве параметра

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.

Я надеюсь, что это поможет вам определить возможные проблемы в вашем коде и решить проблему.