How to use jQuery dialog() instead of confirm() from within C# code?

Question

I am a Frontenddeveloper without further knowledge of C#, so please excuse my maybe stupid question. I am currently trying to use jQuery UI Dialog to replace the common JavaScript alert() and confirm() boxes. This is working good so far in the Frontend but now I found this snippet in one of the C# pages and I don't know what's the best way to switch this from confirm() to jQuery dialog(). Any ideas?

string delCode = "javascript:"
     + "if ( confirm(\'Are you sure you wish to delete this?\')){ "
     + this.Page.ClientScript.GetPostBackEventReference(this, string.Empty)
     + ";} else { return false; }";

EDIT: After playing around a bit more I found out, that it will not work without adding an OnClientClick Attribute to prevent the Postback when clicking the button. How do I add this Attribute from within the Code behind? btnDelete.Attributes.Add("OnClientClick","foo"); does not work for me. What's the right way to solve this?

Here ist what I want to have, it's just simple JS so far (you see the C# snippet for the Button as a comment above the HTML content in the Fiddle): https://jsfiddle.net/SchweizerSchoggi/xts01hrx/16/

Is it .aspx or .cshtml? To determine if it is Web-Forms or MVC/Web-Api. — Greg
– Greg, Commented Apr 10, 2017 at 14:24
store output of this.Page.ClientScript.GetPostBackEventReference(this, string.Empty) in javascript variable and do same thing you did elsewhere — charlietfl
– charlietfl, Commented Apr 10, 2017 at 14:25
@Kris, it's just one more simple line: DeleteButton.Attributes.Add("onclick", delCode); — JonSnow
– JonSnow, Commented Apr 10, 2017 at 15:15

Greg · Accepted Answer · 2017-04-12 17:09:50Z

1

Sadly, to push JavaScript from server to client inside of Web-Form's you'll need to utilize the current code you have to implement. Often, to avoid the excessive Postback issue, I would force server side controls, like the LinkButton to disable the form submission.

<asp:LinkButton id="lbExample" runat="server" OnClientClick="launch(); return false;" Text="Launch Dialog" />

<script type="text/javascript">
     function launch() {
          $('[data-rel="Example-Modal"]').dialog({
               // Dialog logic.
          }
     }
</script>

This way it would work more like a traditional JavaScript in a web-page, or single page application. The official documentation based on the code above, which is correct extra functionality can be found here. As you denoted above, your only option to dynamically add:

ClientScript.RegisterOnSubmitStatement(this.GetType(), "ConfirmSubmit", jQuery);

You would simply create the button progmatically or find the button in the page, from code behind. I'll use the create, to show you what I mean:

public void Page_Load(...)
{
     var lb = new LinkButton();
     lb.OnClientClick = "launch();"
}

edited Apr 12, 2017 at 17:09

answered Apr 10, 2017 at 15:29

Greg

11.5k2 gold badges51 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

JonSnow Over a year ago

ok, I see. So I will go and give this a try - at least this might also be kind of "better readable", at least for us Frontend guys ;-) Thx Greg, for pushing me in the right way!

Greg Over a year ago

@SchweizerSchoggi Yeah, for front-end it is better to do that. Otherwise, you will mismatch and hodge podge front-end and back-end state. This will attempt to separate a bit for you. Web-Forms is pretty rough on JavaScript, also ClientIdMode="static" will be your friend also, unless you want to use a lot of CSS Classes.

JonSnow Over a year ago

how do I add the OnClientClick Attribute from within the Code Behind? Attribute.Add("OnClientClick","foo") does not work for me.. I need to solve it this way, otherwise I would have to change a huge amount of files.

Greg Over a year ago

@SchweizerSchoggi Updated answer with that as well. Keep in mind that until the JavaScript loads, the event won't fire since it isn't ready. Or if you add the attribute out of sequence it won't append to the button, so it has to be at Page_Load or before.

Collectives™ on Stack Overflow

How to use jQuery dialog() instead of confirm() from within C# code?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related