调用ASP页面中的Java脚本弹出窗口

时间:2014-04-03 11:04:20

标签: javascript jquery asp.net asp.net-mvc asp.net-mvc-4

我在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>

2 个答案:

答案 0 :(得分: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/

答案 1 :(得分:0)

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

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

现在你可以使用jquery ui dialog()作为警告

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