我正在嘗試制作一個簡單的 Todo 應用程式來學習 asp net core mvc。
我做了 CRUD 來管理待辦事項，它運行良好。對于下一步，我想嘗試向其中添加 Ajax（避免重新加載整個頁面），洗掉作業正常，也創建，但是當我想編輯一個待辦事項（基本上是一個表單）時，Ajax 請求的回應設定所有待辦事項的所有輸入都具有相同的值。
如果我將“購買巧克力”更新為“購買巧克力”作為一個待辦事項的標題，則所有其他待辦事項的標題將是“購買巧克力”。
如果我重繪 頁面（或僅重繪 包含待辦事項的部分），一切都會恢復正常，這意味著資料庫僅更新了我想要的待辦事項。
這真的很奇怪，它可能來自這樣一個事實，即輸入具有相同的名稱值（todo 1 title => todo.Title、todo 2 title => todo.Title 等...）即使它適用于所有休息。
這是帶有 todos 容器的頁面：
@model IEnumerable<TodoApp.Models.Todo>
@section Css{
<link href="/css/todos.css" rel="stylesheet" />
<link href="~/lib/fontawesome/css/all.css" rel="stylesheet" />
}
@{
ViewData["Title"] = "List of todos";
}
<h1>My list of Todos</h1>
<span class="error-span" style="color:red"></span>
<div id="main_container">
<i onclick="createTodo()" id="create-button" class="fas fa-plus-circle" title="Add new todo"></i>
<div id="todos_container">
@await Html.PartialAsync("_TodoList", Model)
</div>
</div>
<partial name="_DeleteModal">
@section Scripts{
<script src="~/js/todos.js"></script>
}
這是顯示所有待辦事項的 foreach 也是部分視圖 "_TodoList" ：
@model IEnumerable<TodoApp.Models.Todo>
@foreach (Todo todo in Model)
{
<form class="todo" asp-action="Edit" asp-controller="Todos" data-id="@todo.Id">
<input type="hidden" asp-for="@todo.Id" id="[email protected]" />
<div class="todo-up todo-row">
<textarea autocomplete="off" placeholder="Put the title here..." class="todo-header" asp-for="@todo.Title" id="[email protected]" ></textarea>
<textarea autocomplete="off" placeholder="Put the description here..." class="todo-description" asp-for="@todo.Description" id="[email protected]" ></textarea>
</div>
<div class="todo-down todo-row">
<div class="todo-validation-row">
<span></span>
<i class="fa-regular fa-check todo-edit" alt="Saved"></i>
<span class="tooltip-text">Saved</span> @*Tooltip for edition*@
</div>
<div class="todo-footer">
<div class="todo-updated"><img src="~/assets/img/update.svg" alt="Updated at" /><span>@todo.UpdatedDate</span></div>
<a onclick="showDeleteModal(@todo.Id)" title="Delete todo">
<i class="fas fa-trash"></i>
</a>
</div>
</div>
</form>
}
控制器方法的開頭：
[HttpPatch]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Edit([Bind("Id", "Title", "Description")] Todo todo)
{
if (ModelState.IsValid)
{
var matchingTodo = await _context.Todos.FindAsync(todo.Id);
if (matchingTodo != null)
{
if (GetConnectedUserId() == matchingTodo.UserId)
{
matchingTodo.Title = todo.Title;
matchingTodo.Description = todo.Description;
matchingTodo.UpdatedDate = DateTime.Now;
_context.Update(matchingTodo);
await _context.SaveChangesAsync();
var todos = GetTodosOfConnectedUser();
var partialView = PartialView("_TodoList", todos);
return partialView;
GetTodosOfConnectedUser 方法（回傳屬于當前連接用戶的 Todos 的 Enumerable 物件）：
private IEnumerable<Todo> GetTodosOfConnectedUser()
{
return _context.Todos.Where(t => t.UserId == Convert.ToInt32(HttpContext.User.FindFirst("user_id").Value)).OrderByDescending(t => t.UpdatedDate);
}
和 Ajax 請求的 JS ：
${'.todo'}.on("change", function (ev) {
let form = ev.currentTarget;
editTodo(form);
});
function editTodo(form) {
try {
$.ajax({
type: 'PATCH',
url: form.action,
data: new FormData(form),
processData: false,
contentType: false,
success: function (res) {
$(".error-span").html("");
$('#todos_container').html(res);
},
error: function (err) {
console.log(err);
$(".error-span").html("An error occured please try again.");
}
});
return false;
}
catch (ex) {
console.log(ex);
}
}
感謝您的時間
uj5u.com熱心網友回復：
所以，問題很奇怪。喜歡，真的很奇怪。
我一步一步地跟蹤了正在發生的事情，一切進展順利，然后......所有的表單都沒有明顯的原因得到相同的輸入/文本區域。
我相信這是因為我為每個待辦事項創建了一個表單，這是一種非常糟糕的做法，可能一開始就不想做。如果您遇到過這個問題，只需改變您的處理方式即可。
uj5u.com熱心網友回復：
我展示了我的代碼，希望它可以幫助你：
模型
public class Todo
{
public int Id { get; set; }
public string Title { get; set; }
public string Description { get; set; }
public string UpdatedDate { get; set; }
}
看法
@model IEnumerable<TodoApp.Models.Todo>
@{
ViewData["Title"] = "Index";
}
<h1>Index</h1>
<div id="todos_container">
@foreach (Todo todo in Model)
{
<form class="todo" asp-action="Edit" asp-controller="Todos" data-id="@todo.Id">
<input type="hidden" asp-for="@todo.Id" id="[email protected]" />
<div class="todo-up todo-row">
<textarea autocomplete="off" placeholder="Put the title here..." class="todo-header" asp-for="@todo.Title" id="[email protected]" ></textarea>
<textarea autocomplete="off" placeholder="Put the description here..." class="todo-description" asp-for="@todo.Description" id="[email protected]" ></textarea>
</div>
<div class="todo-down todo-row">
<div class="todo-validation-row">
<span></span>
<i class="fa-regular fa-check todo-edit" alt="Saved"></i>
<span class="tooltip-text">Saved</span> @*Tooltip for edition*@
</div>
<div class="todo-footer">
<div class="todo-updated"><img src="~/assets/img/update.svg" alt="Updated at" /><span>@todo.UpdatedDate</span></div>
<a onclick="showDeleteModal(@todo.Id)" title="Delete todo">
<i class="fas fa-trash"></i>
</a>
</div>
</div>
</form>
}
</div>
@*@section Scripts {*@
<script>
$('.todo').on("change", function (ev) {
let form = ev.currentTarget;
editTodo(form);
});
function editTodo(form) {
try {
$.ajax({
type: 'PATCH',
url: '/todoes/Edit',
data: new FormData(form),
processData: false,
contentType: false,
success: function (res) {
$(".error-span").html("");
$('#todos_container').html(res);
},
error: function (err) {
console.log(err);
$(".error-span").html("An error occured please try again.");
}
});
return false;
}
catch (ex) {
console.log(ex);
}
}
</script>
@*}*@
行動
[HttpPatch]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Edit([Bind("Id", "Title", "Description")] Todo todo)
{
if (ModelState.IsValid)
{
var matchingTodo = await _context.Todos.FindAsync(todo.Id);
if (matchingTodo != null)
{
matchingTodo.Title = todo.Title;
matchingTodo.Description = todo.Description;
matchingTodo.UpdatedDate = DateTime.Now.ToString();
_context.Update(matchingTodo);
await _context.SaveChangesAsync();
var todos = GetTodosOfConnectedUser();
var partialView = PartialView("_TodoList", todos);
return partialView;
}
return BadRequest();
}
return View(todo);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/381009.html
標籤：javascript 查询 阿贾克斯 asp.net-core-mvc asp.net-ajax
上一篇：如何根據按鈕樣式更改Bootstrap5工具提示顏色？
下一篇：JQuery選擇串列項