0

I am doing a project in mvc and in that I have created a table. It works fine and what I need to get is that on one row I have given a link . On clicking on that link I have to get a popup form with the data same as that particular column.

view - Students.cshtml

<tr>
    <td style="font-weight:bold; text-align: center;">
         Sl No
    </td>
    <td style="font-weight:bold; text-align: center;">
        Name
    </td>
    <td style="font-weight:bold; text-align: center;">
        div
    </td>
    <td style="font-weight:bold; text-align: center;">
        <a href="@Url.Action("Home", "Admin", new { id = @item.ID})">
  <i class="fa fa-plus-circle" aria-hidden="true"></i>
  </a>
   </td>                                                
</tr>

Here My problem is, how can I get the popup form with the data of the students.cshtml form to the popup form. That is, the Sl.No, Name and div on that pop up form. whether need to write ajax script for popup?? but to pass data?? Don't know what to do. Can anyone please help me find a solution for this ??

user355
  • 39
  • 2
  • 10
  • For a modal you would probably need to use AJAX. Define an action in your controller which takes the student ID as parameter. The action would then return the `students.cshtml`. This would also required that you add an event listener on the table link and inside the handled you would call the action. – Andrei V Jul 25 '17 at 10:17
  • you should use an ajax call to populate the popup like you want – jamiedanq Jul 25 '17 at 10:17
  • @ Andrei V .. Sorry I didn't get what you said Can you please explain this ? – user355 Jul 25 '17 at 10:38
  • How can I use Ajax to get popup by passing id. Sorry that I am new to js with ajax. – user355 Jul 25 '17 at 10:41

1 Answers1

0

It's worth remembering that a modal popup is not a separate page but just some standard markup that is styled to look like it's sitting ontop of the current page.

On clicking on that link I have to get a popup form with the data same as that particular column.

If all of that information that you want to show is already on the page then there is no need to make an AJAX request to fetch it, instead you can use some basic JavaScript to show a modal popup when the link is clicked.

See How to create a modal popup using JavaScript? or How to create a modal popup using javascript and CSS for details of how to create a modal popup using JavaScript.

Fermin
  • 34,961
  • 21
  • 83
  • 129
  • actually this popup is an edit form I need to change the data in the popup so I need to pass the data in students.cshtml view to this popup form. This is my main problem to passing data through js. In the link as you given there is only for getting popup and not the data retrieving based on id ?? – user355 Jul 25 '17 at 10:35
  • Do you need to 'pass' it through JS? All of the data is already in the HTML page, you only need to show it again in a popup. Once the user has edited the data then you will need to post it from the popup form to the server to be saved but that is a different question. – Fermin Jul 25 '17 at 10:38
  • As you said I need to again show the data in the popup form and to save the data to db. But Updating is the next process before that I need to get all the details in this popup form. That is, in the HTML page I'll get a table will full details and for each column there is a link to get popup for editing. I need to get the form with data. And getting big Confusion in doing that – user355 Jul 25 '17 at 10:46