如何在从单独的部分视图模式提交时刷新主索引页面上的部分视图
本文关键字:视图 刷新 索引 提交 模式 单独 | 更新日期: 2023-09-27 18:30:26
我有一个主索引页面,它加载了一个包含下拉列表的部分视图。 从 ddl 中选择项会将控件填充到单独的分部视图中以进行显示。 单击"编辑"会弹出一个模型,其中包含绑定到所选项的模型属性的 EditorFor 控件窗体。 单击模式的提交按钮时。它会发回表单以更新到数据库...此时,我想基本上刷新包含下拉列表的部分视图,以便它反映更改是合适的。
我拥有的代码执行所有基本机制,除了刷新包含下拉列表控件的部分视图外,没有问题。 我可以只对索引页面执行重定向操作并刷新整个页面,但我更愿意只刷新部分视图。 我不知道如何做到这一点,我想知道是否有人有建议。
索引页的代码div 代码为:
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<br />
<div class="partialContent" data-url="/Database/GetDatabases">
@Html.Partial("_GetDatabases")
</div>
<br />
<div class="modal fade" id="modalEditDBInfo" role="application" aria-labelledby="modalEditDBInfoLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modalEditDBInfoContent" style="background-color:white; border-radius:10px; box-shadow:10px;">
@Html.Partial("_EditDatabaseInfo")
</div>
</div>
</div>
编辑数据库分部视图的代码
@model Hybridinator.WebUI.Models.DatabaseModel
<br />
<br />
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="editModelTitle">Edit Database Info</h4>
</div>
@if(Model != null)
{
using (Html.BeginForm("EditDatabaseInfo", "Database", FormMethod.Post, new { @class = "modal-form" }))
{
<div class="modal-body">
@Html.HiddenFor(m => m.database_pk, new { htmlAttributes = new { @class = "form-control" } })
<div class="form-group">
<div id="databaselabel">@Html.LabelFor(m => m.database_name, "Database")</div>
<div id="databaseedit">@Html.EditorFor(m => m.database_name, new { htmlAttributes = new { @class = "form-control" } })</div>
</div>
<div class="form-group">
<div id="databaseserverlabel">@Html.LabelFor(m => m.database_server, "Database Server")</div>
<div id="databaseserveredit">@Html.EditorFor(m => m.database_server, new { htmlAttributes = new { @class = "form-control" } })</div>
</div>
</div>
<div class="form-group">
<div id="editsqltypelabel">@Html.LabelFor(m => m.sql_type_pk, "Sql Type")</div>
<div id="editsqltypeddl">@Html.DropDownListFor(m => m.sql_type_pk, Model.sqlTypes)</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button class="btn btn-inverse btn-primary" type="submit">Save</button>
</div>
}
}
获取数据库部分视图的代码
@model Hybridinator.WebUI.Models.DatabaseListModel
@if(Model != null)
{
<div id="databasedropdown" class="container-fluid">
@Html.Label("Databases: ")@Html.DropDownListFor(m => m.database_pk, Model.databases, "Select one...", new { @id = "database_pk", onchange = "changeDatabase()" })
</div>
}
获取数据库的控制器代码
public ActionResult GetDatabases()
{
DatabaseListModel databaseListModel = new DatabaseListModel
{
databases = databaseService.GetUndeletedDatabaseList().
Select(d => new SelectListItem
{
Value = d.database_pk.ToString(),
Text = d.database_name
}).ToList()
};
return PartialView("_GetDatabases",databaseListModel);
}
最后是编辑数据库模式的获取和发布代码
[HttpGet]
public ActionResult EditDatabaseInfo(int database_pk)
{
DatabaseModel databaseModel = FillDatabaseModelByDatabasePK(database_pk);
return PartialView("_EditDatabaseInfo", databaseModel);
}
[HttpPost]
public ActionResult EditDatabaseInfo(DatabaseModel databaseModel)
{
string[] result = databaseService.Update(new Database
{
database_pk = databaseModel.database_pk,
database_name = databaseModel.database_name,
database_password = databaseModel.database_password,
database_username = databaseModel.database_username,
database_server = databaseModel.database_server,
hist_database_name = databaseModel.hist_database_name,
hist_database_server = databaseModel.hist_database_server,
hist_database_password = databaseModel.hist_database_password,
hist_database_username = databaseModel.hist_database_username,
sqlType = new SQLType { sql_type_pk = databaseModel.sql_type_pk }
});
return RedirectToAction("GetDatabases");
}
正如我所说,在 Post EditDatabase 控制器方法中返回的 RedirectToAction("Index) 在紧要关头工作。但我真的不想刷新整个页面。 我认为我可以在该方法的返回中采取一些不同的事情来重新加载 GetDatabases 部分,但我无法弄清楚。 任何帮助将不胜感激。
评论的Carl提供了解决方案。 但是,由于他刚刚评论了Ill,因此在此处发布了代码修改,因此如果有人正在寻找类似的问题,他们可以看到代码。
根据Carl的建议,我使用了Ajax.BeginForm而不是HTML。BeginForm 和 IM 通过 onsuccess 处理程序更新部分视图控制器。
我在编辑数据库部分替换了这一行
using (Html.BeginForm("EditDatabaseInfo", "Database", FormMethod.Post, new { @class = "modal-form" }))
有了这个
using (Ajax.BeginForm("EditDatabaseInfo", "Database", new AjaxOptions{
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnSuccess = "editDatabaseSuccess"
}, new { @id = "editDatabaseForm" }))
然后在我的脚本中,我为 editDatabaseSucess 做了一个函数
。<script type="text/javascript">
function editDatabaseSuccess(data)
{
//alert(data);
$('#modalEditDBInfo').modal('hide');
loadDatabases();
}
</script>
alert(data;注释掉的行仅用于测试以确保调用该函数。负载数据库();line 调用我在页面加载时使用的函数来加载部分视图。
<script type="text/javascript">
function loadDatabases()
{
$(".partialContent").each(function (index, item) {
var url = $(item).data("url");
if (url && url.length > 0) {
$(item).load(url)
}
});
}
</script>
现在工作完美。 非常感谢卡尔的回答。