Open bootstrap Modal Popup on Button click and save the popup value in database using jQuery Ajax in ASP.Net

Hi JOYSON,

There is no need of taking asp button for opening the modal onclick of it instead what you can do is take button element and set its attribute data-toggle="modal" data-target="#modalDivId" like so that there is no need of writing extra code of jquery or anything else.

I have created a sample which full fill your requirement you need to modify the code according to your need.

HTML

<div>
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">
        Open Modal</button>
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog" style="width: 400px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        &times;</button>
                    <h4 class="modal-title">
                        Login</h4>
                </div>
                <div class="modal-body">
                    <table>
                        <tr>
                            <td>
                                <span class="text-danger">UserName: </span>
                            </td>
                            <td>
                                <asp:TextBox ID="txtUserName" CssClass="form-control" Width="250px" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="text-danger">Password: </span>
                            </td>
                            <td>
                                <asp:TextBox ID="txtPassword" CssClass="form-control" Width="250px" runat="server" />
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer" style="text-align: center">
                    <button id="btnSave" type="button" class="btn btn-primary" data-dismiss="modal">
                        Save</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        table
        {
            border: 0px solid #ccc;
        }
        table th
        {
            background-color: #F7F7F7;
            color: #333;
            font-weight: bold;
        }
        table th, table td
        {
            padding: 5px;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(function () {
            $('[id*=btnSave]').click(function () {
                var UserDetail = {};
                UserDetail.UserName = $('[id*=txtUserName]').val();
                UserDetail.Password = $('[id*=txtPassword]').val();
                $.ajax({
                    type: "POST",
                    url: "Default.aspx/UserDetails",
                    data: '{UserDetail :' + JSON.stringify(UserDetail) + '}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        alert(response.d);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });
            });
        });
    </script>
</div>

C#

[WebMethod]
public static string UserDetails(UserDetail UserDetail)
{
    //your saving code comes here.
    return "Data Saved Successfully";
}

public class UserDetail
{
    public string UserName { get; set; }
    public string Password { get; set; }        
}

VB.Net

<WebMethod> _
Public Shared Function UserDetails(UserDetail As UserDetail) As String
	'your saving code comes here.
	Return "Data Saved Successfully"
End Function

Public Class UserDetail
	Public Property UserName() As String
		Get
			Return m_UserName
		End Get
		Set
			m_UserName = Value
		End Set
	End Property
	Private m_UserName As String
	Public Property Password() As String
		Get
			Return m_Password
		End Get
		Set
			m_Password = Value
		End Set
	End Property
	Private m_Password As String
End Class

ScreenShot