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!..

How to Display Details in Bootstrap Modal popup in MVC

eksypnos123