從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。

我希望這可以幫助您識別代碼中可能存在的問題並解決問題。