iT邦幫忙

0

(asp.net core) ViewComponent 更新資料 、 動態操作

  • 分享至 

  • xImage

情景:
頁面有一個表格(table),點擊表格的資料(一行一筆)
會顯示出 項目清單(ul、li)及對應的項目表單(form)

點擊項目清單 就會更換出對應的項目表單
項目表單會秀出資料及編輯儲存功能

目前程式情景:
表格和項目清單是同一個View裡面的
項目清單所對應的表單是放在 View components (每個項目表單一個View components)

溝通的做法都是 把資料包裝成網址帶回去Controller端處裡
最後處裡完 Return View 回來,網頁秀出想要的結果

問題:
這樣做會變成onClick或submit的功能都會重跑(刷新)網頁
除了視覺上的問題外,如果遇到table的資料是多筆的話
如果table的功能需要記憶使用者的table目前觀看頁數、一次觀看幾筆資料 這一類的功能的話,就會變成維護困難

Q1想問看看大大這樣的問題有什麼解法

Q2目前在ViewComponent這部分直接操作上有點卡關
像是ViewComponent在ajax上的困難
程式碼:
https://stackoverflow.com/questions/60369879/asp-net-core-how-to-update-view-component-on-view

感謝各位大大

w4560000 iT邦研究生 5 級 ‧ 2020-02-23 21:39:24 檢舉
是blazor嗎?
不是,是MVC,前人寫好的
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
w4560000
iT邦研究生 5 級 ‧ 2020-02-24 11:11:20
最佳解答

我做了一個demo,是你要的功能嗎?

Test.cs

public class Test
{
    public string Test1 { get; set; }
    public string Test2 { get; set; }
    public string Test3 { get; set; }
}

HomeController.cs

public class HomeController : Controller
    {
        private readonly List<Test> Result = new List<Test>()
            {
                new Test()
                {
                    Test1 = "data1-Test1",
                    Test2 = "data1-Test2",
                    Test3 = "data1-Test3"
                },
                new Test()
                {
                    Test1 = "data2-Test1",
                    Test2 = "data2-Test2",
                    Test3 = "data2-Test3"
                }
            };

        public ActionResult Index()
        {
            return this.View(this.Result);
        }

        [HttpPost]
        public ActionResult Search(string text)
        {
            List<Test> result = this.Result.Where(w => w.Test1.Contains(text)).ToList();

            // 模擬查詢時間
            Thread.Sleep(3000);

            return this.View(result);
        }

Index.cshtml

@model List<Test>
@{
    ViewBag.Title = "Home Page";
}

<div>
    <br />
    <input type="text" id="text" />
    <button>查詢</button>
    <br /><br /><br />
    @Html.Partial("Search", Model)
</div>

<span id="loading" style="display:none;">loading...</span>

<script type="text/javascript">
    $('button').click(() => {
        $('.table').empty().html($('#loading').html());

        let postData = {
            text: $('#text').val()
        };

        $.post('@Url.Action("Search", "Home")', postData, (html) => $('.table').html(html));
    });
</script>

PartialView: Search.cshtml

@model List<Test>
@{
    Layout = null;
}
<table class="table">
    <thead>
        <tr>
            <th>欄位1</th>
            <th>欄位2</th>
            <th>欄位3</th>
        </tr>
    </thead>
    <tbody>
        @foreach (Test a in Model)
        {
            <tr>
                <td>@a.Test1</td>
                <td>@a.Test2</td>
                <td>@a.Test2</td>
            </tr>
        }
    </tbody>
</table>

至於要保存使用者的查詢條件與當前頁數的話,送到Controller的Model多加幾個屬性來放條件,
前端就不需要改變,因為只會刷新查詢結果,不會整頁刷新不用再把當前頁數塞回去,確認查詢結果是否正確就好。

看更多先前的回應...收起先前的回應...

感謝回答,我再思考這個方案。
目前是在想怎麼更新ViewComponent,不用再return view
例如:https://stackoverflow.com/questions/60369879/asp-net-core-how-to-update-view-component-on-view

w4560000 iT邦研究生 5 級 ‧ 2020-02-24 14:15:35 檢舉

看起來你在後端是想單純回傳資料,不要回傳畫面,像是ajax去接API回來更新資料,但我的理解是.net mvc 畫面是Server render,就算你接值回來還是要自己去改DOM。

w4560000 iT邦研究生 5 級 ‧ 2020-02-24 14:18:29 檢舉

你是覺得要建cshtml很麻煩而不要return view嗎?
若你ajax範圍只限在table更新資料,在js拉個共用function來處理dom異動也可以

目前依stackoverflow的解答有做出要的效果,主要是ViewComponent有好幾個,都是維護表單。光是原本項目清單的事件都是寫成return view。

主要是為了表單狀態儲存加功能好維護(小生能力弱),才想此辦法

也感謝大大細心回答我的問題>口<

我要發表回答

立即登入回答