如何在Ajax文章之后更新局部视图
如何在Ajax文章之后更新局部视图
提问于 2019-10-18 04:35:47
我的局部视图(FinanceList)中有一个按钮，当我单击该按钮时，我打开了createitems视图以保存记录。
<input type="button" id="btnaddnew" class="btn-success pull-left" style="height:30px;width:140px;font-size:16px" value="+Add new record" onclick="window.open('/Projects/CreateItems'+ '?id=7', 'popUpWindow', 'height=500,width=500');">我在我的createItems视图中有Ajax Post方法，在Post方法上，我成功地将记录保存到数据库中，但我需要如何关闭mmy CreateItems弹出窗口并更新我的局部视图？
<script type="text/javascript">
$(document).ready(function () {
$('.button').on("click", function () {
$.ajax({
url: applicationHostPath + 'Projects/CreateItems',
datatype: 'json',
data: $("form").serialize(),
success: function (response) {
if (response != null) {
$('#displayproContainer').load('/Projects/FinanceList' + "&id=" + 2);
}
}
})
});
});
</script>控件代码，我需要在哪里返回此视图？？以便更新我的局部视图？
[HttpPost]
public ActionResult CreateItems(ModelClass model)
{
//My DB Save Method
return View();
}回答 1
Stack Overflow用户
发布于 2019-10-18 05:19:39
这里有一种方法可以做到这一点。
实时链接https://dotnetfiddle.net/gcx8Ds
控制器/视图模型
namespace WebApplicationSkip1.Controllers
{
public class ModelClass
{
public string FinanceItem { get; set; }
}
public class HomeController : Controller
{
[HttpPost]
public ActionResult Index16(ModelClass model)
{
ViewBag.FinanceItem = model.FinanceItem;
//clearing out the model after populating a viewbag
model.FinanceItem = String.Empty;
return View(model);
}
public ActionResult Index16()
{
return View();
}视图
@model WebApplicationSkip1.Controllers.ModelClass
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index16</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
@using (Html.BeginForm())
{
@*https://getbootstrap.com/docs/4.0/components/modal/*@
<p>Finance list</p>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Create Items
</button>
<div id="theResult"></div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Create Items</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
@Html.LabelFor(r => r.FinanceItem)
@Html.TextBoxFor(r => r.FinanceItem)
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
}
<div>
@if (ViewBag.FinanceItem != null)
{
@ViewBag.FinanceItem
}
</div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58440378
复制相关文章
相似问题
腾讯云开发者
