我在 ajax 中有這個表單方法的代碼
$.ajax({
type: "GET",
url: "/MainPage/GetAllRecords",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
console.log(data);
$.each(data, function (key, value) {
$("#loadNotes").append(
'<form method="GET">'
'<div style = "background-color: #fff;position:relative; height: 8rem; border: #80808012 solid 1px; /* margin-top: 1rem; */ box-shadow: blue; margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis; /* overflow-wrap: break-word; */ ">'
'<a asp-controller="MainPage" asp-action="ShowRecord" asp-route-id="' value.id '"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit">' value.title '</a>'
'<p style="color: #5b5454;font-size: 11pt;height: 3rem; white-space:unset" >' value.description '</p>'
'</div>'
'</form>'
) ;
});
},
error: function (response) {
alert(response);
}
});
我已經嘗試將表單方法和其他元素放在 cshtml 檔案下，然后從那里開始作業，它正在呼叫控制器和視圖，但不是來自 ajax。
我錯過了什么？請幫忙謝謝
uj5u.com熱心網友回復：
這是一個完整的作業演示：
模型：
public class TestModel
{
public int Id { get; set; }
public string Title { get; set; }
public string Description { get; set; }
}
看法：
<div id=loadNotes>
</div>
@section Scripts
{
<script>
$(function(){
$.ajax({
type: "GET",
url: "/MainPage/GetAllRecords",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
console.log(data);
$.each(data, function (key, value) {
$("#loadNotes").append(
'<form method="GET">'
'<div style = "background-color: #fff;position:relative; height: 8rem; border: #80808012 solid 1px; /* margin-top: 1rem; */ box-shadow: blue; margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis; /* overflow-wrap: break-word; */ ">'
//change here.......
'<a href="/MainPage/ShowRecord/' value.id '"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit">' value.title '</a>'
'<p style="color: #5b5454;font-size: 11pt;height: 3rem; white-space:unset" >' value.description '</p>'
'</div>'
'</form>'
) ;
});
},
error: function (response) {
alert(response);
}
});
})
</script>
}
控制器：
public class MainPageController : Controller
{
public IActionResult GetAllRecords()
{
//hard-coded the data for easy testing
var model = new List<TestModel>()
{
new TestModel(){Id=1,Title="aa",Description="des1"},
new TestModel(){Id=2,Title="bb",Description="des2"},
new TestModel(){Id=3,Title="cc",Description="des3"}
};
return Json(model);
}
}
筆記：
標簽助手被解釋。換句話說，Razor 必須將它們視為實際標簽才能替換它們。在這里，它只是一個 JS 字串，Razor 不會亂用它。所以它不會通過js生成href。
您需要手動設定 href 值。把js改成：
'<a class="stretched-link" href="/MainPage/ShowRecord/' value.id '"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit">' value.title '</a>'
uj5u.com熱心網友回復：
您作為 GET 傳遞的型別屬性應該是我想的方法。
剩下的代碼似乎沒問題。您是否檢查過瀏覽器控制臺是否有錯誤？
uj5u.com熱心網友回復：
使用反引號 ``
$("#loadNotes").append(`
<form method="GET">
<div class="container py-3 px-4" style = "background-color: #fff;position:relative; height: 8rem; border: #80808012 solid 1px; box-shadow: blue; margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis; ">
<a class="stretched-link" asp-controller="MainPage" asp-action="ShowRecord" asp-route-id="` value.id `"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit"> ` value.title `</a>
<p style="color: #5b5454;font-size: 11pt;height: 3rem; white-space:unset" class="text-break text-truncate">` value.description `</p>
</div>
</form>
`);
uj5u.com熱心網友回復：
也許首先將html“表單標簽”存盤在變數中，然后使用 .html() 將表單附加到#loadNotes
并確保在“#loadNotes”之后添加（檔案）以絕對找到檔案中的元素。$("#loadNotes", document)
還有成功：功能和錯誤：功能有點舊。嘗試 .done 和 .fail
Ajax 的舊方法。
$.ajax({
type: "GET",
url: "/MainPage/GetAllRecords",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
console.log(data);
var html_forms = '';
$.each(data, function (key, value) {
html_forms = '<form method="GET">'
'<div style = "background-color: #fff;position:relative; height: 8rem; border: #80808012 solid 1px; /* margin-top: 1rem; */ box-shadow: blue; margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis; /* overflow-wrap: break-word; */ ">'
'<a asp-controller="MainPage" asp-action="ShowRecord" asp-route-id="' value.id '"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit">' value.title '</a>'
'<p style="color: #5b5454;font-size: 11pt;height: 3rem; white-space:unset" >' value.description '</p>'
'</div>'
'</form>';
});
$("#loadNotes", document).html(html_forms);
},
error: function (response) {
alert(response);
}
});
Ajax 的新方法
$.ajax({
type: "GET",
url: "/MainPage/GetAllRecords",
dataType: "json",
contentType: "application/json; charset=utf-8",
}).done(function(data) {
console.log(data);
var html_forms = '';
$.each(data, function (key, value) {
html_forms = '<form method="GET">'
'<div style = "background-color: #fff;position:relative; height: 8rem; border: #80808012 solid 1px; /* margin-top: 1rem; */ box-shadow: blue; margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis; /* overflow-wrap: break-word; */ ">'
'<a asp-controller="MainPage" asp-action="ShowRecord" asp-route-id="' value.id '"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit">' value.title '</a>'
'<p style="color: #5b5454;font-size: 11pt;height: 3rem; white-space:unset" >' value.description '</p>'
'</div>'
'</form>';
});
$("#loadNotes", document).html(html_forms);
}).fail(function(response) {
alert(response);
});
編輯：將此部分更改為 < button
由此
'<a class="stretched-link" asp-controller="MainPage" asp-action="ShowRecord" asp-route-id="' value.id '"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit">' value.title '</a>'
對此
'<button class="stretched-link" asp-controller="MainPage" asp-action="ShowRecord" asp-route-id="' value.id '"style = "color: #6d1cccbf; font-weight: 500; text-decoration:underline;" type="submit">' value.title '</button>'
并對此添加操作
html_forms = '<form action="php_controller.php" method="GET">'
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/409251.html
標籤：
上一篇：如何通過laravel接收郵件？
下一篇：EFCore-未知關系定義外鍵