成功登录后关闭 Kendo UI 窗口并重新加载父页面
Posted
技术标签:
【中文标题】成功登录后关闭 Kendo UI 窗口并重新加载父页面【英文标题】:Close KendoUI Window & reload Parent page on successful login 【发布时间】:2014-04-13 12:44:37 【问题描述】:我有一个包含“按钮”和默认不可见的 KendoUI 窗口的视图。
Index.cshtml:
@(html.Kendo().Button()
.Name("btnLogin")
.Content("Login")
.Events(e => e.Click("LoginBtn")))
@Html.Kendo().Window()
.Name("windowLogin")
.Title("Login")
.Content("loading user info...")
.LoadContentFrom("Login", "Account")
.Modal(true)
.Visible(false)
.Iframe(true)
.Draggable()
.Resizable()
.Render();
单击按钮时,会打开包含表单的模态窗口。 “登录”操作正在重新运行包含完整表单的视图。
Login.cshtml:
<h2>Login Details</h2>
@Html.ValidationMessage("error")
@using (Html.BeginForm("Login", "Account", FormMethod.Post))
<table>
<tr>
<td>
@Html.Label("UserName: ")
</td>
</td>
<td>
@Html.TextBoxFor(user => user.UserName)
</td>
<td>
@Html.ValidationMessageFor(user => user.UserName, "Enter Name")
</td>
</tr>
<tr></tr>
<tr>
<td>
@Html.Label("Password: ")
</td>
<td>
@Html.PasswordFor(user => user.Password)
</td>
<td>
@Html.ValidationMessageFor(user => user.Password, "Enter Password")
</td>
</tr>
<tr></tr>
<tr>
<td>
<input type="submit" value="Login" />
</td>
<td>
<input id="CancelButton" type="button" value="Cancel" />
</td>
</tr>
</table>
@section Scripts
@Scripts.Render("~/bundles/jqueryval")
AccountController.cs:
[HttpPost]
public ActionResult Login(User user)
var userDetails = ExecuteQueries.GetUser(user);
if (userDetails != null)
Session["userName"] = userDetails.UserName;
//FormsAuthentication.RedirectFromLoginPage(user.UserName, true);
else
ModelState.AddModelError("error", "UserName or Password is incorrect");
return View("Login");
我面临的问题是我无法关闭模式窗口并重新加载父屏幕。成功登录后,我的新窗口在同一个模态窗口中打开,我想要的是关闭模态窗口并刷新父屏幕。
【问题讨论】:
【参考方案1】:就像调用 window.Close() 一样简单。这个脚本在我的“Kendo Windowed”视图中。在返回视图之前成功登录时,只需将模型上的属性设置为 true 或其他内容。 Model.CloseWindow = true;
并将此代码放入您的视图引擎中
@if (Model.CloseWindow == true)
<script>
// close the popup
var w = window.parent.$("#createManualProposalWindow").data("kendoWindow");
w.close();
</script>
这是窗口的定义方式。
@(Html.Kendo().Window()
.Name("createManualProposalWindow")
.Title("Manual Proposal Details")
.Draggable(true)
.Resizable()
.Scrollable(false)
.Width(880)
.Height(650)
.Visible(false)
.Iframe(true)
.Modal(true)
.Events(e => e
.Close("ManualWindow_close"))
)
您将看到关闭事件,在该事件中您可以处理父页面的刷新。
function ManualWindow_close()
var aggGrid = $("#agg_grid").data("kendoGrid");
aggGrid.dataSource.read();
var grid = $("#grid").data("kendoGrid");
grid.dataSource.page(1);
refreshGetContractTotals();
【讨论】:
以上是关于成功登录后关闭 Kendo UI 窗口并重新加载父页面的主要内容,如果未能解决你的问题,请参考以下文章