MVCコントローラの画像タグのurl.Actionにdatepickerの値を渡す方法 - Jquery

Question

フォームでは、コントローラアクションGetImage（retng png画像データ）を呼び出す画像タグがあります。

正常に動作しましたが、現在、fromdateとtodateの2つのdatepicker filedsを紹介しています。また、datepicker値もコントローラに渡したいと思います。これらの日付ピッカー値をコントローラアクションに渡すにはどうすればよいですか。 これは日付フィールドを渡さずに正常に動作するイメージタグです。

img alt="Column Chart" src="@Url.Action("GetColumnChart") 

誰でも助けてくれますか？

Answer 1

これにはかなり簡単なjavascriptが必要です。 「更新」ボタンのクリックイベントを処理し、2つのフィールドの値を取得し、画像ソースを更新するだけです。狡猾なビットは、MVCによって生成されたURLを再利用しています（ルーティングの問題が発生しないように）。 URLが生成されたとき（ページロード時）、最終的なルート値（開始日と終了日）がわからないので、プレースホルダに入れて、スクリプトを使用して毎回使用する値に置き換えます。

document.getElementById("RefreshButton").addEventListener("click", function(event) { 
    var fromdate = document.getElementById("fromdate").value; 
    var todate = document.getElementById("todate").value; 
    var url = '@Url.Action("GetColumnChart", new { fromdate: "FROM-PLACEHOLDER", todate: "TO-PLACEHOLDER" })'; //generate URL with placeholders 
    url = url.replace("FROM-PLACEHOLDER", fromdate); 
    url = url.replace("TO-PLACEHOLDER", todate); 
    document.getElementById("ChartImage").src = url; 
}); 

明らかに、すべての要素にアクセスするためには、適切なIDがあることを確認する必要があります。上記の例は単なる例です。コードに合わせて変更してください。