How open a dialog (modal) from c#

Question

My javascript:

/* Modal */

function DefaultModal() {
    $(".ModalBox").dialog("open");
}

$(function () {
    // Modal.
    $(".ModalBox").dialog({
        autoOpen: false,
        height: 410,
        resizable: false,
        draggable: false,
        width: 602,
        modal: true,
        open: function (type, data) {
            // include modal into form
            $(this).parent().appendTo($("form:first"));
        },
        buttons: {
            "Confirm": function () {

            }
        },
        close: function () {
//clear all text.
            $(this).find(':text').val('');
        }
    });
});

i have two ways to call my modal:

This one Works flawless:

<li><a href="javascript:void(0)" onclick="DefaultModal();">ADD contact</a></li>

---

and this one, not. i need one button that edit from my temporary table, into my modal.

---

            <asp:GridView ID="gvContato" runat="server" AutoGenerateColumns="False" OnRowCommand="RunComm"
                    DataKeyNames="IDCliente" AllowPaging="True" PageSize="10" Width="600px">
                    <Columns>
                <asp:BoundField DataField="IDCliente" Visible="false" />
                        <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                        <asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
                        <asp:BoundField DataField="Email" HeaderText="E-mail" SortExpression="Email" />

                        <asp:ButtonField ButtonType="Button" CommandName="Edit" Text="Edit">
                            <ItemStyle HorizontalAlign="Center" />
                        </asp:ButtonField>
                    </Columns>
                </asp:GridView>

protected void RunComm(object sender, GridViewCommandEventArgs e)
        {
            int IDSelecionado = (int)gvContato.DataKeys[Convert.ToInt32(e.CommandArgument)].Values[0];

            switch (e.CommandName)
            {
                case "Edit":
                    if (IDSelecionado > 0)
                    {
                        ScriptManager.RegisterClientScriptBlock(this.upModalContato, this.upModalContato.GetType(), "Modal", "DefaultModal();", true);
                    }
                    break;
            }

        }

My edit button is doing this:

he opens my dialog, but also, show it in my body (not only as modal, but also as DIV below my gridview). Besides that, if i keep opening and closing my dialog (using my edit button) without save the information, he keep creating commas in all my textbox; Like when you do some array in javascript.

i don't know why!?

Any ideas? I'm not sure if I made ​​myself understandable here, if not, tell me I'm missing.

Thanks, Regards.

EDIT:

PS: i'm using UpdatePanel!

EDIT2: TYPO

EDIT3: Why am i doing this?

My goal:

• Load one gridview with data from my database (real data).
• put in this gridview temporary data saved from my modal (temporary data).
• Exclude/Edit (in the modal), permanently, my temporary data.
• Exclude/Edit (in the modal), temporarily, my real data.

after all changes, saved the final data (temporary and reals data) in my database.

for achieve this, i'm saving my data in my view state (i know sucks, but i'm out of ideas at moment)

Following @NerdFury solution, i made this: (This still not work as i need! he opens the modal, but does not load the data in the fields. this code also, open my table (modal) in my html body, with the data.)

CSharp:

        protected void btnEditModal_Click(object sender, EventArgs e)
        {
            this.ddlDepartamentoContato.SelectedIndex = 1;
            this.ddlCargoContato.SelectedIndex = 2;
            this.ckAprovadorContato.Checked = true;

        }

html:

                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:Button ID="btnEditModal" runat="server" Text="Edit" OnClientClick="DefaultModal();" CausesValidation="false" OnClick="btnEditModal_Click" />
                            </ItemTemplate>
                        </asp:TemplateField>

But i still have the problem with the modal, the dialog opens, but the table also appears on the screen. I used some static data in the button event, to see if it's working, and he load this data in the table, but not in the modal.

PS: I figured (i believe at least), what is the problem.

asp:UpdatePanel

IF i remove it from my code, i'll load the data and everything works flawless, BUT it make the postback, and my Modal almost does not appear! He just "blink" in my screen.

Look at my actual code:

<asp:UpdatePanel ID="upModalContact" runat="server">
<ContentTemplate>
    <table>
        <tr>
            <td>
                <ul id="contatoModalButtonList">
                    <li><a href="javascript:void(0)" onclick="DefaultModal();">Add contact</a></li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>
                <asp:GridView ID="gvContact" runat="server" AutoGenerateColumns="False" OnPageIndexChanging="gvContact_PageIndexChanging"
                    DataKeyNames="IDCliente" AllowPaging="True" PageSize="10" Width="600px">
                    <Columns>

                        <asp:BoundField DataField="IDClient" Visible="false" />
                        <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                        <asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
                        <asp:BoundField DataField="Email" HeaderText="E-mail" SortExpression="Email" />

                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:Button ID="btnEditContactmodal" runat="server" Text="Edit" CausesValidation="false" OnClick="btnEditModal_Click" OnClientClick="DefaultModal();" />
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </td>
        </tr>
    </table>

</ContentTemplate>
</asp:UpdatePanel>

And

<table class="ModalBox" title="Contact">
<tr>
    <td colspan="2">
        <p class="validateTips"> Fields required (*).</p>
    </td>
</tr>
<tr>
    <td align="left" width="130px">
        <asp:Label Text="Name:" runat="server" ID="lblNameContact" />
    </td>
    <td>
        <asp:TextBox runat="server" ID="txtNameContact" CssClass="classNameContact" Width="400px" MaxLength="50" /> &nbsp; <label>*</label>
    </td>
</tr></table>

Answer 1

I DID IT!!!

i use 2 update panels to accomplish this. Based on this link (Thank you sir!)

<div class="ModalContact" style="display:none;width:375px;" title="Contact">
<asp:UpdatePanel ID="upModalContact" runat="server">
    <ContentTemplate>
        <table>

        </table>
    </ContentTemplate>
</asp:UpdatePanel>

It is important to note that the Update Panels are nested inside the dialog div. And also the GridView to display the list is also within an Update Panel

Answer 2

In your markup, you are setting the CommandName to 'Editar', then in the event handler, you are checking for the CommandName 'Edit'.

I don't see anywhere that you are using the id value, but that might be because you are trying to get the popup to work first before finalizing the data/behavior. But my other suggestion would be to look into using a template field instead of a buttonfield and use the OnClientClick event on a button instead.