Getting JavaScript and ASP.NET Interaction Together

Question

Here's the definition of my ASP.NET GridView control:

In this GridView, I have the following template field:

That OnClientClick="showConfirm(this); return false;" method is shown below. I don't claim to understand all of it because I got it from another post of mine (ASP.NET GridView ItemTemplate LinkButton Support for RowCommand AFTER JavaScript Confirmation).

I did understand enough about that JavaScript that I found online to correctly include these two HTML tags to get it all to work:


  CONFIRM: Delete this item?

Now that I have that all working, I realize the end result is still lacking.

All that displays in my pop-up window is a vague confirmation dialog.

screenshot

I was clicking to delete a row entry, but I mistakenly clicked the wrong row!

I did not know this, so I proceeded to click OK to confirm, then noticed the wrong row getting deleted as I stepped through my code.

I started looking at how to include additional data in my dialog box, which led me to the article c #, asp.net interaction with js with this little bit of code:

ASP.NET binding c #: 
<% # Bind ("column name")%> 
<% # Eval ("column name")%> 

The  binding c #: 
 

The OnClientClick embedded js function (c # parameter is not passed): 
OnClientClick = "js function (parameter)" 

The OnClientClick embedded js function (pass a c # parameters): 
The OnClientClick = '<% # Eval ("column name", "js function ({0})")%>'> 
OnClientClick = '<% # Eval ("column name", "javascript: js function (\" {0} \ ")")%>'> 

The OnClientClick embedded js function (passing two or more c # parameters): 
OnClientClick = '<% # String.Format ("js function ({0}, {1}", Eval ("column name"), Eval ("column name"))%>' 

c # embedded js function: 
Response.Write ("

David Bennington · Accepted Answer

function showConfirm(source) {
    ...
  }

You can change the signature of this method to take additional parameters, e.g. itemName, and you could modify the js to alter the text that the popup is displaying (you would need to change your html a little, but no biggie). Have you inspected the source to see what it contains? It might already have the information you want to display.

EDIT

Played with this, and have a quick way to get this done. I'm using jquery.

Change the popup html to be like so or similarm where the span is going to contain the additional data:



    
      CONFIRM: Delete ?

Update the button in your grid with a data=itemName="" attribute like below. Note my data class id called 'DataClass', and has a property called 'Name'. You can change this to match your data:

Finally, change your function to inject this value into the popup:



    function showConfirm(source) {
        //I use jquery to get the data-itemName attribute value and set it on the span
        var sourceElement = $(source);
        var additionalInfo = sourceElement.attr('data-itemName');
        var descriptionElement = $('#popupDescription');
        descriptionElement.text(additionalInfo);
        this._source = source;
        this._popup = $find('mdlPopup');
        this._popup.show(); //  find the confirm ModalPopup and show it    
    }

Granted, this is far from an elegant solution, but it works.

Getting JavaScript and ASP.NET Interaction Together

Is there a way, using the code I have shown, that someone can show me how to pass more data to my Confirmation Dialog Box?

How would I edit this to include that value?

Answers (1)

Related Questions