使用RazorPagePartial創建動態html日期表

我正在開發一個 .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);
        
    });

});

網頁版

<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) 提交表單

This works, however, if the user wants to increase or decrease the number of days in the table, they select a different number from the drop down list and reload the partial, however, all of the initial values they would have input against the initial dates within the table are lost.

My Questions

1. Is there a better approach to creating my request?
2. If not, is there a way I can keep the table values in the partial even if it is reloaded?

Thank you.

uj5u.com熱心網友回復：

當您設定tableValuefor 時tableDate，您可以添加一個onchange事件來監視是否tableValue更改。然后將值添加到串列并將其作為 json 字串傳遞給后端。在后端，您可以反序列化這個 json 并與 new 進行比較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事件。

標籤：jquery ajax asp.net-core razor-pages partial-views

上一篇：從資料庫中洗掉記錄的按鈕不起作用。休息阿賈克斯

下一篇：休眠與繼承的關系