如何解决使用Ajax ASP .NET MVC5的更新列表模型
有人可以给我一个提示,在调用页面中的“操作结果” Ajax后,如何将列表从控制器传递到视图页面中的“模型”列表。 (要更新具有Ajax回调结果的当前列表模型)吗?
这是我的默认加载视图页面代码:
@model List<ChargeSystem.Models.Message>
@foreach (var item in Model)
{
<div class="container1">
<p>@item.Msg</p>
<span class="time-right">@item.MsgDate</span>
</div>
}
</div>
<div class="divContinMsg">
<input type="text" id="txtMsg" name="txtMsg" />
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#txtMsg").keyup(function (e) {
if (e.keyCode == 13) {
$.ajax(
{
url: '/User/ajaxContactAdmin?msg=' + $("#txtMsg").val(),type: 'Post',data: "",contentType: false,success: function (result) {
//What can i do????
},error: function () {
alert("error");
}
})
};
});
});
</script>
这是Ajax调用操作的结果:
public ActionResult ajaxContactAdmin(string msg)
{
var result = new { model = messageRepository.Select().ToList()};
return Json(result,JsonRequestBehavior.AllowGet);
}
那么,ajax回叫后如何刷新模型?
解决方法
所以您要做的是将结果追加到现有结果集中。
首先,我将添加一个容器以便于参考,其次,您将该项添加到该容器中:
@model List<ChargeSystem.Models.Message>
<div id="listContainer">
@foreach (var item in Model)
{
<div class="container1">
<p>@item.Msg</p>
<span class="time-right">@item.MsgDate</span>
</div>
}
</div>
</div>
<div class="divContinMsg">
<input type="text" id="txtMsg" name="txtMsg" />
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#txtMsg").keyup(function (e) {
if (e.keyCode == 13) {
$.ajax(
{
url: '/User/ajaxContactAdmin?msg=' + $("#txtMsg").val(),type: 'Post',data: "",contentType: false,success: function (result) {
$('#listContainer').append('<div class="container1">'+
'<p>' + result.Msg + '</p>'+
'<span class="time-right">' + result.MsgDate +'</span>'+
'</div>');
},error: function () {
alert("error");
}
})
};
});
});
</script>
,
您似乎想在文本框中输入信息,然后在视图中保存并更新它。 我想你可以做到的。
这里是一个例子:
您的控制器:
public IActionResult GetUser ()
{
var messages = context.Messages.ToList();
return View(messages);
}
[HttpPost]
public IActionResult ajaxContactAdmin(string msg)
{
var message = new Message
{
Msg = msg,MsgDate = DateTime.Now
};
context.Add(message);
context.SaveChanges();
return Json(message);
}
视图中的js:
@section scripts{
<script>
$(document).ready(function () {
$("#txtMsg").keyup(function (e) {
if (e.keyCode == 13) {
var msg = document.getElementById("txtMsg").value
$.ajax(
{
url: '/Home/ajaxContactAdmin?msg=' + $("#txtMsg").val(),data: { "msg": msg},success: function (message)
{
console.log(message);
window.location.reload();
},error: function () {
alert("error");
}
})
};
});
});
</script>
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。