如何呈现WebUserControl客户端

Question

我创建了一个web用户控件，它有一些ASP.NET和第三方控件。

我已经在页面的标记中测试了我的控件，它运行得很好。

<APP:MyControl ID="myControl1" InitializeWithValue="Employee" />
<APP:MyControl ID="myControl2" InitializeWithValue="Supplier" />

现在，我希望在同一页中呈现此控件，但不希望在页面第一次呈现时呈现该控件。实际上，我将单击一个按钮，该按钮将调用回调，此时我希望呈现该控件。

我试着做这样的事。

void ICallbackEventHandler.RaiseCallbackEvent(string eventArgument)
{
   MyControl c1 = new MyControl();
   c1.InitializeWithValue = Person.Enum.Employee; //<--CRASH

   System.Text.StringBuilder sb = new System.Text.StringBuilder();
   System.IO.StringWriter sw = new System.IO.StringWriter(sb);
   HtmlTextWriter hw = new HtmlTextWriter(sw);
   c1.RenderControl(hw);
   return sb.ToString();
}

然后在我的客户端接听电话

<a href="javascript:void(0);" onclick="testcallback('', '')">Test</a>
<div id="divControls"></div>

<script>
    function receiver(arguments, context) {
        document.getElementById('divControls').innerHTML = arguments;
    }
</script>

但是它在初始化时崩溃了，因为WebUserControl的所有内部控件都是空的。它们还没有初始化。

这是控件的属性。

   [Browsable(true)]
   public Person.Enum InitializeWithValue
   {
      get { return this.enumPersonValue; }
      set
      {
         this.enumPersonValue = value;
         //Literal control
         this.litPersonType.Text = "Employee"; //<-- CRASH because litPersonType is null.
      }
   }

有些人可以帮我纠正这个问题，或者建议我用另一种方式呈现一个web控件，但客户端呢？

Answer 1

UserControls通常是紧密的页面生命周期，所以您需要重新创建整个页面并将其呈现出来。

其次，您应该使用它的.ascx文件来加载您的用户控件，而不仅仅是它的类，这是必需的，因为只有您的类是不够的。

您仍然可以尝试像您只创建但是使用Page.LoadControl那样去做。

void ICallbackEventHandler.RaiseCallbackEvent(string eventArgument)
{
   MyControl c1 = (MyControl)page.LoadControl("/Controls/myControl.ascx");
   c1.InitializeWithValue = Person.Enum.Employee; //<--CRASH

   System.Text.StringBuilder sb = new System.Text.StringBuilder();
   System.IO.StringWriter sw = new System.IO.StringWriter(sb);
   HtmlTextWriter hw = new HtmlTextWriter(sw);
   c1.RenderControl(hw);
   return sb.ToString();
}

但是，如果控件有与页面生命周期相关的事件，则可能需要为其创建一个完整的上下文：

你可以这样做：

using (var stringWriter = new StringWriter())
{
       using (var page = new Page())
       {
            MyControl myControl = (MyControl)page.LoadControl("/Controls/myControl.ascx");

            var head = new HtmlHead();
            page.Controls.Add(head);

            var form = new HtmlForm();
            page.Controls.Add(form);

            var div = new HtmlGenericControl("div");
            div.ID = "myControlContent";
            form.Controls.Add(div);

            div.Controls.Add(myControl);

            HttpContext.Current.Server.Execute(page, stringWriter, false);

        }
        return stringWriter.ToString()
}

然后，在您的JS中，您可以解析整个html并只获得innerHTML of div#myControlContent，例如：

function receiver(arguments, context) {
    var parser = new DOMParser();
    var doc = parser.parseFromString(arguments, "text/html");

    document.getElementById('divControls').innerHTML = doc.getElementById('myControlContent').innerHTML;
}

请注意，DOMParser仅在现代浏览器中可用，但您可以为旧浏览器找到其他方法.