在mvc

时间:2017-07-04 13:31:55

标签: jquery asp.net-mvc datepicker

我的视图中有一张桌子。我在我的视图中添加了一个日期选择器,它将两个选定日期发布到我的Controller(dateFrom和dateTo)。然后我比较我的对象的日期并将它们传递回View。数据传递都很好,但我无法刷新表并显示新数据。

我尝试了一些不同的东西,但基本上它看起来像。单击datepicker按钮运行此函数:

function Search() {
    $(".myTable").empty();
    var dateFrom = $("#dateFrom").val();
    var dateTo = $("#dateTo").val();

    $.ajax({
        url: "/myDirectory/myController",
        method: "POST",
        data: {
            dateFrom: dateFrom,
            dateTo: dateTo
        },
        success: function (asd123) {
            $(".myTable").show();
        }
    })
}

但是,此功能只会清空数据并且不会显示新数据。我应该在这看什么?

1 个答案:

答案 0 :(得分:0)

您需要为表格包含创建单独的部分视图,以便您可以通过Ajax调用刷新该包含,请按照以下流程执行:

您的主视图Ajax Call应该是:

function Search() {
$(".myTable").empty();
    var dateFrom = $("#dateFrom").val();
    var dateTo = $("#dateTo").val();
$.ajax({
   url: "/PartialViewAction/myController",
   type: "POST",
   dataType: "html",
   data: {
            dateFrom: dateFrom,
            dateTo: dateTo
        },
   success: function (data) {
       $(".myTable").html(data);
       $(".myTable").show();

   }
});
}

主视图:删除表内容Div并添加部分视图并添加下面而不是

//这是在主视图上调用部分视图的代码

<div id="TableContent" Class="myTable">
    @Html.Partial("_PartialViewForTable", Model)
</div>

创建名为“_PartialViewForTable”的部分视图并添加邮件视图的表内容 //不要在局部视图

上调用布局页面
@model Application.Model.YourModel
<div id="TableData">
//Your Table Data 
</div>

您的控制器操作应该是:

// Action正在返回部分视图而不是主视图

[HttpPost]
public ActionResult PartialViewAction(DateTime? dateFrom = null, DateTime? dateTo= null)
{
 YourModel objYourModel = new YourModel();
 //Bind data in objYourModel and retun to your view
 return PartialView("_PartialViewForTable", objYourModel);
}