colorbox中的部分页面无法触发单选按钮的onclick处理程序

时间:2013-03-08 13:14:47

标签: asp.net-mvc

在我的索引页面中,我有

<a class='popup' href='@Url.Action("Add", "Alert")'>Add New</a>

我在cshtml文件末尾有一个部分脚本

@section Scripts 
{ 
<link rel="stylesheet" href="http://www.formmail-maker.com/var/demo/jquery-popup-    form/colorbox.css" />

<style>
    #cboxOverlay{ background:#666666; }
</style>

<script type="text/javascript" src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $(".popup").colorbox({ opacity: 0.85, iframe: true, fastIframe: false, width:    "450px", height: "480px", scrolling: false });
});

function ddUserClicked() { 
{
    alert('user button, selected!'); 
}

function ddEntityClicked() {
    alert('entity button, selected!');
}

</script>

}

这很好用。当调用Add(操作方法)警报(控制器)时,它会返回一个部分页面,该页面可以快速填充页面中心的颜色框。

在彩色盒中我有两个单选按钮。我希望使用onclick事件,以便他们可以调用我从原始视图ddUserClicked()和ddEntityClicked()实现的函数。

但这不起作用。

部分页面脚本是

@model WellRoute.Web.Models.CreateAlertModel

@{
    ViewBag.Title = "Add New Alert";
}

<h2>@ViewBag.Title</h2><br />

@using (Html.BeginForm("Add", "Alert", FormMethod.Post))
{
<fieldset>
    <legend>New Alert</legend>
    <table>
        <tr>
            <td>@Html.Label("Type")</td>
            <td>
                @Html.RadioButtonFor(m => m.IsUserAlert, true, new { onclick = "ddUserClicked(); ", })User Alert
                @Html.RadioButtonFor(m => m.IsUserAlert, false, new { onclick = "ddEntityClicked()", })Entity Alert
            </td>
        </tr>
        <tr>
            <td>@Html.Label("User")</td>
            <td>
                @Html.DropDownListFor(m => m.SelectedValue, new SelectList(Model.Users, "Id", "EmailAddress"), new { style = "width:250px;" })
                @Html.DropDownListFor(m => m.SelectedValue, new SelectList(Model.Entities, "Id", "Name"), new { style = "width:250px; visibility:hidden;"     })
            </td>
        </tr>
        <tr>
            <td>@Html.Label("Message")</td>
            <td>@Html.TextAreaFor(m => m.Message, new  { style = "width:250px; height:100px" })</td>
        </tr>
    </table>
    <p>
        <input type="submit" value="Save" />
        <input type="submit" value="Cancel" />
    </p>
</fieldset>
}

1 个答案:

答案 0 :(得分:1)

我看到的第一件事(不确定这是否仅仅是一个''''''''''{{{{{{{{{ / p>

除此之外,快速而肮脏的方法是从视图中删除函数{ddUserClicked(),并将以下内容放在局部视图的顶部(不在ddUserClicked - 部分虽然)

ddEntityClicked

我认为问题可能是script - 部分包含在<script type="text/javascript"> function ddUserClicked() { alert('user button, selected!'); } function ddEntityClicked() { alert('entity button, selected!'); } </script> 的末尾(如果您至少使用默认的script)和功能没有在您使用它们时定义。我可能错了。

另一种方法是给单选按钮添加ID,例如:

body

...然后创建一个jquery脚本。有点像:

_Layout.cshtml

然后链接.js。这将为您提供与脚本的松散耦合,因为您未在HTML中指定要绑定的任何函数。通常,您希望避免在视图中添加过多的javascript。