Show Data using Modal.

Question

Hello everyone I have one query i want to show Dyanamic Data Click a button open a modal using mvc

Sachin Singh · Answer

$( ".anything" ).click(function () { debugger; var Id = $( this ).attr( "data-Id" ); $.ajax({ url: "/UserManagement/GetPlanDetail?Id=" +Id, type: "POST" , dataType: "Json" , cache: false , success: function (data) { debugger; if (jQuery.isEmptyObject(data.planName)) { $( "#plan-detaibdy" ).html( "" ); $( "#bdy" ).html( " No data Found " ); $( "#plan-detail" ).modal( 'show' ); } else { $( "#spPlanName" ).html(data.planName); $( "#spStarted" ).html(data.planSubscriptionDate); //$("#spValidTill").html(); $( "#spPlanPrice" ).html( "$" +data.planCost); $( "#plan-detail" ).modal( 'show' ); } } }); });

Guest User · Answer

Thanku Sachin sir it's working and Thans Mageshwaran R Sir .

Mageshwaran R · Answer

Hi Sourabh, Please try this code, MVC RAZOR Page: script type = "text/javascript" src = 'https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js' > script > script type = "text/javascript" src = 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js' > script > link rel = "stylesheet" href = 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' media = "screen" /> center > input type = "button" id = "btnShowPopup" value = "Show Popup" class = "btn btn-info btn-lg" /> center > div id = "MyPopup" class = "modal fade" role = "dialog" > div class = "modal-dialog" > div class = "modal-content" > div class = "modal-header" > button type = "button" class = "close" data-dismiss = "modal" > × button > h4 class = "modal-title" > h4 > div > div class = "modal-body" > div > div class = "modal-footer" > button type = "button" class = "btn btn-danger" data-dismiss = "modal" > Close button > div > div > div > div > Script: "text/javascript" > $( function () { $( "#btnShowPopup" ).click( function () { var title = "Greetings" ; var body = "Welcome to ASPSnippets.com" ; $( "#MyPopup .modal-title" ).html(title); $( "#MyPopup .modal-body" ).html(body); $( "#MyPopup" ).modal( "show" ); }); });