Question

我在MVC视图中添加了一个jquery datepicker。该视图具有局部视图。我需要根据datepicker的选定日期过滤我的局部视图。我需要根据日期在部分视图上显示按钮。

我添加了这样的局部视图：

<div id="dvGames" class="cornerdate1"> 
    <% Html.RenderPartial("Partial3"); %>                          
</div>

Answer 1

您需要解决几个问题：

您需要具有强类型的局部视图，以便传入正确的数据。现在你没有将模型传递给你的局部视图，所以我认为它不是强类型的。
您需要有一个控制器操作来填充所选日期的模型并将其传递给部分视图。
在选择日期时，您需要一些javascript（即jquery）来请求更新部分视图div。

你的jquery看起来像这样：

$("#myDatePicker").datepicker({
  onSelect: function(dateText, inst) {
    $("#dvGames").load('/Home/Partial3/' + dateText');
  }
});

你的控制器动作看起来像这样：

public ActionResult Partial3(DateTime? id)
{
    MyModel model = new MyModel();
    // Populate model
    return PartialView(model);
}

请注意，如果您的网站位于根目录中，则“/ Home / Partial3 /”只会是路径。您应该使用Url.Action来确定实际路径。通常我使用Ajax.BeginForm（您可以找到大量示例）而不是jquery.load，然后使用jquery在窗体上调用onsubmit。这样我的MVC标记在Ajax.BeginForm的参数中定义局部视图的URL，然后我的jquery代码是完全可移植的，因为它只是提交一个特定的表单而不必知道任何路径。您要转换为datepicker的输入标记必须位于Ajax.BeginForm定义的表单内，以便将其提交给操作。您的部分视图不需要在表单内。只需将“dvGames”指定为UpdateTargetId，并将Ajax调用的结果放在div中。

这个jquery看起来像这样：

$("#myDatePicker").datepicker({
  onSelect: function(dateText, inst) {
    $(this).closest('form').trigger('onsubmit');
  }
});

希望有所帮助。

基于视图上的datepicker在部分视图中过滤数据

1 个答案: