Jquery .ajax асинхронная обратная передача на C # UserControl

Question

Я работаю над добавлением списка задач в систему проекта и хотел бы, чтобы создание задачи вызывало асинхронную обратную передачу для обновления базы данных. Я бы очень хотел разместить это в пользовательском контроле, чтобы я мог перетащить список задач на страницу проекта, страницу задач или отдельную страницу списка задач.

Вот что у меня есть.

Пользовательский элемент управления "TodoList.ascx", который находится в каталоге элементов управления.

Скрипт, который находится в верхней части UserControl. Вы можете видеть, где я начал создавать jsonText для обратной передачи, но когда это не сработало, я просто попытался отправить обратно пустую переменную данных и удалил переменную 'string [] items' из метода AddTodo2.

<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>

Остальная часть кода на 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>

Чтобы проверить идею, я создал страницу /TodoList.aspx, которая находится в корневом каталоге.

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

CS для todolist.aspx

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

Я надеюсь, что у меня может быть элемент управления, который можно использовать для отображения нескольких списков задач, а также для создания совершенно нового списка задач.

Когда я нажимаю на #divAddButton, я могу наблюдать, как он создает постбэк в firebug, но как только он завершается, он запускает часть ошибки, предупреждая об ошибке. Я не понимаю почему.

Я бы предпочел, чтобы метод ответа также был внутри пользовательского элемента управления. Поскольку я опущу его на нескольких страницах, чтобы избежать необходимости размещать метод на каждой отдельной странице.

Буду признателен за любую помощь.

---

Мне не удалось заставить работать jjery ajax, поэтому я сделал резервную копию и попытался просто поместить div и jquery на саму страницу и создал страницу webservice.asmx для обработки обратных передач. Я все еще получаю сообщение об ошибке, возвращаемое из jquery, и думаю, что у меня что-то неправильно настроено или какая-то другая проблема.

Вот 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 не отличается от установленного по умолчанию бита Visual Studio. Есть ли способ узнать, что вызывает ошибку?

Answer 1

Чтобы сделать это с jQuery, как вы описали, вам нужно отправить его в оформленный метод в вашем файле ASPX.cs, вы не можете отправить напрямую в метод .ascx. Хорошая новость заключается в том, что метод aspx.cs может вызывать метод ascx, так что он действительно довольно прост, и вы можете просто использовать его как проход к этому.

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

в конце aspx.cs или в другой библиотеке классов, вставленной в ваш класс, чтобы он знал, как декодировать материал:

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;

   }

небольшое изменение в вызове ajax:

$("#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");                
             }                
   });                
});