在我的网站上，我有一个类似于Facebook的聊天页面。我已经用基本的表单提交方法实现了它，当我发布内容时，它将刷新整个页面。现在，我需要使用ajax / jquery对其进行更改，以便仅刷新部分视图。我已经为此编写了代码，并通过添加脚本更改了自己的看法。
我的主消息视图类似于（示例）：
@model myModel
<h2>
Message Board<small class="on-right"/>
</h2>
// Text box for Adding Message(post)
@Html.TextArea("Message", new { @placeholder = "Add a post", id = "Message" })
<input type="button" id="Post" value="Post"/>
// partial view that displays all the messages along with its comments
<div id="messagelist">
@{
Html.RenderPartial("_posts", Model.MessageList);
}
</div>
消息页面的脚本：
$('#Post').click(function () {
var url = "/MyController/Messages";
var Message = $("#Message").val();
$("#Message").val("");
$.post(url, { Message: Message }, function (data) {
$("#messagelist").html(data);
_post部分视图：
@model IEnumerable<Model.MessageList>
//Foreach loop for displaying all the messages
@foreach (var item in Model)
{
<div >
@Html.DisplayFor(model => item.UserName)
@Html.DisplayFor(model => item.MessageText)
//Foreach loop for displaying all the comments related to each message
@foreach (var item1 in item.Comments)
{
@item1.UserName
@item1.MessageText
}
</div>
//partial view for adding comments each for messages
@Html.Partial("Comment", new ModelInstance { MessageId = item.MessageId })
}
评论部分视图（我正在使用ajax表单提交）：
@model ModelInstance
//form for submitting a message instance with parent message id for adding a comment to the parent message
@using (Ajax.BeginForm("Comment", "MyController", new AjaxOptions { UpdateTargetId = "messagelist" }))
{
@Html.AntiForgeryToken() @Html.ValidationSummary(true)
<div>
@Html.HiddenFor(modelItem => Model.MessageId)
@Html.TextBoxFor(modelItem => Model.CommentText, new { @placeholder = "leave a comment" })
<button class="btn-file" type="submit"></button>
</div>
}
控制器动作（样本）：
public ActionResult Messages(string Message)
{
------------------------------
create messag object
---------------------
add to database
-------------------
fetch again for refreshing
------------------------
return PartialView("_posts", refreshed list);
}
public ActionResult Comment(StudiMessageDetails Comment)
{
------------------------------
create messag object
---------------------
add to database
-------------------
fetch again for refreshing
return PartialView("_posts", msgDetails);
}
现在，发布消息和发布评论可以正常运行。另外，当我发布消息时，它只会刷新我的主消息视图。
但是，当我发表评论时，它只给了我刷新的局部视图。它没有绑定到“ div id = messagelist”，也没有给我整页。谁能告诉我我要去哪里错了？请帮忙。
最佳答案
您的Ajax.BeginForm()将<div id="messagelist">的内容替换为return PartialView("_posts", msgDetails);中的html。我怀疑模型msgDetails仅包含注释的关联消息的详细信息，因此您就可以看到。
我建议重新考虑您的设计，尤其是Messages()方法，该方法在保存消息后调用数据库以获取所有消息并返回完整列表-您已经在页面上拥有了所有数据，因此这似乎完全不必要，并且只会降低性能性能。您可以使用以下内容简化它
部分视图（请注意部分视图仅用于一条消息，而不是集合）
@model Model.Message
<div class="message">
<div class=username">@Model.UserName</div>
<div class=messagetext">@Model.MessageText</div>
<div class="commentlist">
@foreach (var comment in Model.Comments)
{
<div class="comment">
<div class="username">@comment.UserName<div>
<div class="commenttext">@comment.MessageText<div>
</div>
}
</div>
<div>
@Html.TextBox("CommentText", new { placeholder = "Leave a comment", id = "" }) // remove the id attribute so its not invalid html
<button class="addcomment" data-id="@Model.MessageId">Add Comment</button>
</div>
</div>
主视图
@model myModel
...
@Html.TextArea("Message", new { placeholder = "Add a post" }) // no point adding the id - its already added for you
<input type="button" id="Post" value="Post" />
<div id="messagelist">
@foreach(var message in Model.MessageList)
{
@{ Html.RenderPartial("_posts", message); }
}
</div>
<div id="newmessage"> // style this as hidden
@{ Html.RenderPartial("_posts"); }
</div>
剧本
// Add a model or ViewBag property for the current user name
var userName = JSON.parse('@Html.Raw(Json.Encode(ViewBag.UserName))');
$('#Post').click(function () {
var url = '@Url.Action("Message", "MyController")'; // dont hardcode!
var message = $('#Message').val();
$.post(url, { MessageText: message }, function (data) {
if(data) {
// clone the new message, update message id and add to DOM
var html = $('#newmessage').clone();
message.children('.username').text(userName);
message.children('.messagetext').text(message);
message.children('.newcomment').children('button').data('id', data);
$('#messagelist').perpend(html); // add at top of list
$('#Message').val(''); // clear message text
} else {
// something went wrong
}
});
});
$('.addcomment').click(function() {
var url = '@Url.Action("Comment", "MyController")';
var comment = $(this).prev('input');
var messageID = $(this).data('id');
var list = $(this).closest('.message').children('.commentlist');
$.post(url, { MessageID: messageID, CommentText comment.val() }, function (data) {
if (data) {
// add message
var html = $('<div><div>').addClass('comment');
html.append($('<div><div>').addClass('username').text(userName));
html.append($('<div><div>').addClass('commenttext').text(commentText));
list.append(html); // add to end of existing comments
comment.val(''); // clear existing text
} else {
// something went wrong
}
});
});
控制者
[HttpPost]
public ActionResult Message(string MessageText)
{
// create new message object and save to database
int ID = // the ID of the new message
return Json(ID); // if exception, then return null;
}
[HttpPost]
public ActionResult Comment(int MessageID, string CommentText)
{
// create new comment object and save to database
return Json(true); // if exception, then return null;
}
关于javascript - 在MVC razor中使用Ajax从表单中的另一个局部 View 提交表单后，无法刷新局部 View ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27310014/