How to Display Details in Bootstrap Modal popup in MVC

Question

in list page when user click in details button i want to display details in popup window. any one have idea how to factch and display details in popup window..

Dr.Ajay Kashyap · Answer

Ramesh Sir ::- List Method And Details Method :- [HttpGet] public ActionResult ContactUsList() { var contactus = db.ContactUs.ToList(); return View(contactus); } [HttpGet] public ActionResult Details(long id) { var contactus = db.ContactUs.Find(id); //return View(contactus); return PartialView(_Details contactus); } List Page View :- @model IEnumerable @{ ViewBag.Title = ContactUs List; Layout = ~/Views/Shared/_HomeLayout.cshtml; var grid = new WebGrid(source: Model canSort: true rowsPerPage: 15); grid.Pager(WebGridPagerModes.All); int firstRecord = (grid.PageIndex * grid.RowsPerPage) + 1; int lastRecord = (grid.PageIndex * grid.RowsPerPage) + grid.Rows.Count(); } ContactUs List @grid.GetHtml( tableStyle: table table-responsive backcolor table-striped table-bordered table-hover headerStyle: wedgrid-header footerStyle: webgrid-footer alternatingRowStyle: webgrid-alternating-row rowStyle: webgrid-row-style columns: grid.Columns ( grid.Column(ContactUsId ContactUs Id canSort: false) grid.Column(Name Full Name canSort: false) grid.Column(PhoneNo Phone Number canSort: false) grid.Column(Type Message Type canSort: false) grid.Column(Message Message canSort: false) grid.Column(EmailId Email Id canSort: false) grid.Column(CreatedOn Created Date canSort: false) grid.Column( Action format:@ Details ) ) ) This Is Details PartialView:- @model ShopINdeal.Models.ContactU × FriendsInfo @Html.DisplayNameFor(model => model.Name) @Html.DisplayFor(model => model.Name) @Html.DisplayNameFor(model => model.PhoneNo) @Html.DisplayFor(model => model.PhoneNo) @Html.DisplayNameFor(model => model.Message) @Html.DisplayFor(model => model.Message) @Html.DisplayNameFor(model => model.Type) @Html.DisplayFor(model => model.Type) @Html.DisplayNameFor(model => model.EmailId) @Html.DisplayFor(model => model.EmailId) @Html.DisplayNameFor(model => model.OfficeNo) @Html.DisplayFor(model => model.OfficeNo) @Html.DisplayNameFor(model => model.Address) @Html.DisplayFor(model => model.Address) @Html.DisplayNameFor(model => model.Createdby) @Html.DisplayFor(model => model.Createdby) @Html.DisplayNameFor(model => model.CreatedOn) @Html.DisplayFor(model => model.CreatedOn) @Html.DisplayNameFor(model => model.UpdatedBy) @Html.DisplayFor(model => model.UpdatedBy) @Html.DisplayNameFor(model => model.UpdatedOn) @Html.DisplayFor(model => model.UpdatedOn) @Html.DisplayNameFor(model => model.Active) @Html.DisplayFor(model => model.Active) @Html.DisplayNameFor(model => model.IsDelete) @Html.DisplayFor(model => model.IsDelete) @Html.DisplayNameFor(model => model.IsRejected) @Html.DisplayFor(model => model.IsRejected) @Html.DisplayNameFor(model => model.DeletedAt) @Html.DisplayFor(model => model.DeletedAt) @Html.DisplayNameFor(model => model.DeleteReason) @Html.DisplayFor(model => model.DeleteReason) @section scripts { var TeamDetailPostBackURL = '/Home/Details'; $(function () { $(.anchorDetail).click(function () { debugger; var $buttonClicked = $(this); var id = $buttonClicked.attr('data-id'); var options = { backdrop: static keyboard: true }; $.ajax({ type: GET url: TeamDetailPostBackURL contentType: application/json; charset=utf-8 data: { Id: id } datatype: json success: function (data) { debugger; $('#myModalContent').html(data); $('#myModal').modal(options); $('#myModal').modal('show'); } error: function () { alert(Dynamic content load failed.); } }); }); //$(#closebtn).on('click'function(){ // $('#myModal').modal('hide'); $(#closbtn).click(function () { $('#myModal').modal('hide'); }); }); }

Dr.Ajay Kashyap · Answer

remesh Sir Plz Tell Me How To fatch and display Details In popup window

Ramesh Palanivel · Answer

Hi Ajay Yes I have done that.. Use Bootstrap Modal pop up window.. It will help you!..