render partial view inside bootstrap modal pop up dynamically in .net core
Hello everyone!
Recently, I’ve been tasked with doing a project based off the conoso project on YouTube according to my professor. However, after overcoming some failures, my biggest problem currently is populating the modal via Ajax and mvc/api controller with some other files similar to the Contoso Project. Except, I’m 4 version ahead. Now, I’m not asking for a direct answer but I was wondering what is the proper way to populate a modal given that already have the structure within my razor page and logic in my Ajax js and controller, but I keep getting null references as a response. I’m currently using a JSON file for this project and I figured out how to populate containers but not modals. I found out page view does the trick for server side rendering unlike how I populated my containers by refresh. So I was wondering how I could do this and what would you recommend. Thank you!
10 Replies
By the time, I receive answers. I will have submitted this project, this question is out of curiosity and finding an appropriate solution.
@Roshane waait don't submit it yet! I'm thinking 😄
So you have a
1. You have the modal structure set up in your Razor page.
2. You have AJAX code ready to fetch data and a controller to handle requests.
3. You're using a JSON file as your data source.
4. You're able to populate containers but facing issues with populating modals, encountering null references.
Did i get that right?
I would suggest you verify that the MVC/API controller method handling the AJAX call is correctly returning data, as these problems most often stem as a result of improper implementation of controller methods. Use breakpoints or logging to check if the method is executed and if it accesses the JSON file correctly, if need be. Once you have reached successful AJAX response, use JavaScript or jQuery to populate the modal elements with the received data.
You could also replace the dynamic data fetching with static data to ensure that the modal populating mechanism works independently of the AJAX call, to further narrow down where the issue comes from
Once you identify whether it's the data fetching, the controller, the AJAX call, or the modal population causing the issue, you can focus your efforts on that specific area.
got it!
correct!
great! then i'd give a shot at the troubleshooting steps mentioned above and let me know!
Yea. Basically, when I click on the rating to check out the professor in this case. It doesnt fetch the data and even at times throws a null exception as I wrote it my js. However, I took a step back from using the api controller as was shown in the tutorial to use and decided to go for the MVC controller which allows _pageview. From there I did research and found information how to do so but I still wasn't able to fetch data. I know there's nothing wrong with my json file given that I had no trouble populating my professor containers but since I am working on the server side. Ajax + C# remained in the game. Originally I tried the CRUD method but that didnt work as I og https://www.codaffection.com/asp-net-core-article/jquery-ajax-crud-in-asp-net-core-mvc/. So I went for pageview : https://www.aspsnippets.com/Articles/3443/Render-Partial-View-inside-Bootstrap-Modal-Popup-in-ASPNet-Core-Razor-Pages/. Which got me to where I am currently stuck at.
CodAffection
jQuery Ajax CRUD in ASP.NET Core MVC with Modal Popup - CodAffection
An article on how to use jQuery Ajax for CRUD operations in ASP.NET Core MVC with the help of Bootstrap Modal Popup.
ASPSnippets
Render Partial View inside Bootstrap Modal Popup in ASPNet Core Raz...
ASP.Net,AJAX,jQuery,Entity Framework,Bootstrap,Partial View,Core,Razor Pages
Here Mudassar Khan has explained with an example, how to render Partial View inside Bootstrap Modal Popup in ASP.Net Core Razor Pages.
The Partial View will be populated and fetched using jQuery AJAX and finally it will be rendered as HTML inside Bootstrap Modal Popup ...
At the moment, I've left the api controller while connecting the modal only to the MVC pageview cs on the top. Though, it may come back to hurt me.
Currently, I'm investigating the js as suggested
the $ may be a typo i made in the razor but the others are concurrent:
