Introduction
In this article, we will implement a modal pop-up to display the detailed information of the user after clicking on the detail anchor. Here I am going to implement a modal popup on the list of my last article. So this is the view on which we are going to apply a modal popup.
View code
Enumerable<CodeFirst.Models.FriendsInfo>
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
@Html.ActionLink("View All", "Index")
@using (Html.BeginForm("Search", "Home", FormMethod.Post))
{
<table>
<tr>
<td>
<input type="text" id="txtName" name="searchparam" placeholder="type here to search" />
</td>
<td>
<input type="submit" id="btnSubmit" value="Search" />
</td>
</tr>
</table>
}
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Mobile)
</th>
<th>
@Html.DisplayNameFor(model => model.Address)
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Mobile)
</td>
<td>
@Html.DisplayFor(modelItem => item.Address)
</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 })*@
<a href="javascript:void(0);" class="anchorDetail" data-id="@item.Id">Details</a>
</td>
</tr>
}
</table>
The view looks like the following.

As we can see we have a detail anchor, with class anchor detail and with data-id, which will get the id of the clicked anchor and show the corresponding data to the modal (detail view) on screen.
We have an Action method Details(int id) which will return the partial view.
public ActionResult Details(int Id)
{
FriendsInfo frnds = new FriendsInfo();
frnds = db.FriendsInfo.Find(Id);
return PartialView("_Details", frnds);
} 

