创建包含在 asp.net mvc 中打开对话框窗口的按钮的局部视图

Question

我的总体目标是创建一个可插入的笔记小部件，该小部件可以放置在我网站的任何主视图上。我想这个小部件本身就是一个“笔记”按钮，它会打开一个剑道窗口，里面有一个简单的表单来添加一个笔记。

这是我目前拥有的代码：

_NotesPartial.cshtml：
正如您所看到的，这里没有 JavaScript 可以打开窗口，因为据我了解，您不能真正将 JavaScript 放入 ASP.NET MVC 中的 PartialView 中。但是，最好将所有内容打包到一个地方。

@model MyApp.Web.ViewModels.Shared.NoteViewModel

<button id="open" class="btn btn-primary">Notes</button>

@{Html.Kendo().Window()
                .Name("window")
                .Width(630)
                .Height(315)
                .Draggable()
                .Resizable()
                .Title("Notes")
                .Actions(actions => actions.Pin().Refresh().Maximize().Close())
                .Content(@<text>
        <form asp-action="_NotesPartial">
            <div class="form-horizontal">
                <h4>NoteViewModel</h4>
                <hr />
                <div asp-validation-summary="ValidationSummary.ModelOnly" class="text-danger"></div>
                <div class="form-group">
                    <label asp-for="Subject" class="col-md-2 control-label"></label>
                    <div class="col-md-10">
                        <input asp-for="Subject" class="form-control" />
                        <span asp-validation-for="Subject" class="text-danger" />
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Content" class="col-md-2 control-label"></label>
                    <div class="col-md-10">
                        <textarea asp-for="Content" class="form-control" cols="40" rows="4">
                        </textarea><span asp-validation-for="Content" class="text-danger" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="Save" class="btn btn-default" />
                    </div>
                </div>
            </div>
        </form>
        </text>)
        .Render();
}

PrimaryView.cshtml

@await Html.PartialAsync("_NotesPartial")

@section Scripts {
    <script>
        $("#open").click(function (e) {
            $("#window").data("kendoWindow").open;
        });
    </script>
}

以下是我遇到的问题：

1. 我无法打开窗口，因为我收到错误消息“无法读取未定义的属性‘打开’”。这意味着主视图中的 js 没有找到剑道窗口。
2. 我想知道为什么Telerik documentation recommends 在窗口上调用.Render()。当我希望它默认隐藏时，这会使表单内容默认显示在 PrimaryView 页面上。
3. 有没有更好的方法在 ASP.NET MVC 中制作可插入的小部件。我正在争论打开窗口的按钮是否应该是 Partial View 或 PrimaryView 的一部分，即使我希望尽可能地将所有内容打包在一起。

我还想知道是否应该创建标准视图而不是局部视图，并以某种方式将标准视图加载到剑道窗口中。

无论我使用哪种类型的对话框窗口，我是否都在正确的轨道上创建可放置在网站任何页面上的可插入注释对话框？

这对我来说有点令人沮丧，因为在 ASP.NET Webforms 中我可以创建一个可以毫无问题地执行此操作的 UserControl。

Answer 1

您可以将 JavaScript 脚本放置在局部视图中。只需放置：

<script type="text/javascript">      
</script>

在局部。我不知道它是否推荐，但它肯定是可能的并且有效。当您尝试在页面上放置许多相同的部分时，就会出现问题。