Passing a value with Ajax to code behind in ASP.NET

Question

I'm trying to pass a set of values using Ajax to a code-behind method and inserting passed data into a database table. But all I get are empty strings for string variables and 0 for int variable.

I guess that my Ajax code is not working properly, but since I'm totally new to this does anybody sees what I'm doing wrong and why I can not pass values from textboxes to my C# method.

This is a HTML code:

<div class="new-member-wrap">
 <div id="new-member" class="new-member-inner">
 <h2>Create new team member</h2>
 <ul class="form">
 <li>
 <label>Name:</label>
 <input type="text" class="in-text" />
 </li>
 <li>
 <label>Hours per week:</label>
 <input type="text" class="in-text" />
 </li>
 <li>
 <label>Username:</label>
 <input type="text" class="in-text" />
 </li>
 <li>
 <label>Email:</label>
 <input type="text" class="in-text" />
 </li>
 <li class="inline">
 <label>Status:</label>
 <span class="radio">
 <label for="inactive">Inactive:</label>
 <input type="radio" value="1" name="status" id="inactive" />
 </span>
 <span class="radio">
 <label for="active">Active:</label>
 <input type="radio" value="2" name="status" id="active" />
 </span>
 </li>
 <li class="inline">
 <label>Role:</label>
 <span class="radio">
 <label for="admin">Admin:</label>
 <input type="radio" value="1" name="status" id="admin" />
 </span>
 <span class="radio">
 <label for="worker">Worker:</label>
 <input type="radio" value="2" name="status" id="worker" />
 </span>
 </li>
 </ul>
 <div class="buttons">
 <div class="inner">
 <a href="javascript:;" class="btn green" id="saveMember">Invite team member</a>
 </div>
 </div>
 </div>
 </div>

This is my JS code:

<script type="text/javascript">
 $(function () {
 $('#saveMember').click(function () {
 $.ajax({
 type: "POST",
 contentType: "application/json; charset=utf-8",
 url: "team-members.aspx/InsertMember",
 dataType: "json",
 data: "{'Name':'" + $('#name').val() + "','UserName':'" + $('#username').val() + "','HoursPerWeek':'" + $('#hours').val() + "','Email':'" + $('#email').val() + "'}",
 success: OnSuccess,
 error: ErrorFound
 });
 });
 function OnSuccess(data) {
 var obj = data.d;
 if (obj == 'true') {
 $('#name').val('');
 $('#username').val('');
 $('#hours').val('');
 $('#email').val('');
 };
 }
 function ErrorFound(result) {
 alert(result);
 }
 });
 </script>

And this is code-behind:

 [WebMethod]
 [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
 public static string InsertMember(string Name, string UserName, string HoursPerWeek, string Email)
 {
 string retMessage = string.Empty;
 string ConnectionString = "Data Source=PRACTICE-001;Initial Catalog=n.mosorinski;User ID=n.mosorinski;Password=n.mosorinski;MultipleActiveResultSets=True;Application Name=EntityFramework";
 using (SqlConnection con = new SqlConnection(ConnectionString))
 {
 string Query = "insert into TeamMember(Name, UserName, HoursPerWeek, Email) values(@Name,@UserName,@HoursPerWeek,@Email)";
 using (SqlCommand cmd = new SqlCommand(Query, con))
 {
 con.Open();
 cmd.Parameters.Add("@Name", Name);
 cmd.Parameters.Add("@UserName", UserName);
 cmd.Parameters.Add("@HoursPerWeek", HoursPerWeek);
 cmd.Parameters.Add("@Email", Email);
 int AffectedRow = cmd.ExecuteNonQuery();
 if (AffectedRow == 1)
 {
 retMessage = "true";
 }
 else
 {
 retMessage = "false";
 }
 }
 return retMessage;
 }
 }

So the problem is that I got empty strings and 0 (for HoursPerWeek) instead of values from textboxes.

• Andrei: There is no element on your page with id name, username, hours or email. And yet this is what you are trying to select via jquery
• nemo_87: @Andrei damn...I'm so stupid. I have so many similar groups of controls on the same page, and I've gave IDs name, username, hours and email to wrong ones. Thank you very much for pointing me on this stupid mistake.

Answer 1

Add ID's to your HTML code:

<li>
 <label>Name:</label>
 <input id="name" type="text" class="in-text" />
</li>
<li>
 <label>Hours per week:</label>
 <input id="hours" type="text" class="in-text" />
</li>
<li>
 <label>Username:</label>
 <input id="username" type="text" class="in-text" />
</li>
<li>
 <label>Email:</label>
 <input id="email" type="text" class="in-text" />
 </li>

Answer 2

Where are these element?

• name
• username
• hours
• email

• nemo_87: Just fixed what I did. I was stupid enough to give those IDs to some other elements on the same page...