Semantic-ui: Data Submission using Semantic ui Modal in asp.net

[SagarLugade]

 <div class="ui modal" role="dialog" id="accmod" aria-labelledby="myModalLabel" aria-hidden="true" style="height: 200px; width: 300px">
            <div class="ui form">
                <asp:UpdatePanel runat="server" ID="up_EditMenu">
                    <ContentTemplate>

                        <div class="header">
                            Edit
                        </div>
                        <div class="ui content">
                            <asp:TextBox ID="txttreenodeName" runat="server"></asp:TextBox>
                            <%--<asp:RequiredFieldValidator ID="reqTreeNode" runat="server" ErrorMessage="Name is Required." ControlToValidate="txttreenodeName" Display="Dynamic"></asp:RequiredFieldValidator>--%>
                        </div>
                        <div class="actions">
                            <div class="ui buttons">
                                <asp:Button ID="BtnNo" runat="server" CssClass="ui red cancel button" Text="No" />
                                <div class="or" data-text="or"></div>
                                <asp:Button ID="Btnyes" runat="server" CssClass="ui orange button" Text="Yes" OnClick="Btnyes_Click" />
                            </div>
                        </div>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="Btnyes" EventName="Click" />
                    </Triggers>
                </asp:UpdatePanel>
            </div>
        </div>

protected void Btnyes_Click(object sender, EventArgs e)
{
try
{

        }
        catch (Exception ex)
        {

        }
    }

I am trying to insert data from semantic UI modal but it could not hit the code behind.
But if I'm remove "ui modal" from class then it works correctly

[awgv]

Hi @SagarLugade, how do you actually send it? Any console errors? Do you see the requests being made in “Network” tab of Developer Tools?

[SagarLugade]

I sending data using asp.net server side click event , not using Ajax. And there is no error in console

[awgv]

Semantic UI is most certainly not the culprit, and I think it’s better to ask about it in ASP.NET communities or StackOverflow. The following is a standard reply.

Thank you for posting, but although it’s a valid usage question, we’ve limited GitHub Issues to bug reports and feature requests, keeping the board more manageable for maintainers; see the contributing guidelines for more information on what kind of posts should find themselves into the GitHub Issues board.

To get answers or feedback that might allow you to repost or reopen this issue, please use one of our other support resources:

• Gitter chatroom
• Official forums
• StackOverflow

[nickcarpenter]

I can answer this. I use Semantic UI with ASP.NET and there are a few tricks you need to know.

When you apply 'ui modal' to an element, Semantic UI will detach it from the DOM and reinsert it before your BODY tag closes. One of the great annoyances of ASP.NET is that you can only have 1 form on the page and all your controls must be inside it to work.

When you trigger your modal, your form elements end up being moved outside of your form - so they are basically invisible to the code behind.

In order to get around this, you must tell Semantic UI not to detach your modal content from the DOM:

$('.ui.modal').modal({detachable: false}).modal('show');

Hope that helps.

[vishalrprajapati]

It really helped a lot.

Statement $('.ui.modal').modal({detachable: false}).modal('show'); solved my problem. I almost spend 2-3 hours to search for it and tried it again and again.

Thank you so much nickcarpenter.

[nickcarpenter]

@vishalrprajapati - glad I was able to help!

[vishalrprajapati]

@nickcarpenter Can you help me with Popup position?

I am using 'ui small modal' class for the popup in ASP.NET and I have added textbox and buttons on the popup. But when I clicks it, the popup goes in left side. I can only see half popup like below.

I have tried adding $('.ui.small.modal').modal('refresh') and it solved the problem but then the "Add" and "Cancel" button doesn't work. They are asp.net control and I have added click even code on server side.

[nickcarpenter]

@vishalrprajapati - can you post your code?

[vishalrprajapati]

@nickcarpenter Here is the files, Default is the master file and RS75 file is the content file.

Popup will be there in RS75 file.

RS75QualConfig.txt
DefaultMaster.txt