How to pass text to code behind in jquery that opens a gridview in modal pop up

Question

0.00/5 (No votes)

See more:

So I have few buttons in a web form where, the below jquery is executed.
It opens the modal pop up with the Text appended to Title. And the Text is button.Text which is a parameter to server side function.

JavaScript

function getBinDets(bin)
        {
            debugger;
            var url = 'DisplayGrid.aspx?param=' + encodeURIComponent(bin)
            var frame = $('<iframe/>').css('border', '0').attr({
                'src':url,
                'width': '100%',
                'height':'100%'

            });
            $("#modalbinDets")
                .clear().append(frame)
                .dialog({
                        title: "Bin Details: " + bin,
                        dialogClass: 'dialog_style1',
                        autoOpen: true,
                        modal: true,
                        height: 300,
                        width: 600,
                        open: function (event, ui) {
                            $('#modalbinDets').css('overflow', 'hidden');
                        },
                        buttons: {
                            Close: function () {
                                $(this).dialog("close")

                            }
                        }
                    }).prev(".ui-dialog-titlebar").css("background", "lightblue");
        }

Now, I want to bind the Gridview in the modal pop up

server side method :

VB.NET

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            BinItems()
        End If
    End Sub
    Public Sub BinItems(ByVal bin As String)
        Dim ds As New DataSet
        Dim data As New List(Of String)
        Try

            ds = db.displayAnalysis("14", bin)

            GridView1.DataSource = ds.Tables(0)
            GridView1.DataBind()
        Catch ex As Exception

        End Try

    End Sub

I am binding a dummy row in page load first.
And my grid is like below

ASP.NET

<div id="modalbinDets" >
           <asp:GridView ID="GridView1" runat="server" AllowPaging="true" AutoGenerateColumns="false">
               <Columns>
                   <asp:BoundField ItemStyle-Width="150px" DataField="baitem" HeaderText="Item" />
                   <asp:BoundField ItemStyle-Width="150px" DataField="baqoh" HeaderText="On Hand" />
                   <asp:BoundField ItemStyle-Width="150px" DataField="baqcm" HeaderText="Committed" />
                   <asp:BoundField ItemStyle-Width="150px" DataField="available" HeaderText="Available" />
                   <asp:BoundField ItemStyle-Width="150px" DataField="onhold" HeaderText="On Hold" />
                   <asp:BoundField ItemStyle-Width="150px" DataField="icdsc1" HeaderText="icdsc1" />
                   <asp:BoundField ItemStyle-Width="150px" DataField="icdsc2" HeaderText="icdsc2" />
               </Columns>
           </asp:GridView>
       </div>

What I have tried:

So far, I have tried the modal pop, getting the Text of clicked button and my code behind dataset with results are ready.

I do not know how to pass the text to code behind function(as below). And bind the results in Gridview on modal pop up.

Can someone please help me with this?

Posted 23-Feb-16 8:48am

sudevsu

Updated 24-Feb-16 8:57am

v6

Add a Solution

Comments

Sinisa Hajnal 24-Feb-16 4:47am

Read jQuery documentation, there are examples on how to pass data to modal dialog. If memory serves, you just add data attribute and that is all.

The above code is NOT calling any server side methods so I have no idea what you tried. Please post your server calling method and we can figure something out.

sudevsu 24-Feb-16 11:49am

I did add server side method. Please look at MyFun() in "What I have tried"

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2016-02-24T08:20:00

Solution 1

Create a second page which displays just the GridView with the data you want to display. Pass the parameter in the querystring.

You then have two options to display it in a jQuery UI dialog. You can either create an <iframe> pointing to the second page, and display that in the dialog:

JavaScript

var url = 'DisplayGrid.aspx?param=' + encodeURIComponent(bin);

var frame = $('<iframe/>').css('border', '0').attr({
    'src': url,
    'width': '100%',
    'height': '100%'
});

$('#modalbinDets')
    .empty().append(frame)
    .dialog(...

Or you can use jQuery's .load()[^] method to load the content of the second page directly into your dialog:

JavaScript

var url = 'DisplayGrid.aspx?param=' + encodeURIComponent(bin);

$('#modalbinDets')
    .load(url + ' body > *')
    .dialog(...

The ' body > *' on the end of the URL specifies the elements from the loaded document that you want to insert into the matched element. If you only want to insert a specific part of the page, you can wrap it in an element with a known ID and update this selector to point to that element.

NB: If your grid view includes things like paging, editing, or anything else that causes a postback, you'll need to use the <iframe> option.

Posted 24-Feb-16 8:20am

Richard Deeming

Updated 24-Feb-16 9:13am

v2

Comments

sudevsu 24-Feb-16 14:39pm

Before I saw your solution, I have had few other tries in program and updated the question.

Richard Deeming 24-Feb-16 14:43pm

No, you can't do that. The GridView is a server-side control; you can't bind it to data on the client.

The simplest option is, as I said, to create a separate page to return the GridView. Alternatively, you'll need to return the data to the client and use a javascript grid control to bind it.

Richard Deeming 24-Feb-16 14:47pm

No need; just bind the grid as you normally would, using the parameter from the querystring. That page is going to generate the HTML that you'll either display in an <iframe> or load into the <div> in your main page.

sudevsu 24-Feb-16 14:52pm

I have updated as per your suggestion but my parameter is not getting to a variable to pass to the method in Page load of DisplayGrid.aspx

Richard Deeming 24-Feb-16 14:55pm

You need to read the parameter from the Request.QueryString collection, and then pass it to your method:

BinItems(Request.QueryString["param"]);

Also, an immature part of me just sniggered at the name displayBinAnal. :)

sudevsu 24-Feb-16 14:56pm

Lol. It means analysis.

sudevsu 24-Feb-16 15:05pm

I am not sure if you understood the issue here. Each time a button is clicked on Page1.aspx, the text of the button is passed as parameter to DisplayGrid.aspx and it then Binds the Grid. And I want to display this Grid in a Modal pop up.

Richard Deeming 24-Feb-16 15:08pm

Yes, I have understood that perfectly. Perhaps you haven't understood the answer?

When you click on the button, the Javascript code displays a modal popup. Inside that popup, you add an <iframe> which displays the HTML returned from the DisplayGrid.aspx page. The parameter is passed to that page via the querystring, and from there to the method which binds the grid.

This really isn't complicated!

sudevsu 24-Feb-16 15:11pm

"$(...).clear is not a function" is the error I got when I did as per your suggestion. At this line ".clear().append(frame)". I removed this line and it showed the modal pop up with empty frame. No grid is bound

Richard Deeming 24-Feb-16 15:14pm

Whoops! That should be empty(), not clear():
.empty() | jQuery API Documentation[^]

sudevsu 24-Feb-16 15:19pm

Oh yeah ... this worked. I am looking more in SO these days because few experts here aren't helping like you usually do. I regret my decision now. Thank you so much.