如何将 datepicker 值传递给 url.MVC 控制器中图像标签的操作 - Jquery

Question

在表单中，我有调用控制器操作GetImage 的图像标记（返回 png 图像数据）。

它工作正常，但现在我引入了两个日期选择器文件 - fromdate 和 todate，我还想将 datepicker 值传递给控制器​​。如何将这些日期选择器值传递给控制器​​操作。 这是一个图像标签，无需传递日期字段即可正常工作。

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

有人可以帮忙吗？

Answer 1

为此，您需要一些相当简单的 javascript。您只需要处理“刷新”按钮的单击事件，获取两个字段的值并更新图像源。巧妙之处在于重用 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 才能访问它们 - 我上面给出的只是示例。更改它们以适合您的代码。