创建一个分部视图,其中包含一个按钮,该按钮可在 asp.net mvc 中打开对话框窗口
本文关键字:按钮 net 窗口 打开对话框 mvc asp 一个 创建 视图 包含一 | 更新日期: 2023-09-27 18:32:35
我的总体目标是创建一个可插入的笔记小部件,可以放置在我网站的任何主视图上。我想象小部件本身是一个按钮"注释",它将打开一个剑道窗口,其中有一个简单的表单来添加注释。
这是我目前拥有的代码:
_NotesPartial.cshtml:
正如你所看到的,这里没有JavaScript可以打开窗口,因为根据我的理解,你不能真正将JavaScript放在MVC ASP.NET 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>
}
以下是我遇到的问题:
- 我甚至无法打开窗口,因为我收到错误说"无法读取未定义的属性'打开'"。这意味着主视图中的 js 找不到剑道窗口。
- 我想知道为什么 Telerik 文档建议调用 .窗口上的 render((。这使得表单内容默认显示在 PrimaryView 页面上,而我希望它默认隐藏。
- 有没有更好的方法可以在 MVC 中制作可插入 ASP.NET 小部件。我正在争论打开窗口的按钮应该是部分视图的一部分还是在主视图中,即使我希望将所有内容尽可能打包在一起。
我还想知道我是否应该创建一个标准视图而不是部分视图,并以某种方式将标准视图加载到剑道窗口中。
无论我使用哪种类型的对话框窗口,我是否在正确的轨道上创建一个可以放置在网站任何页面上的可插拔山墙注释对话框?
这对我来说有点令人沮丧,因为 ASP.NET WebForms 中,我可以创建一个可以毫无问题地执行此操作的用户控件。
您可以将 JavaScript 脚本放置在分部视图中。只是地方:
<script type="text/javascript">
</script>
在部分。我不知道它是否推荐,但它肯定是可能的并且有效。当您尝试在页面上放置许多相同的部分时,就会出现问题。