C#UserControl上的Jquery .ajax异步回发

时间:2010-03-29 16:34:47

标签: c# jquery asp.net json

我正在努力向项目系统添加待办事项列表,并希望todo创建触发异步回发以更新数据库。我真的很想在usercontrol中托管这个,所以我可以将todo列表放到项目页面,任务页面或独立的待办事项列表页面上。

这就是我所拥有的。

用户控件“TodoList.ascx”,它位于Controls目录中。

位于UserControl顶部的脚本。你可以看到我开始构建jsonText到回发的位置,但是当它不起作用时我只是尝试回发一个空数据变量并从AddTodo2方法中删除'string [] items'变量。

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

todolist.aspx的cs

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

我希望我能拥有一个可用于显示多个待办事项列表的控件,并创建一个全新的待办事项列表。

当我点击#divAddButton时,我可以看到它在firebug中构建回发但是一旦完成它就会通过警告“错误”来运行错误部分。我不明白为什么。

我真的宁愿在用户控件中使用响应方法。因为我将它放在几个页面上,以避免在每个页面上放置一个方法。

任何帮助都将不胜感激。


我无法使jquery 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创建的默认位相同。有没有办法找出导致错误的原因?

1 个答案:

答案 0 :(得分:4)

为了在您描述的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");                
             }                
   });                
});