调用从 ASP 页中的 Java 脚本弹出

Question

我在ASP页面（MVC5 - index.cshtml文件-视图）中使用以下脚本，我需要的是而不是警报框要打开带有用户名和密码的弹出窗口，我该怎么办？在MVC项目工具箱中，有控件，但是我应该如何在弹出窗口中创建它们并在脚本中调用它

 <script type="text/javascript"> 
      $(document).ready(function () { 
         $("#M").change(function () { 
          if ($(this).val() == "F") { 

      $('#dv').dialog({
            width: 300, 
            height: 300,
            modal: true,
            resizable: true,
            open: function(type,data) {
              $(this).parent().appendTo("form");},
            autoOpen: true,  
            title: 'Sample'
        });
       } 
           } 
         }); 
      }); 
</script>

添加我的视图代码

@model IEnumerable<Ad.Models.Ad>
<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 type="text/javascript"> 
  $(document).ready(function () { 
     $("#M").change(function () { 
      if ($(this).val() == "F") { 

  $('#dv').dialog({
        width: 300, 
        height: 300,
        modal: true,
        resizable: true,
        open: function(type,data) {
          $(this).parent().appendTo("form");},
        autoOpen: true,  
        title: 'Sample'
    });
   } 
       } 
     }); 
  }); 

海

<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.Gender)
     </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.Gender, 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>

Answer 1

 $("#M").change(function () { 
          if ($(this).val() == "F") { 
              $('#dv').dialog({
                width: 300, 
                height: 300,
                modal: true,
                resizable: true,
                open: function(type,data) {
                  $(this).parent().appendTo("form");},
                autoOpen: true,  
                title: 'Sample'
            });
           } 
 });  

演示：

http://jsfiddle.net/TYHBq/2/

Answer 2

在 mvc 中，jquery-ui 库已经包含在内。 只需添加特定的捆绑包。

@Scripts.Render("~/bundles/jqueryui")

现在你可以使用 jquery ui dialog（） 作为警报

<script>
    $("<div>Test messsage</div>").dialog();
</script>