Hi JOYSON,
I have created a sample which full fill your requirement you need to modify the code according to your need.
Refer below sample code.
SQL
CREATE TABLE [dbo].[UserRegistrationDetails](
[UserID] [int] IDENTITY(1,1) NOT NULL,
[FirstName] [nvarchar](max) NULL,
[LastName] [nvarchar](max) NULL,
[Gender] [nvarchar](max) NULL
) ON [PRIMARY]
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">
×</button>
<h4 class="modal-title">
Registration</h4>
</div>
<div class="modal-body">
<table>
<tr>
<td>
<span class="text-danger">First Name: </span>
</td>
<td>
<asp:TextBox ID="txtFirstName" CssClass="form-control" Width="250px" runat="server" />
</td>
</tr>
<tr>
<td>
<span class="text-danger">Last Name: </span>
</td>
<td>
<asp:TextBox ID="txtLastName" CssClass="form-control" Width="250px" runat="server" />
</td>
</tr>
<tr>
<td>
<span class="text-danger">Gender: </span>
</td>
<td>
<asp:RadioButtonList ID="rblGender" CssClass="radio-inline" runat="server">
<asp:ListItem Text="Male" Value="M" />
<asp:ListItem Text="Female" Value="F" />
</asp:RadioButtonList>
</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 = {};
debugger;
UserDetail.FirstName = $('[id*=txtFirstName]').val();
UserDetail.LastName = $('[id*=txtLastName]').val();
UserDetail.Gender = $('[id*=rblGender] input:checked').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)
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("INSERT INTO UserRegistrationDetails VALUES(@FirstName,@LastName,@Gender)"))
{
cmd.Parameters.AddWithValue("@FirstName", UserDetail.FirstName);
cmd.Parameters.AddWithValue("@LastName", UserDetail.LastName);
cmd.Parameters.AddWithValue("@Gender", UserDetail.Gender);
cmd.Connection = con;
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
return "Data Saved Successfully";
}
public class UserDetail
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string Gender { get; set; }
}
VB.Net
<WebMethod()> _
Public Shared Function UserDetails(UserDetail As UserDetail) As String
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand("INSERT INTO UserRegistrationDetails VALUES(@FirstName,@LastName,@Gender)")
cmd.Parameters.AddWithValue("@FirstName", UserDetail.FirstName)
cmd.Parameters.AddWithValue("@LastName", UserDetail.LastName)
cmd.Parameters.AddWithValue("@Gender", UserDetail.Gender)
cmd.Connection = con
con.Open()
cmd.ExecuteNonQuery()
con.Close()
End Using
End Using
Return "Data Saved Successfully"
End Function
Public Class UserDetail
Public Property FirstName() As String
Get
Return m_FirstName
End Get
Set(value As String)
m_FirstName = value
End Set
End Property
Private m_FirstName As String
Public Property LastName() As String
Get
Return m_LastName
End Get
Set(value As String)
m_LastName = value
End Set
End Property
Private m_LastName As String
Public Property Gender() As String
Get
Return m_Gender
End Get
Set(value As String)
m_Gender = value
End Set
End Property
Private m_Gender As String
End Class
ScreenShot
