partialviewの選択されたリストのIDはコントローラに渡されません

Question

私のウェブページのいくつかのビューに表示される3つのドロップダウンを持つ部分的なビューがあります。 これは、部分図の最後のドロップダウンです：

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

私は多くの可能性を試したが、どれ、私はコントローラに最後のドロップダウンリストの選択されたIDを送信する必要が

彼らの働いた。エンジンのドロップダウンが変更されても、アラートは機能しません。

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

2つのヒント。 コントローラーのアクションから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になります。

あなたのコードで考えられる問題を特定し、問題を解決するのに役立つことを願っています。