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

时间:2016-01-30 07:08:22

标签: c# asp.net asp.net-mvc kendo-ui telerik

我的总体目标是创建一个可插入的笔记窗口小部件,可以放在我网站的任何主视图中。我认为小部件本身只是一个按钮' Notes'这将打开一个Kendo Window,里面有一个简单的形式来添加一个音符。

以下是我目前的代码:

_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. 我无法让窗户打开,因为我收到的错误是“无法读取属性&#39;打开&#39;未定义的&#39;。这意味着主视图中的js没有找到kendo窗口。
  2. 我想知道为什么Telerik documentation recommends在窗口上调用.Render()。这使得表单内容默认显示在PrimaryView页面上,当我希望它默认隐藏时。
  3. 是否有更好的方法在ASP.NET MVC中创建可插入的小部件。我正在讨论打开窗口的按钮是否应该是部分视图或PrimaryView的一部分,即使我希望所有内容尽可能地打包在一起。
  4. 我也想知道是否应该创建标准视图而不是部分视图,并以某种方式将标准视图加载到kendo窗口。

    无论我使用什么样的对话窗口,我都在正确的轨道上创建一个可以放在网站任何页面上的插件备注对话框?

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

1 个答案:

答案 0 :(得分:0)

您可以在部分视图中放置JavaScript脚本。只是放置:

<script type="text/javascript">      
</script>
部分中的

。我不知道它是否被推荐,但它确实可行且有效。当您尝试在页面上放置许多相同的部分时会出现问题。