更新使用AJAX ASP.NET服务器控件呈现 [英] Updating ASP.NET server-rendered controls using ajax

问题描述

<一个href="http://stackoverflow.com/questions/4037533/rebind-gridview-using-ajax-without-post-back/4037665#4037665">This问题让我想到了怎样去这样做的相对可撤销：无缝地从ASP.NET通过JavaScript客户端控件集成服务器生成的HTML。当然，你可以随时使用JavaScript / jQuery的/库创建同样显示客户端。但很多时候，它更容易做所有的渲染服务器上，而不是仅仅将数据传递到客户端的控制，必须处理用户界面和渲染。或者，也许你已经有了少了很多交互服务器code，你真的很不想完全重新做使用JavaScript库，只需添加一些更好的交互性。

This question got me thinking about how one might go about doing the relatively undoable: seamlessly integrate server-generated HTML from ASP.NET with client-side control via javascript. Sure, you can always use javascript/jquery/libraries to create the same display client-side. But much of the time, it's easier to do all the rendering on the server instead of just passing data to a client-side control which must handle the user interface and rendering. Or maybe you've already got a lot of less-interactive server code that you'd really rather not completely re-do using javascript libraries to just add some better interactivity.

我有一个理论，这似乎在概念的基本证据的工作。假设你要完全重新渲染基于客户端的事件服务器生成的控制HTML，而不回发。因此，使用jQuery的，我有一个网页：

I had a theory which seems to work in a basic proof of concept. Suppose you want to completely re-render the HTML of a server-generated control based on a client-side event, without posting back. So using jquery, I have a page:

    default.aspx:
   <a id="link1" href="#">Click Here</a>
   <div id="container">
   <asp:PlaceHolder id="MyPlaceholder" runat="server" />
   </div>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#link1').click(function() {
                $.ajax({
                    url: "default.aspx",
                    type: "GET",
                    dataType: "html",
                    async: true,
                    data: { "ajax": "1" },
                    success: function(obj) {
                    // replace the HTML
                        $('#container').html(obj);
                    }
                });
            });
        });

该事件导致它使用Ajax查询本身。在codebehind，做权谋是这样的：

The event causes it to query itself with ajax. The codebehind that does the trickery is like this:

    TestUserControl ctl;
    string ajax;
    protected void Page_Load(object sender, EventArgs e)
    {
        ctl = (TestUserControl)Page.LoadControl("TestUserControl.ascx");
        Myplaceholder.Controls.Add(ctl);
        ctl.OnRender += new TestuserControl.RenderHandler(ctl_Render);
    }
    protected void Page_PreRender()
    {
        ajax = Request.QueryString["ajax"] == null ? "" : Request.QueryString["ajax"];
    }
    void ctl_Render()
    {
        if (ajax == "1")
        {
            StringBuilder sb = new StringBuilder();
            StringWriter sw = new StringWriter(sb);

            using (HtmlTextWriter writer = new HtmlTextWriter(sw))
            {
                ctl.DoRender(writer);
            }

            Response.Write(sb.ToString());
            Response.End();
        }
    }

在TestUserControl，我揭露base.render得到的输出：

In TestUserControl, i expose base.render to get the output:

   public void DoRender(HtmlTextWriter writer)
    {
        base.Render(writer);
    }

基本上，如果被称为没有Ajax的查询字符串的页面，它只是就像自己。但是，当查询字符串时，它拦截从我所关心的（称为TestUserControl.ascx一个用户控件）的内容输出流和渲染的只是的。这被返回到客户端，其中更新HTML。所有ID将被完全重建和以前一样，因为我并不想呈现孤立只是控制，但在自己的页面上下文。从理论上讲，由ASP.NET创建神奇的每一位应该被复制，检索和更新的AJAX查询。

Basically, if the page is called without the "ajax" querystring, it just acts like itself. But when that querystring is used, it intercepts the output stream from the content I am concerned with (a usercontrol called TestUserControl.ascx) and renders just that. This is returned to the client, which updates the HTML. All the IDs will be recreated exactly as before since I am not trying to render just that control in isolation, but in context of its own page. Theoretically, every bit of magic created by ASP.NET should be reproduced, retrieved and updated by the ajax query.

除了明显缺乏效率，它似乎在这个小测试顺顺当当工作。我可以完全重新呈现使用服务器的控制，无需回发生成的HTML和我写零的JavaScript。这个例子实际上并没有改变什么，但它是简单的传递的参数来改变输出。

Apart from the obvious lack of efficiency, it seems to work swimmingly in this little test. I can completely rerender the control using the server generated HTML without a postback and I've written zero javascript. This example doesn't actually change anything, but it would be simple to pass more parameters to change the output.

我想知道是否有人曾试图在实践中这样的事？有什么潜在的问题可能我不会想什么？

I was wondering if anyone had tried anything like this in practice? What potential problems might I not be thinking of?

如果服务器的性能是不是一个问题，好像这可能是十分简单的方法来获得大量的功能赫克与ASP.NET服务器控件的所有优势。但我似乎无法找到使用这种技术在实践中，所以我想知道什么我可能会丢失的任何讨论。

If server performance is not an issue, it seems like it might be quite easy way to get a heck of a lot of functionality with all the benefits of ASP.NET server controls. But I can't seem to find any discussion of using this technique in practice so I am wondering what I might be missing.

推荐答案

嗯，首先，你发送一个 GET 请求您的页面，因此控制你要更新不会收到了最新的表单数据。更重要的是， ViewState的将丢失，你可能不希望出现这种情况，除非你的用户控件是很简单的。

Well, for starters, you're sending a GET request to your page, so the control you want to update won't receive up-to-date form data. More importantly, ViewState will be lost and you probably don't want that, unless your user control is very simple.

您可以解决该问题通过使用 POST 的要求，但也有其他潜在的问题，如：你能保证嵌入在用户控件的客户端脚本，或者重新运行或不，当你更新，持之以恒，在所有的浏览器？

You could work around the problem by using a POST request, but there are other potential issues, e.g. can you guarantee that the client scripts embedded in your user control either run again or don't when you update it, consistently, on all browsers?

幸运的是，其他已经解决了这些问题。我建议你​​把你的用户控件内的的UpdatePanel 和<一HREF =htt​​p://encosia.com/2007/07/13/easily-refresh-an-updatepanel-using-javascript/相对=nofollow>强制从客户端刷新：

Fortunately, others have already solved those problems. I'd suggest you place your user control inside an UpdatePanel and force a refresh from the client side:

__doPostBack("yourUpdatePanelClientID", "");

这篇关于更新使用AJAX ASP.NET服务器控件呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！