0

私のインデックスページには

<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 (アクション メソッド) Alert (コントローラー) が呼び出されると、ページの中央にあるカラーボックスをうまく埋める部分的なページが返されます。

カラーボックスには、2 つのラジオ ボタンがあります。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>
}
4

1 に答える 1

1

私が最初に目にするのは（それが単なるコピーアンドペーストエラーかどうかはわかりませんが）、関数に1つ{多すぎるということですddUserClicked():)

それ以外に、それを機能させるための迅速で汚れた方法は、ビューから関数を削除し、ddUserClicked代わりddEntityClickedに部分ビューの上部に次のものを配置することです (ただし、scriptセクション内ではありません)。

<script type="text/javascript">
    function ddUserClicked() {
        alert('user button, selected!');
    }

    function ddEntityClicked() {
        alert('entity button, selected!');
    }
</script>

問題は、script-section が末尾に含まれていること(少なくともbodyデフォルトを使用している場合) と、関数を使用している時点で関数が定義されていないことだと思います。_Layout.cshtml私は間違っているかもしれません。

別の方法として、次のように、代わりにラジオ ボタンに ID を指定します。

<td>
    @Html.RadioButtonFor(m => m.IsUserAlert, true, new { id = "user_alert", })User Alert
    @Html.RadioButtonFor(m => m.IsUserAlert, false, new { id = "entity_alert", })Entity Alert
</td>

...そして、jquery-script を作成します。次のようなもの：

// File alert.js
$(document).ready(function() {
    $("#user_alert").click(function() {
        alert('user button, selected!');
    });

    $("#entity_alert").click(function () {
        alert('user button, selected!');
    });
});

そして、.js をリンクします。HTMLでバインドする関数を指定しないため、これによりスクリプトへの疎結合が得られます。一般に、ビューに JavaScript を入れすぎないようにする必要があります。

于 2013-03-08T15:32:52.153 に答える