我在这里阅读了几个主题并试图创建弹出窗口，但它不起作用，我找不到原因？
我有一个div电话：
<input class="k-button" style="font-size: 0.9em; color: #ff6a00;" type="button" value="Filter" onclick="OpenPanel()" />
我有第二个div：
<div id="filterPanel" title="Filter Options">
@using (Html.BeginForm("Vehicle", "Home", new { id = "Id" }))
{
<table>
<tr>
<th>Search Criteria:</th>
</tr>
<tr>
<td>Model</td>
<td>
<input class="k-in" style="width: 100px; padding: 0; font-size: 0.9em;" type="text" id="model" name="model" value="@Model.Filter.Model"/>
</td>
</tr>
<tr>
<td>Status</td>
<td>
@{
var statusItems = new List<SelectListItem>()
{
new SelectListItem
{
Value="None",
Text="None",
Selected= Model.Filter.Status == "None" ? true : false
},
new SelectListItem
{
Value="New",
Text="New",
Selected= Model.Filter.Status == "New" ? true : false
}
};
}
@Html.DropDownList("Status", statusItems, "-- Select --", new { @class = "k-dropdown", @style= "width: 120px;font-size: 0.9em; padding: 0;"})
</td>
</tr>
<tr>
<td><input class="k-button" style="font-size: 0.9em; color: #ff6a00; width: 100px" type="submit" name="filter" value="Filter" /></td>
<td><input class="k-button" style="font-size: 0.9em; color: #ff6a00; width: 100px" type="submit" name="filter" value="Remove Filter" onclick="ClearFilter()" /></td>
</tr>
</table>
}
</div>
我有第二个jQuery / java脚本：
$(document).ready(function () {
$('#filterPanel').dialog({
autoOpen: false,
modal: true
});
function OpenPanel() {
$('#filterPanel').dialog("open");
}
});
在控制器中，一切似乎都很好：
[HttpPost]
public ActionResult Vehicle(FormCollection collection)
{
...
return View(vehicle);
}
Div总是显示在页面上，按钮点击时没有弹出消息（我猜不会调用脚本）。 我肯定错过了一些东西，但我无法看到它。问题在哪里？
P.S此外，由于某种原因，我的jQuery中的函数变为＆＃34;未捕获的TypeError：undefined不是函数＆＃34;。
修改 我已经加入了jquery.ui
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
答案 0 :(得分：0)
在页面中添加以下working code并确保其有效。如果没有，则更新jquery库版本。
<div id="dialog">Your non-modal dialog</div>
<a href="#" id="open">Open dialog</a>
<script type="text/javascript">
$('#open').click(function () {
$('#dialog').dialog('open');
});
$(document).ready(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
open: function () {
jQuery('.ui-widget-overlay').bind('click', function () {
jQuery('#dialog').dialog('close');
})
}
});
});
</script>
如果有效，则更改现有的来电按钮。
<input id="open" class="k-button" type="button" value="Filter" onclick="OpenPanel()" />
答案 1 :(得分：0)
您可以使用jquery UI Dialog作为弹出窗口。我们这里有一个小设置。
我们将有一个主要表单的视图模型：
public class MyViewModel
{
public string ValueId { get; set; }
public IEnumerable<SelectListItem> Values
{
get
{
return new[]
{
new SelectListItem { Value = "1", Text = "item 1" },
new SelectListItem { Value = "2", Text = "item 2" },
new SelectListItem { Value = "3", Text = "item 3" },
};
}
}
public string NewValue { get; set; }
}
控制器：
public class HomeController : Controller
{
public ActionResult Index()
{
return View(new MyViewModel());
}
[HttpPost]
public ActionResult Index(MyViewModel model)
{
return Content("thanks for submitting");
}
}
和一个视图（〜/ Views / Home / Index.aspx）：
<%@ Page
Language="C#"
MasterPageFile="~/Views/Shared/Site.Master"
Inherits="System.Web.Mvc.ViewPage<AppName.Models.MyViewModel>"
%>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<% using (Html.BeginForm()) { %>
<%= Html.DropDownListFor(x => x.ValueId, Model.Values) %>
<br/>
<%= Html.EditorFor(x => x.NewValue) %>
<%= Html.ActionLink("Suggest Value", "New", "NewValue", null, new { id = "new-value-link" }) %>
<button type="submit">OK</button>
<% } %>
<div id="dialog"></div>
</asp:Content>
public class NewValueViewModel
{
public string Foo { get; set; }
public string Bar { get; set; }
}
控制器：
public class NewValueController : Controller
{
public ActionResult New()
{
return PartialView(new NewValueViewModel());
}
[HttpPost]
public ActionResult New(NewValueViewModel model)
{
var newValue = string.Format("{0} - {1}", model.Foo, model.Bar);
return Json(new { newValue = newValue });
}
}
和相应的局部视图（〜/ Views / NewValue / New.ascx）：
<%@ Control
Language="C#"
Inherits="System.Web.Mvc.ViewUserControl<AppName.Models.NewValueViewModel>"
%>
<% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "new-value-form" })) { %>
<%= Html.EditorFor(x => x.Foo) %>
<%= Html.EditorFor(x => x.Bar) %>
<button type="submit">OK</button>
<% } %>
现在剩下的就是编写一些javascript来连接所有内容。我们包括jquery和jquery ui：
<script src="<%: Url.Content("~/Scripts/jquery-1.5.1.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery-ui-1.8.11.js") %>" type="text/javascript"></script>
以及包含我们代码的自定义javascript文件：
$(function () {
$('#new-value-link').click(function () {
var href = this.href;
$('#dialog').dialog({
modal: true,
open: function (event, ui) {
$(this).load(href, function (result) {
$('#new-value-form').submit(function () {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (json) {
$('#dialog').dialog('close');
$('#NewValue').val(json.newValue);
}
});
return false;
});
});
}
});
return false;
});
});