Home > DeveloperSection > Forums > How to show data in a modal(Popup) using Jquery
Sachin Singh
Sachin Singh

Total Post:26

Points:182
Posted on    March-30-2016 12:05 AM

 ASP.NET MVC C#  ASP.Net  JQuery  ASP.NET MVC  Entity Framework  Jquery UI  Razor 
Ratings:


 1 Reply(s)
 392  View(s)
Rate this:
Hi Everyone,

I want to display all users in model(Popup) using jQuery.
Here, Below my view page code is:

@{
    ViewBag.Title = "Users";
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.8.24.js"></script>
    <link href="~/Content/Site.css" rel="stylesheet" />
    <link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />
}
@Html.ActionLink("All Users", "User", "Home", null, new
{
    @class = "openDialog",
    data_dialog_id = "aboutDialog",
    data_dialog_title = "About Us"
})
<div id="aboutDialog">
<h2>Users</h2>
<p>
    //.................... 
</p>
<p><a href="javascript:void(0);" class="close">Close this Window</a></p>
    </div>
 
<script type="text/javascript">
    $.ajaxSetup({ cache: false });
    $(document).ready(function () {
        $(".openDialog").live("click", function (e) {
            e.preventDefault();
            $("<div></div>")
                .addClass("dialog")
                .attr("id", $(this)
                .attr("data-dialog-id"))
                .appendTo("body")
                .dialog({
                    title: $(this).attr("data-dialog-title"),
                    close: function () { $(this).remove(); },
                    modal: true,
                    height: 250,
                    width: 400,
                    left: 0
 
                })
            .load(this.href);
        });
 
        $(".close").live("click", function (e) {
            e.preventDefault();
            $(this).closest(".dialog").dialog("close");
        });
    });
</script>

 

Please Can anyone give me a solution.

Thank you.



Anupam Mishra

Total Post:135

Points:949
Posted on    May-02-2016 12:29 AM


Don't want to miss updates? Please click the below button!

Follow MindStick