当用户在 ASP 中更改下拉值时打开弹出窗口答案

【问题标题】：Open pop up when user changes drop down value in ASP当用户在 ASP 中更改下拉值时打开弹出窗口
【发布时间】：2014-05-12 09:08:06
【问题描述】：

我创建了一个 MVC5 应用程序，并使用以下代码创建一个下拉列表。它有 2 个值，如女性和男性，默认值为男性。
我想在用户更改下拉值时打开一个带有文本字段的弹出窗口，我应该怎么做？

索引代码：

<td>
            @Html.DropDownListFor(modelItem => item.Genere, item.Genere)
        </td>

型号代码：

  public IEnumerable<SelectListItem> Genere
        {
            get
            {
                return new[]
                {
                    new SelectListItem {Value = "M", Text = "Male"},
                    new SelectListItem {Value = "F", Text = "Female"}
                };
            }
        }

更新视图代码

@model IEnumerable<Admin.Models.Admin>
<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='https://code.jquery.com/ui/1.9.2/jquery-ui.min.js'></script>


<script>
    $(document).ready(function () {
        var dialog = $('#dialog').dialog({
        });


        $('#SystemType').change(function () {
            //if($(this).val()=='F')
            dialog.dialog('open');
        });
    });
</script>
<h3>My APP</h3>


p>
    @using (Html.BeginForm())
    {

    }


    @*<br style="margin-bottom:240px;" />*@
    @Html.ActionLink("Create", "Create",
        null, htmlAttributes: new { @class = "mybtn" })
    <p>

    </p>


    <style type="text/css">
        a.mybtn {
            background: #fa0088;


        }
    </style>

  <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Email)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Geneder)
     </th>
            <th></th>
        </tr>


   @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Email)
                </td>
                <td>
                    @Html.DropDownListFor(modelItem => item.Geneder, item.Geneder, new { id = "M" })

                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
                    @Html.ActionLink("Details", "Details", new { id = item.ID }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.ID })
                </td>

            </tr>

    <script type="text/javascript">

        $(document).ready(function () {
            $('#M').change(function () {
                if ($(this).val() === "F") {
                    dialog.dialog('open');
                }
            });
        });

    </script>

【问题讨论】：

标签： c# html asp.net asp.net-mvc asp.net-mvc-4

【解决方案1】：

您可以在 jQuery 的帮助下完成。希望您已经在 MVC 5 应用程序中使用 jQuery

假设在你的 _layout.cshtml

<head>
<script src="@Url.Content("/scripts/jquery.js")" type="text/javascript" />

在视图中

@Html.DropDownListFor(modelItem => item.Genere, item.Genere, new {id="ddlGender"})

jQuery

$(document).ready(function(){
  $('#ddlGender').change(function(){
   if($(this).val()==="F")
   {
    //code for opening popup
   }
 });
});

【讨论】：

我认为在答案中添加您正在使用 jQuery 以及用户应该放置此代码的位置很重要。
谢谢，我是 Jquery 新手，所以我应该把这段代码放在哪里？在 HTML 标记之后？
@JeanTehhe，我更新了我的答案。您需要在您的 _layout 页面中引用 jQuery，并且我在您的 view.cshtml 中发布的 jQuery 代码
我尝试了一下，但它不起作用我在浏览器中看到查询的代码...2.当我将线条放入布局时，UI 发生了变化，为什么以及如何避免它?提前致谢！
@JeanTehhe，请在您的问题中添加带有 jQuery 脚本参考的布局代码

【解决方案2】：

将 jQuery 和 JQueryUI 添加到您的视图中后，将这段代码添加到您的视图中

靠近您的head 标签

  <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
  <script src='https://code.jquery.com/ui/1.9.2/jquery-ui.min.js'></script>

 <script>
 $(document).ready(function(){
       var  dialog=$('#dialog').dialog({
                                    hide:true
       });


     $('#Genere').change(function(){
       //if($(this).val()=='F')
        dialog.dialog('open');
      });
  });
  </script>
 </head>
 <body>
   <!-- ----     ------ -->

 <td>
        @Html.DropDownListFor(modelItem => item.Genere, item.Genere)
    </td>
   <!-- ----     ------ -->

并在视图末尾添加此 html

<div id='dialog'><input type='text' id='textb' class='textb'/></div>

【讨论】：

不确定 jquery ui 默认是否是 mvc.net 5 模板的一部分，但只需确保已将 jquery ui 脚本添加到包中。
谢谢贝拉什，我应该在哪里坑这段代码？在@foreach（模型中的变量项）{ @Html.DisplayFor(modelItem => item.name)
我没有任何正文标签我正在使用表格，当我将代码与 div 标签放在一起时出现错误：元素 div 不能嵌套到元素表，知道吗？
好的，我明白了！请粘贴您的整个视图代码，我可以帮助您编辑它。你可以用你的观点更新你以前的问题
我用相关代码更新帖子...提前致谢！