Hi micah,
I have created sample code which full-fill your requirement. So please refer the below code.
HTML
<form id="form1" runat="server">
<div>
<asp:Button ID="btnModel" Text="Open Model" runat="server" />
<br />
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">
Modal title</h4>
</div>
<div class="modal-body">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
Name:
</td>
<td>
<asp:TextBox ID="txtname" runat="server" />
</td>
<td>
Username:
</td>
<td>
<asp:TextBox ID="txtUserName" runat="server" />
</td>
</tr>
<tr>
<td>
ContentPost:
</td>
<td>
<asp:TextBox ID="txtcontentPost" runat="server" />
</td>
<td>
Comments:
</td>
<td>
<asp:TextBox ID="txtcomments" runat="server" />
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close</button>
<asp:Button ID="btnSubmit" Text="save" CssClass="btn btn-success" runat="server" />
</div>
</div>
</div>
</div>
<br />
<div id="dialog" style="display: none; top: 0; left: 45%; position: fixed; background-color: Yellow;
height: 50px; border: solid; line-height: 45px;">
<span id="lblText" style="color: Green; top: 50px;"></span>
</div>
</div>
<div>
<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.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
$('[id*=btnModel]').click(function () {
$('[id*=myModal]').modal('show');
return false;
});
$('[id*=btnSubmit]').click(function () {
var id = "1";
var name = $('[id*=txtname]').val();
var username = $('[id*=txtUserName]').val();
var contentPost = $('[id*=txtcontentPost]').val();
var comments = $('[id*=txtcomments]').val();
var senddate = 2017 - 07 - 31;
var imagename1 = "Image1";
var path = "path1";
var imageuser = "imagepath";
var status = "";
$.ajax({
type: "POST",
url: "Default.aspx/InsertCommenttype",
data: '{id:"' + id + '",name:"' + name + '",username:"' + username + '",contentpost:"' + contentPost + '",comments:"' + comments + '",senddate:"' + senddate + '",imagename1:"' + imagename1 + '",path:"' + path + '",imageuser:"' + imageuser + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
$('#myModal').modal('hide');
$("#lblText").html('Record saved successfully.');
$('#dialog').fadeIn('slow').delay(1000).fadeOut('slow');
// clear value
//$(".id").html('');
//$(".imageuser").attr('src', '');
//$(".username").html('');
//$(".name").html('');
//$(".senddate").html('');
//$(".contentpost").html('');
//$(".imagename1").html('');
//$(".path").html('');
},
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
return false;
});
});
</script>
</div>
</form>
C#
[WebMethod]
public static string InsertCommenttype(string id, string name, string username, string contentpost, string senddate, string comments, string imageuser, string imagename1, string path)
{
string constr = ConfigurationManager.ConnectionStrings["DB"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("INSERT INTO [POSTS](UserName,fName,Content,ID,PostDate,Comments,FImageName,ImageName,TotalCount,Path) VALUES(@UserName,@fName,@Content,@ID,@PostDate,@Comments,@FImageName,@ImageName,@TotalCount,@Path)"))
{
cmd.Connection = con;
cmd.CommandType = CommandType.Text;
// cmd.Parameters.AddWithValue("@ID", id);
cmd.Parameters.AddWithValue("@UserName", HttpContext.Current.Session["userName"].ToString());
cmd.Parameters.AddWithValue("@fName", name);
cmd.Parameters.AddWithValue("@Content", contentpost);
cmd.Parameters.AddWithValue("@PostDate", senddate);
cmd.Parameters.AddWithValue("@ID", id);
cmd.Parameters.AddWithValue("@Comments", comments);
cmd.Parameters.AddWithValue("@FImageName", imageuser);
cmd.Parameters.AddWithValue("@ImageName", imagename1);
cmd.Parameters.AddWithValue("@TotalCount", 1);
cmd.Parameters.AddWithValue("@Path", path);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
return "Your Submited";
}
Vb.Net
<WebMethod> _
Public Shared Function InsertCommenttype(id As String, name As String, username As String, contentpost As String, senddate As String, comments As String, _
imageuser As String, imagename1 As String, path As String) As String
Dim constr As String = ConfigurationManager.ConnectionStrings("DB").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand("INSERT INTO [POSTS](UserName,fName,Content,ID,PostDate,Comments,FImageName,ImageName,TotalCount,Path) VALUES(@UserName,@fName,@Content,@ID,@PostDate,@Comments,@FImageName,@ImageName,@TotalCount,@Path)")
cmd.Connection = con
cmd.CommandType = CommandType.Text
' cmd.Parameters.AddWithValue("@ID", id);
cmd.Parameters.AddWithValue("@UserName", HttpContext.Current.Session("userName").ToString())
cmd.Parameters.AddWithValue("@fName", name)
cmd.Parameters.AddWithValue("@Content", contentpost)
cmd.Parameters.AddWithValue("@PostDate", senddate)
cmd.Parameters.AddWithValue("@ID", id)
cmd.Parameters.AddWithValue("@Comments", comments)
cmd.Parameters.AddWithValue("@FImageName", imageuser)
cmd.Parameters.AddWithValue("@ImageName", imagename1)
cmd.Parameters.AddWithValue("@TotalCount", 1)
cmd.Parameters.AddWithValue("@Path", path)
con.Open()
' cmd.ExecuteNonQuery();
con.Close()
End Using
End Using
Return "Your Submited"
End Function
Screenshot