在mvc中使用jquery刷新表onclick

Question

我的视图中有一张桌子。我在我的视图中添加了一个日期选择器，它将两个选定的日期发布到我的控制器中（dateFrom 和 dateTo）。然后我比较对象的日期并将它们传回视图。数据传递一切正常，但我在刷新表格和显示新数据时遇到了问题。

我尝试了一些不同的方法，但基本上是这样的。此功能在点击日期选择器按钮时运行：

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();
        }
    })
}

不过，这个函数只是清空数据而不显示新数据。我应该在这里看什么？

Answer 1

您需要为表格内容创建单独的部分视图，以便您可以通过 Ajax 调用刷新该内容，请遵循以下流程：

您的主要视图 Ajax Call 应该是：

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

主视图：删除表格内容 Div 并添加部分视图并在下面添加而不是那个

//这里是在主视图上调用Partial view的代码

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

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

@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);
}