CODEWITHSUNDEEP
javascriptjqueryasp.netasp.net-mvcasp.net-mvc-4
Jean Tehhe
Jean Tehhe

Reputation: 1337

Call to pop-up from Java script in ASP page

Im using the following script in the ASP page (MVC5 - index.cshtml file - view),what I need is that instead of the alert box to open pop-up window with user and password,how should I do that? in the mvc project tool box there is control but how should I create them in pop-up and call it inside the 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'
        });
       } 
           } 
         }); 
      }); 
</script>

Add my view code

@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'
    });
   } 
       } 
     }); 
  });

Hai 
<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>

Upvotes: 0

Views: 466

Answers (2)

Ashwini Verma
Ashwini Verma

Reputation: 7525

In mvc jquery-ui library is already included. just add the particular bundle.

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

Now you can use jquery ui dialog() as alert

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

Upvotes: 0

RGS
RGS

Reputation: 5211

 $("#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'
            });
           } 
 });

Demo:

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

Upvotes: 1

Related Questions