armando alejandroPosted Oct 31, 2021, 6:24 PM
Do you have an example such as the modal has a button that when click it will redirect to another page? In other words, how can I handle events in that popup?
a aPosted Apr 19, 2021, 2:51 PM
I'm getting a nested modalContent and I cant see the modal just the blurred background
MakubexxPosted Oct 12, 2020, 10:01 PM
Thank iou sr Shridar. i 've a question, ?Can apply this implement, for update or delete any record? Regards.
Kailash KhatriPosted Jun 14, 2020, 9:04 AM
It showing error 403 when i host application in web hosting i have gives all rights view file and folder but it showing same error please help me Email : [email protected]
Jhunard RiveraPosted Jan 8, 2020, 9:18 PM
What makes the program Dynamic content load failed. ?
Jhunard RiveraPosted Jan 8, 2020, 8:48 PM
Can you send the file sir ?
Jhunard RiveraPosted Jan 8, 2020, 8:15 PM
Where to place the modal popup ?
Jhunard RiveraPosted Jan 8, 2020, 8:14 PM
Hello Why is that the layout of my Home included in the modal ?
Umamaheswararao NagisettiPosted Dec 13, 2019, 7:08 AM
Please provide the videos
Dinesh GabhanePosted Nov 11, 2019, 1:13 AM
Nice Article. Thanks
Sara SamiPosted Sep 17, 2019, 7:32 AM
Hi pleas can you Implementing Modal Popup In Edit using MVC Application
G GarcíaPosted Aug 10, 2019, 2:23 PM
SImple and effective. Thanks
subhrendu karPosted Oct 31, 2018, 1:39 AM
Any link for downloading the source code?
Pardha SaradhiPosted Oct 12, 2018, 11:14 AM
Uncaught ReferenceError: options is not defined
Pardha SaradhiPosted Oct 12, 2018, 11:14 AM
Gettting json error Uncaught ReferenceError: options is not defined
Shivaranjini BhatPosted Aug 20, 2018, 2:54 AM
I'm cannot display popup on links after first link. Am i making some mistake?
Thomas TufugaPosted Jun 17, 2018, 6:11 PM
Thanks for the article, just wondering if you can link this modal popup when in the CREATE View? for instance, when I create a NEW person, when press 'SAVE' the modal popup will appear with the person details? You able to assist please?
burhan aliskanPosted Jun 8, 2018, 5:18 PM
[email protected] send me please
burhan aliskanPosted Jun 8, 2018, 5:16 PM
Hi please send me successfully file
Kevin MullarkeyPosted Apr 3, 2018, 10:35 AM
Where does the script section go? Which file?
Faizan SheikhPosted Nov 20, 2017, 6:34 AM
Hellow i am faizan .. i want open two popup window with one partial view and using one action
Michael AguirrePosted Oct 31, 2017, 1:39 PM
Hola Amigo una consulta por que no entra a success: function (data) {me podr?as ayudar por favor
Muhammed Naseef MPosted Oct 10, 2017, 8:12 AM
Plz anyone help me?
Muhammed Naseef MPosted Oct 10, 2017, 8:11 AM
Its working fine in page 1 of datatable, but if i clicked to page 2 and click detail button in datatable then its not working or its not calling jquery.
WaynePosted Aug 18, 2017, 3:31 PM
I got this to work! I have a small form that calculates a loan sheet. When I click submit i end on the partial page by itself. the calling form and pop are gone. Is there anyway to return the results back to the popup I used to use ModelPoopupExtneder in Webforms.
Karim NowerPosted Jul 8, 2017, 12:31 PM
Worked staright away. very useful. thanks
Saravanakumar SekaranPosted Jun 23, 2017, 2:42 AM
Wow awesome shridhar !!!
Arkadiusz CichurskiPosted May 7, 2017, 12:42 PM
Will someone could send me a example working code of this on email: [email protected]? Thanks in advance
Dr.Ajay KashyapPosted Apr 12, 2017, 5:32 AM
Sir where we have to place script and div for modal pop-up ln List Page or in partial view pls tell me
Sree LakshmiPosted Mar 22, 2017, 1:22 AM
Hi! my popup is not being visible. it's not detecting the link location href;javascript:void(0);
venkat ramanaPosted Feb 13, 2017, 8:17 AM
WatchitsoonEntities wsc = new WatchitsoonEntities(); wsc = db.WatchitsoonEntities.GetMovie_Info(id); return PartialView("IMovies", wsc); i am getting error in the place of "db" it showing that the name db does not exist in the current context.
Despoina DelPosted Jan 30, 2017, 5:25 AM
Worked perfect for me! Thank you :)
TrevPosted Jan 17, 2017, 9:11 AM
Anyone who might get lost like i did at first, make sure you put the script and the div for modal popup inside your main view for example in the index page, otherwise a pretty good tutorial
jagdish gujarPosted Jan 17, 2017, 7:57 AM
Very good article.It solves my problem .Everything is going perfect but I do not get data in my modal as I am accessing data from sql server 2008R2.
Biswa MahantaPosted Nov 11, 2016, 1:37 AM
Nice Article, But One request / suggestion that ..Please mention in which page, you are writting what. That would be a great help for new comers, as the structure in MVC is different comparing to plain ASP.NET.
trevor jonesPosted Nov 4, 2016, 5:39 PM
The ajax is wrong, the dataType should be html not json as that is what you are expecting back from the partial view
Hafidz FairizPosted Oct 10, 2016, 1:38 AM
Thanks it works as well.. When using Ajax, need too edit some script like this: $(document).on('click', '.anchorDetail', function () { });
Maximiliano BlascoPosted Sep 20, 2016, 2:33 PM
Muchas Gracias!!!! :)
Mahi AlefPosted Sep 4, 2016, 10:56 AM
I'm a little bit confused! Where did you put the javascript code? Where is that div for modal pop up? I'm a newbie so I would appreciate any extra explanation!
G GarcíaPosted Jul 7, 2016, 9:23 AM
Thanks, I was in a storm in a teacup. Very simple and easy.
Abhishek KumarPosted May 7, 2016, 10:51 AM
nice ..
Shridhar SharmaPosted Oct 29, 2015, 11:19 AM
thanks guys. Glad you all like this.
Ekrem TapanPosted Oct 29, 2015, 3:33 AM
good article
Atul RawatPosted Oct 29, 2015, 1:05 AM
nice article
Gowtham KPosted Oct 28, 2015, 10:53 AM
Good One
Shridhar SharmaPosted Oct 28, 2015, 10:51 AM
thanks all.
Mohammed IbrahimPosted Oct 28, 2015, 9:23 AM
nice
Nilesh JadavPosted Oct 28, 2015, 8:32 AM
Good Article
Sibeesh VenuPosted Oct 28, 2015, 7:27 AM
Nice Share
Humayun Kabir MamunPosted Oct 28, 2015, 5:01 AM
Nice...
Ravi PatelPosted Oct 28, 2015, 4:51 AM
nice article
Pramod KumarPosted Oct 28, 2015, 3:32 AM
Great One