要在C#中实现AJAX无刷新评论,你需要使用ASP.NET MVC或Web Forms。这里我将给出一个简单的ASP.NET MVC示例。
首先,创建一个新的ASP.NET MVC项目。
在Models
文件夹中,创建一个名为Comment
的模型类:
public class Comment
{
public int Id { get; set; }
public string Username { get; set; }
public string Content { get; set; }
}
Controllers
文件夹中,创建一个名为CommentController
的控制器类:using System.Web.Mvc;
using YourProjectName.Models;
public class CommentController : Controller
{
// 用于存储评论的静态列表
private static List<Comment> comments = new List<Comment>();
// GET: Comment
public ActionResult Index()
{
return View(comments);
}
[HttpPost]
public JsonResult AddComment(string username, string content)
{
var comment = new Comment
{
Id = comments.Count + 1,
Username = username,
Content = content
};
comments.Add(comment);
return Json(comment);
}
}
Views/Comment
文件夹中,创建一个名为Index.cshtml
的视图文件:@model IEnumerable<YourProjectName.Models.Comment>
@{
ViewBag.Title = "Comments";
}
<h2>Comments</h2>
<div id="comments">
@foreach (var comment in Model)
{
<div>
<strong>@comment.Username</strong>: @comment.Content
</div>
}
</div>
<form id="commentForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required />
<br />
<label for="content">Comment:</label>
<textarea id="content" name="content" required></textarea>
<br />
<button type="submit">Submit</button>
</form>
@section Scripts {
<script src="~/Scripts/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$("#commentForm").on("submit", function (e) {
e.preventDefault();
$.ajax({
url: "/Comment/AddComment",
method: "POST",
data: $(this).serialize(),
success: function (data) {
var commentHtml = "<div><strong>" + data.Username + "</strong>: " + data.Content + "</div>";
$("#comments").append(commentHtml);
$("#commentForm")[0].reset();
},
error: function (error) {
console.log("Error: ", error);
}
});
});
});
</script>
}
现在,当用户提交评论时,页面将不会刷新,而是通过AJAX添加到评论列表中。请注意,这个示例仅用于演示目的,实际项目中可能需要进行更多的错误处理和安全性考虑。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。