【问题标题】:Reload table after changing filter更改过滤器后重新加载表
【发布时间】:2022-01-19 15:47:12
【问题描述】:

我正在开发一个小型 ASP.Net Core MVC 应用程序,但我被困在重新加载表中。在控制器中,我从数据库中读取数据并将其解析到视图中。在这个视图中,数据将通过使用模式和 for-each 循环来显示。到目前为止,一切都很好。在同一页面上,我有许多输入控件来设置时间窗口和 ID 范围。基于此过滤器,我想在按下“应用过滤器”按钮后重新加载表格。

按下按钮后,我调用 JQuery 方法并形成一个对象,以便可以使用 AJAX-Post 将其解析为相应的操作方法。当我调试时,我会点击 Action 方法并且填充的过滤器对象是好的。在这个操作方法中,我调用数据库,它的结果应该被发送回视图。我可以看到调用了数据库并且列表更短/过滤了。

感谢任何帮助。

查看以填充表格:

<!-- CSHTML File -->
@if (Model.Count() > 0)
{
    <div class="table">
        <table id="mainTable" class="table table-hover">
            <thead>
                <tr>
                    @*<th scope="col">ID</th>*@
                    <th scope="col">ID</th>
                    <th scope="col">Block/Sample ID</th>
                    <th scope="col">Timestamp</th>
                    <th scope="col">Usabele rows in file</th>
                    <th scope="auto"></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var sample in Model)
                {
                    <tr height: 10px>
                        <td>@sample.Id</td>
                        <td>@sample.SampleID</td>
                        <td>@sample.Timestamp</td>
                        <td>@sample.UsableRows</td>
                        <td>
                            <a asp-controller="ShadowTable" asp-action="details" asp-route-ID="@sample.Id"
                                class="btn btn-outline-primary mx-1 rounded-pill">Details</a>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
}
else
{
    <h3>No samples available yet !</h3>
}

jQuery Ajax 代码块:

$(function () {
    $("#btnApplyFilter").click(function () {
        var FilterObject = {};
        FilterObject.BlockIdStart = $("#blockStartId").val();
        FilterObject.BlockIdEnd = $("#blockEndId").val();
        FilterObject.Start = $("#dtpStartDate").val();
        FilterObject.End = $("#dtpEndDate").val();

        var url = "@Url.Action("GetFilteredResult", "DataOverview")";
        
        $.ajax({
            type: "POST",
            url: url,
            data: JSON.stringify(FilterObject),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function () {
                $("#mainTable").load("/DataOverview/Index");
            }
        });
    });
});

索引操作方法:

public ActionResult Index() 
{
    List <Sample> sampleList;

    try{                  // todo: add logging
        sampleList = _databaseAccess.GetFilteredList(-1, -1, DateTime.Now.AddDays(-7), DateTime.Now); 
    }
    catch (Exception ex){ // todo: add logging
        throw;
    }
    return View(sampleList);
}

读取过滤数据的动作方法:

[HttpPost]
public IActionResult GetFilteredResult([FromBody]FilterObject filterObject)
{
    #region Variables
        List<Sample> sampleList;
        DateTime startDdate = DateTime.Now;
        DateTime endDate = DateTime.Now;
        ContentResult contentResult = null;
    #endregion

    #region Perform some data validation
        int blokStartId =string.IsNullOrEmpty( filterObject.BlockIdStart) == true ?-1: Convert.ToInt32( filterObject.BlockIdStart);
        int blokEndId = string.IsNullOrEmpty(filterObject.BlockIdEnd) == true ? -1 : Convert.ToInt32(filterObject.BlockIdEnd);

        if (string.IsNullOrEmpty(filterObject.Start) ==false)
            startDdate = Convert.ToDateTime(filterObject.Start);

        if (string.IsNullOrEmpty(filterObject.End)==false )
            endDate = Convert.ToDateTime(filterObject.End);
    #endregion

    try{
        var options = new JsonSerializerOptions(JsonSerializerDefaults.Web);
        options.Converters.Add(new JsonStringEnumConverter());
        sampleList = _databaseAccess.GetFilteredList(blokStartId, blokEndId, startDdate, endDate);

        contentResult = new ContentResult
        {
            StatusCode = (int)HttpStatusCode.OK,
            ContentType = "application/json",
            Content = JsonSerializer.Serialize(sampleList, options)
        };

    }
    catch (Exception){ //PK : Add some logging
        throw;
    }
    return contentResult;
}

【问题讨论】:

    标签: jquery ajax asp.net-core-mvc


    【解决方案1】:

    如果你想在点击按钮后重新加载表格,你可以尝试将表格放入部分视图,并创建一个返回部分视图的动作。点击按钮后,在@987654321加载部分视图@:

    Views/Shared/Partial.cshtml:

    @model List<Sample>
    <table id="mainTable" class="table table-hover">
                <thead>
                    <tr>
                        @*<th scope="col">ID</th>*@
                        <th scope="col">ID</th>
                        <th scope="col">Block/Sample ID</th>
                        <th scope="col">Timestamp</th>
                        <th scope="col">Usabele rows in file</th>
                        <th scope="auto"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var sample in Model)
                    {
                        <tr height: 10px>
                            <td>@sample.Id</td>
                            <td>@sample.SampleID</td>
                            <td>@sample.Timestamp</td>
                            <td>@sample.UsableRows</td>
                            <td>
                                <a asp-controller="ShadowTable" asp-action="details" asp-route-ID="@sample.Id"
                                    class="btn btn-outline-primary mx-1 rounded-pill">Details</a>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
    

    查看:

    @if (Model.Count() > 0)
    {
        <div class="table">
            @Html.Partial("Partial", Model)
        </div>
        
    }
    else
    {
        <h3>No samples available yet !</h3>
    }
    

    js:

    $(function () {
        $("#btnApplyFilter").click(function () {
            var FilterObject = {};
            FilterObject.BlockIdStart = $("#blockStartId").val();
            FilterObject.BlockIdEnd = $("#blockEndId").val();
            FilterObject.Start = $("#dtpStartDate").val();
            FilterObject.End = $("#dtpEndDate").val();
    
            var url = "@Url.Action("GetFilteredResult", "DataOverview")";
            
            $.ajax({
                type: "POST",
                url: url,
                data: JSON.stringify(FilterObject),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function () {
                    $(".table").load("/DataOverview/Index1");
                }
            });
        });
    });
    

    动作:

        public ActionResult Index1() 
        {
            List <Sample> sampleList;
        
            try{                  // todo: add logging
                sampleList = _databaseAccess.GetFilteredList(-1, -1, DateTime.Now.AddDays(-7), DateTime.Now); 
            }
            catch (Exception ex){ // todo: add logging
                throw;
            }
            return PartialView("Partial",sampleList);
        }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2011-10-28
      • 1970-01-01
      • 1970-01-01
      • 2011-03-29
      • 1970-01-01
      • 1970-01-01
      • 2018-02-16
      相关资源
      最近更新 更多