情景:
頁面有一個表格(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
感謝各位大大
我做了一個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
看起來你在後端是想單純回傳資料,不要回傳畫面,像是ajax去接API回來更新資料,但我的理解是.net mvc 畫面是Server render,就算你接值回來還是要自己去改DOM。
你是覺得要建cshtml很麻煩而不要return view嗎?
若你ajax範圍只限在table更新資料,在js拉個共用function來處理dom異動也可以