使用 Razor Page Partial 创建动态 html 日期表

Question

我正在开发一个 .NET Core 3.1 Razor 页面应用程序。

请求

我需要创建一个页面，允许用户选择一个日期，将 X 天添加到该日期，然后生成一个包含这些日期的表格，并能够针对每个日期添加一个值。

接近

我有一个页面，允许用户选择开始日期（使用日期选择器）和一个数字（从下拉列表中），表示要添加到开始日期的总天数。

一旦用户点击 Set 按钮，就会对我的页面模型中的 Get Handler 进行 JQuery 和 Ajax (GET) 调用：

JQuery/Ajax

<script type='text/javascript'>
$(document).ready(function () {
    //alert("Ready!");

    $("#load").click(function () {
        //alert("button");
        var startDate = $("#StartDate").val();
        var duration = $('#Duration').val();
        var turl = '/SPC/Index?handler=CarPartial&StartDate=' + startDate + '&Duration=' + duration;        
            $('#spc_data_table').load(turl);
        
    });

});

CSHTML

<div class="row">
 <div id="spc_data_table" class="col-md-12">


 </div>
</div>

页面模型

[BindProperty]
public IList<SpcTable> data { get; set; }

public class SpcTable
{
    public int id { get; set; }
    public string tableDate { get; set; }
    public string tableValue { get; set; }
}

public PartialViewResult OnGetCarPartial(string StartDate, string Duration)
    {
        data = new List<SpcTable>();
        var EndDate = Convert.ToDateTime(StartDate).AddDays(Convert.ToDouble(Duration) - 1);
        int count = 0;

        for (var date = Convert.ToDateTime(StartDate); date <= EndDate; date = date.AddDays(1))
        {
            data.Add(new SpcTable { id = count, tableDate = date.ToShortDateString(), tableValue = null });
            count++;
        }

        return Partial("_SpcTable", data);
    }

部分

<script type='text/javascript'>
$(document).ready(function () {

    $('#submit').on('click', function (evt) {
        evt.preventDefault();
        $.post('', $('form').serialize(), function () {
            alert('Posted using jQuery');
        });
    });

});

<table class="table">
    <tr>
        <td></td>
        <td>Date</td>
        <td>Value</td>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                <input type="hidden" name="data.Index" value="@item.id" />
                <input type="hidden" name="data[@item.id].id" value="@item.id" />
                @item.id
            </td>
            <td><input name="data[@item.id].tableDate" value="@item.tableDate" class="form-control form-control-sm" readonly/></td>
            <td><input name="data[@item.id].tableValue" value="@item.tableValue" class="form-control form-control-sm" /></td>

        </tr>
    }

</table>

<div class="form-group row">
    <button class="btn btn-primary" id="submit">Submit</button>
</div>

然后以 HTML 表格的形式返回部分页面，其中包含每个日期的一行。然后用户在每个日期旁边添加一个值，然后通过另一个 JQuery/Ajax 调用 (POST) 提交表单

但是，如果用户想要增加或减少表中的天数，他们可以从下拉列表中选择不同的数字并重新加载部分，但是，他们将输入的所有初始值表中的初始日期会丢失。

我的问题

1. 有没有更好的方法来创建我的请求？
2. 如果没有，有没有办法即使重新加载也可以将表值保留在部分中？

谢谢。

Answer 1

当您为tableDate 设置tableValue 时，您可以添加一个onchange 事件来监控tableValue 是否更改。然后将值添加到列表并将其作为 json 字符串传递给后端。在后端，您可以反序列化这个 json 并与新的tableDate 进行比较，将值添加到现有的tableDate。

这是一个工作演示：

查看：

@page
@model IndexModel
<form>
    <input id="StartDate" type="date" />
    <select id="Duration">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <input type="button" id="load" value="set" />
    <div class="row">
        <div id="spc_data_table" class="col-md-12">
   
        </div>
    </div>
</form>

视图中的 JS：

@section Scripts
{
<script>
    var obj = {};
    $(document).ready(function () {
        $("#load").click(function () {
            var startDate = $("#StartDate").val();
            var duration = $('#Duration').val();
            var turl = '?handler=CarPartial&StartDate=' + startDate + '&Duration=' + duration;
            if (jQuery.isEmptyObject(obj)) {
                $('#spc_data_table').load(turl);
            }
            else {
                turl = turl + "&json=" + JSON.stringify(obj);
                $('#spc_data_table').load(turl);
                obj = {};   
            }
        });

    });
    function saveValue(objectValue) {
        var value = objectValue.value;
        var keyName = $(objectValue).closest("td").prev("td").find("input").val()
        obj[keyName] = value;
    }
</script>
}

局部视图：

<table class="table">
    <tr>
        <td></td>
        <td>Date</td>
        <td>Value</td>
    </tr>  
    @foreach (var item in Model)
    {
        <tr>
            <td>
                <input type="hidden" name="data.Index" value="@item.id" />
                <input type="hidden" name="data[@item.id].id" value="@item.id" />
                @item.id
            </td>
            <td><input name="data[@item.id].tableDate" value="@item.tableDate" class="form-control form-control-sm" readonly /></td> 
                         //add this event....
            <td><input onchange="saveValue(this);" name="data[@item.id].tableValue" value="@item.tableValue" class="form-control form-control-sm" /></td>

        </tr>
    }

</table>

页面模型：

public class IndexModel : PageModel
{
    public IActionResult OnGet()
    {

        return Page();
    }

    [BindProperty]
    public IList<SpcTable> data { get; set; }

    public class SpcTable
    {
        public int id { get; set; }
        public string tableDate { get; set; }
        public string tableValue { get; set; }
    }
    public PartialViewResult OnGetCarPartial(string StartDate, string Duration, string json)
    {

        data = new List<SpcTable>();
        var EndDate = Convert.ToDateTime(StartDate).AddDays(Convert.ToDouble(Duration) - 1);
        int count = 0;

        for (var date = Convert.ToDateTime(StartDate); date <= EndDate; date = date.AddDays(1))
        {
            data.Add(new SpcTable { id = count, tableDate = date.ToShortDateString(), tableValue = null });
            count++;
        }
        //judge if the set tableValue for tableDate in frontend
        if (!string.IsNullOrEmpty(json))
        {
            //deserialize to the model
            var model = System.Text.Json.JsonSerializer.Deserialize<Dictionary<string, string>>(json);
            foreach (var item in model)
            {
                foreach (var date in data)
                {
                    //if you set value for tableDate
                    //and the tableDate still exist after filtering
                    if (item.Key == date.tableDate)
                    {
                        //set the value for this tableDate
                        date.tableValue = item.Value;
                    }
                }
            }
        }
        return Partial("_SpcTable", data);
    }

}

注意：

如果您进行了第二次操作，将触发 onchange 事件。也就是说，当你填充一个输入时，你需要选择一个选择或者填充另一个输入或者点击页面的空白处来触发onclick事件。