JQuery.ajax async postback in C # UserControl

Question

I am working on adding a task list to the project system and would like the creation of todo to trigger an asynchronous postback to update the database. I would really like to place this in usercontrol so that I can drop the task list onto the project page, task page, or a separate list page.

Here is what I have.

The user control is "TodoList.ascx", which is located in the Controls directory.

script that is located at the top of UserControl. You can see where I started creating jsonText for postback, but when it didn’t work, I just tried to publish an empty data variable and removed the variable 'string [] items from the AddTodo2 method.

<script type="text/javascript"> $(document).ready(function() { // Add the page method call as an onclick handler for the div. $("#divAddButton").click(function() { var jsonText = JSON.stringify({ tdlId: 1, description: "test test test" }); //data: jsonText, $.ajax({ type: "POST", url: "TodoList.aspx/AddTodo2", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg) { alert('retrieved'); $("#divAddButton").text(msg.d); }, error: function() { alert("error"); } }); }); });</script> 

The rest of the code is ascx.

 <div class="divTodoList"> <asp:PlaceHolder ID="phTodoListCreate" runat="server"> <div class="divTLDetail"> <div>Description</div> <div><asp:TextBox ID="txtDescription" runat="server"></asp:TextBox></div> <div>Active</div> <div><asp:CheckBox ID="cbActive" runat="server" /></div> <div>Access Level</div> <div><asp:DropDownList ID="ddlAccessLevel" runat="server"></asp:DropDownList></div> </div> </asp:PlaceHolder> <asp:PlaceHolder ID="phTodoListDisplayHeader" runat="server"> <div id="divTLHeader"> <asp:HyperLink ID="hlHeader" runat="server"></asp:HyperLink> </div> </asp:PlaceHolder> <asp:PlaceHolder ID="phTodoListItems" runat="server"> <div class="divTLItems> <asp:Literal ID="litItems" runat="server"></asp:Literal> </div> </asp:PlaceHolder> <asp:PlaceHolder ID="phAddTodo" runat="server"> <div class="divTLAddItem"> <div id="divAddButton">Add Todo</div> <div id="divAddText"><asp:TextBox ID="txtNewTodo" runat="server"></asp:TextBox></div> </div> </asp:PlaceHolder> <asp:Label ID="lbTodoListId" runat="server" style="display:none;"></asp:Label></div> 

To test the idea, I created the /TodoList.aspx page, which is located in the root directory.

 <uc1:TodoList runat="server" ID="tdl1" TodoListId="1" ></uc1:TodoList> 

Cs for todolist.aspx

  protected void Page_Load(object sender, EventArgs e) { SecurityManager sm = new SecurityManager(); sm.MemberLevelAccessCheck(MemberLevelKey.AreaAdmin); } public static string AddTodo2() { return "yea!"; } 

I hope I can have a control that can be used to display multiple todo lists and create a new todo list.

When I click on #divAddButton, I can see how it builds the postback to firebug, but as soon as it completes, it will start part of the error, warning "about an error". I do not understand why.

I would prefer to use the response method inside the user control. Since I will drop it on several pages, so as not to use the method on each individual page.

Any help would be appreciated.

---

I was not able to get jQuery ajax to work, so I made a backup and tried to just put the div and jquery on the page itself and created the webservice.asmx page to handle postbacks. I am still getting the error message returned from jquery and wondering if I have something wrong or some other problem.

Here todo.aspx

  <asp:Content runat="server" ContentPlaceHolderID="cpHolder" ID="ContentId"> <div id="divAddButton">Add Todo</div> <script type="text/javascript"> $(document).ready(function() { // Add the page method call as an onclick handler for the div. $("#divAddButton").click(function() { var jsonText = JSON.stringify({ Todo: { TodoId: 1, Description: "test test test"} }); //var jsonTextEmpty = jsonText.stringify({""}); $.ajax({ type: "POST", url: "WebService.asmx/HelloWorld", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg) { alert('retrieved'); $("#divAddButton").text(msg); }, error: function() { alert("error"); } }); }); }); 

Webservice.asmx does not change from the default Visual Studio bit. Is there a way to find out what causes the error?

Answer 1

To do this using jQuery, as you described, you need to send it to the decorated method in your ASPX.cs file, you cannot directly send the .ascx method. The good news is that the aspx.cs method can call ascx one, so it is really very easy, and you can just use it as a passage to this.

 [WebMethod] public static string AddTodo2(myTodo todo2add) { //call your ascx method here mymethod(todo2add.td1Id,todo2add.description); return "yea!"; } 

at the end of aspx.cs or in another class library placed in your class so that it knows how to decode the material:

 public class myTodo { /// <summary> /// web service/webmethod needs 0 parameter constructor /// </summary> public myTodo() { } public myTodo(int tdlId, string description) { TdlId= tdlId; Description= description; } public int TdlId; public string Description; } 

slight change to ajax call:

 $("#divAddButton").click(function() { var jsonText = JSON.stringify({myTodo:{ tdlId: 1, description: "test test test" }}); $.ajax({ type: "POST", url: "TodoList.aspx/AddTodo2", data: jsonText, contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg) { alert('retrieved'); $("#divAddButton").text(msg.d); }, error: function() { alert("error"); } }); });