JQuery为用户控件(ASCX)赋值

古城微笑少年丶 2022-03-27 09:36 245阅读 0赞

Insus.NET在本次演示中，使用了接口(interface),在网页动态加载用户控件，并使用JQuery为来把网页处理的值传给用户控件。  
在面向编程中，Insus.NET较喜欢使用接口，认为它能为不同对象之间处理到相同的行为。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] ISetValable

using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    /// <summary>
    /// Summary description for ISetValable
    /// </summary>
    namespace Insus.NET
    {
        public interface ISetValable
        {
            void SetValue(string value);
        }
    }

上面的接口，是想让对象实现之后，能为控件赋值。

接下来，我们创建一件用户控件，用户控件的ascx放置一个Label标签，是将用来显示从页面传过来的值。真正环境中，也许不是简单的Label控件了，而是其它控件，或是对象了。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="InsusUc.ascx.cs" Inherits="InsusUc" %>
    <asp:Label ID="LabelMessage" runat="server" Text=""></asp:Label>

在ascx.cs代码内，需要实现接口，把接口实现的方法所带的参数赋给Label的Text.

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Insus.NET;
    
    public partial class InsusUc : System.Web.UI.UserControl,ISetValable
    {
        protected void Page_Load(object sender, EventArgs e)
        {
    
        }
        public void SetValue(string value)
        {
            this.LabelMessage.Text = value;
        }
    }

OK，接口与用户控件创建好了，需要创建网页了。在.aspx.cs写一个web method方法:  
[![14102634-00a2d028ed26436e936677b69c783e34.png][]][14102634-00a2d028ed26436e936677b69c783e34.png]

.aspx:  
[![14102707-f6faf41b88d3464ba3e91335c2c950f4.png][]][14102707-f6faf41b88d3464ba3e91335c2c950f4.png]

动画演示：  
[![14103509-0bb25add6ba04ec0b43bf9237e91c944.gif][]][14103509-0bb25add6ba04ec0b43bf9237e91c944.gif]

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20220327/8142717aaaee4dfc9f78f74c1724dee2.png
[14102634-00a2d028ed26436e936677b69c783e34.png]: /images/20220327/fc250fb86004439d9479428c9f02cd1b.png
[14102707-f6faf41b88d3464ba3e91335c2c950f4.png]: /images/20220327/a398fe421c7e4702956313e5bcf59e6c.png
[14103509-0bb25add6ba04ec0b43bf9237e91c944.gif]: /images/20220327/cbc2bb3584274d71bedc72f4225e5133.png