asp.net-mvc – 在kendo窗口中使用表单的PartialView

发布时间：2020-12-16 03:16:45 所属栏目：asp.Net 来源：网络整理

导读：在我的项目中,我需要在Kendo窗口中放置一些表单.这些形式在另一部分视图中.我用它来加载局部视图： @(Html.Kendo().Window() .Name("editPasswordPopUp") .Visible(false) .Modal(true) .Width(600) .Height(500) .Position(settings = settings.Top(70).Lef

在我的项目中,我需要在Kendo窗口中放置一些表单.这些形式在另一部分视图中.我用它来加载局部视图：

@(Html.Kendo().Window()
      .Name("editPasswordPopUp")
      .Visible(false)
     .Modal(true)
     .Width(600)
     .Height(500)
    .Position(settings =>
            settings.Top(70).Left(200))
      .Title("Edit your password")
      .Content("loading user info...")
     .LoadContentFrom("EditPassword","Member")
      .Iframe(true)
      .Resizable()
      .Draggable()
      )

PartialView的动作：

public ActionResult EditPassword()
{
   return PartialView();
}

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult EditPassword(EditPasswordViewModel viewModel)
{
   [...]
   return RedirectToAction("Profile","Member",new {id = viewModel.Id});
   [...]
}

这是我的PartialView：

@model Devoteam.CustomerPortal.ViewModels.EditPasswordViewModel
@{
ViewBag.Title = "Edit";
Layout = null;
}

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/kendo")

@using (Html.BeginForm())
{
  @Html.AntiForgeryToken()
  @Html.Partial("_GenericMessage")

  <div id="messageError">
    @Html.ValidationSummary()
  </div>
  // FIELDS
  <div class="buttons">
    <input type="submit" value="Confirm" class="big-button" />
    <input type="submit" value="Cancel" class="big-button" />
  </div>
}

当我单击按钮打开Kendo窗口时,部分视图正确加载到其中.
当我提交表单时,操作被正确调用.
这是我的问题：当控制器完成其工作时,我调用RedirectToAction来重定向用户.但页面加载在Kendo窗口而不是主窗口中.关闭Kendo窗口有什么解决方案吗？

第二个问题：按取消按钮时如何关闭Kendo窗口？

先感谢您. (抱歉我的英语不好,这不是我的母语)

解决方法

在从PartialView的服务器端控制器代码提交之后,您可以在JavaScript中作为提交例程的一部分执行此操作,而不是自动关闭窗口/重定向.

>而不是在PartialView中返回RedirectToAction(“Profile”,“Member”,new {id：viewModel.Id},而只返回null.
>如果你需要在窗口关闭后刷新父窗口,这就是我在你的问题中没有看到足够的代码来从你的主窗体首先启动你的窗口的地方,但你会把一个事件绑定到你的KendoWindow “关”：

<input type="button" value="Edit Password" onclick="editPassword()" />

<script type="text/Javascript">
    function editPassword() {
        var url = '@Url.Action("EditPassword","Password")?viewModel=' + '@Model';
        var win = ('#editPasswordPopUp').data('kendoWindow').bind("close",function(e) {
            // Whatever you put here will run after your PartialView
            window.top.location.reload();  // reloads parent onclose of Kendo window
        });
        win.refresh(url);
        win.open();
        win.center();
    }
</script>

>如果您希望窗口在提交后自动关闭并刷新父窗口,则需要使用自定义函数执行submit(),而不是使用您拥有的输入type =“submit”.这样,您可以像Dante建议的那样,将窗口关闭事件添加到PartialView中：

<input type="button" value="Confirm" class="big-button" onclick="formSubmit() />

<script type="text/Javascript">
    function formSubmit() {
        $('form').submit();
        parent.$('#editPasswordPopUp').data('kendoWindow').close();
    }
</script>

>对于关闭表单的取消按钮,您可以执行相同的操作.将它设为type =“button”而不是type =“submit”,放入onclick转到使用同一行关闭窗口的函数：parent.$(‘#editPasswordPopUp’).data(‘kendoWindow’) .关();.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!