radiobutton在点击时显示模态弹出窗口

时间:2017-05-24 16:17:50

标签: asp.net-mvc

正在开展一个小项目以熟悉ASP.NET。 我有这个模型

public partial class COUNTRIES
{
public int COUNTRY_ID { get; set; }
public string COUNTRY_NAME { get; set; }
public int COUNTRY_AREA { get; set; }
}

查看

    <div class="col-lg-12">
    <div class="form-group">
        @Html.LabelFor(model => model.COUNTRY_NAME, new { @class = "col-lg-2 control-label" })
        <div class="col-lg-9">
            @Html.TextBoxFor(model => model.COUNTRY_NAME, new { @class = "form-control" })
        </div>
    </div>
</div>

<div class="col-lg-12">
    <div class="form-group">
        <div class="radio">
            @Html.RadioButtonFor(m => m.COUNTRY_AREA, 1, new { id = "", value = "" }) North East
        </div>
        <div class="radio">
            @Html.RadioButtonFor(m => m.COUNTRY_AREA, 2, new { id = "", value = "" }) North West
        </div>
        <div class="radio">
            @Html.RadioButtonFor(m => m.COUNTRY_AREA, 3, new { id = "", value = "" }) South West
        </div>
        <div class="radio">
            @Html.RadioButtonFor(m => m.COUNTRY_AREA, 4, new { id = "", value = "" }) South East
        </div>
    </div>
</div>

m =&gt; m.COUNTRY_AREA 应生成4个单选按钮,并且4个单选按钮与它相连。

我想要实现的是当我点击:

  1. RadioButton 1,它应该显示一个弹出模式表格,上面写着“你来自东北。”
  2. RadioButton 2,它应该显示一个弹出模式窗体,上面写着“你来自西北。”
  3. RadioButton 3,它应该显示一个弹出模式表格,上面写着“你来自东南。”
  4. RadioButton 1,它应显示一个弹出模式表格,上面写着“你来自东南。”
  5. 我该怎么做呢

1 个答案:

答案 0 :(得分:0)

这将起作用,并且它被考虑因为只有一个JavaScript函数:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index706</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
    <script type="text/javascript">
        $(function () {
            $(".DoPopup").click(function (event) {
                alert("You are from the " + event.target.id);
            })
        })
    </script>
</head>
<body>
    <div class="col-lg-12">
        <div class="form-group">
            @Html.LabelFor(model => model.COUNTRY_NAME, new { @class = "col-lg-2 control-label" })
            <div class="col-lg-9">
                @Html.TextBoxFor(model => model.COUNTRY_NAME, new { @class = "form-control" })
            </div>
        </div>
    </div>

    <div class="col-lg-12">
        <div class="form-group">
            <div class="radio">
                @Html.RadioButtonFor(m => m.COUNTRY_AREA, 1, new { @class = "DoPopup", id = "North East", value = "" }) North East
            </div>
            <div class="radio">
                @Html.RadioButtonFor(m => m.COUNTRY_AREA, 2, new { @class = "DoPopup", id = "North West", value = "" }) North West
            </div>
            <div class="radio">
                @Html.RadioButtonFor(m => m.COUNTRY_AREA, 3, new { @class = "DoPopup", id = "South West", value = "" }) South West
            </div>
            <div class="radio">
                @Html.RadioButtonFor(m => m.COUNTRY_AREA, 4, new { @class = "DoPopup", id = "South East", value = "" }) South East
            </div>
        </div>
    </div>
</body>
</html>