如何在事件上更改输入参数时使用Angular JS更新页面

时间:2015-07-01 02:03:19

标签: c# angularjs

我有一个使用webform(.aspx),C#和一些Javascript的有效解决方案。我可以使用Angular JS学习一些帮助。

我正在寻找一种方法来重新编写解决方案,成为Angular JS应用程序中的页面。示例页面具有Dropdownlist服务器控件,当选择项目时,必须根据页面成员的当前值“configJson”更新div“axviewer”。 configJson是从静态C#方法返回的值,将SelectedItem作为输入。

  <html> <head>
    <title>ActiveX Viewer Sample Launch Page</title>
            <script type="text/javascript">
        $(document).ready(function () {
            // configJson is updated and returned by a C# public static method
            // based on the selection in the list
            var ax = igc.be.client.activex.createInstance(<% =configJson %>);
            ax.render("axviewer");            
        });
    </script> </head> <body>    
    <form runat="server">
        <input type="button" id="prev" value='<' />
        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" >
            <asp:ListItem>288</asp:ListItem>      
            <asp:ListItem>483</asp:ListItem>
            <asp:ListItem>488</asp:ListItem>
            <asp:ListItem>501</asp:ListItem>                              
        </asp:DropDownList>
    </form>
     <hr />
    <%--Display the Brava Viewer--%>    
    <div id="axviewer"></div>

    <div id="errorMesage" runat="server" visible="false">
        <asp:Label runat="server" ForeColor="Red" ID="Description">Something is wrong!</asp:Label>
    </div> </body> </html>

代码背后:

  

public partial class Viewer:System.Web.UI.Page       {
          私有静态字符串instanceId;
          public static string configJson = string.Empty;

    protected void Page_Load(object sender, EventArgs e)
    {
        errorMesage.Visible = false;           
        string docId = "273";
        try
        {
            // return a json config string                
            var selectedId = this.DropDownList1.SelectedValue;
            instanceId = this.DropDownList1.SelectedValue;
            configJson = ActiveXViewer.GetViewerConfigJson(instanceId, "admin:admin", docId);  

        }
        catch (Exception ex)
        {
            errorMesage.Visible = true;
            Description.Text = ex.Message;

        }
    }

1 个答案:

答案 0 :(得分:0)

我可以从你的问题中理解,似乎你想要做的并不复杂,但我建议你应该先自己尝试。

我可以帮助你提供一些提示,

首先有一个角度的自定义指令来模仿你正在根据所选项目操纵DIV所做的事情

提示http://www.tutorialspoint.com/angularjs/angularjs_custom_directives.htm

然后使用ng-select指令更改下拉选项。 https://docs.angularjs.org/api/ng/directive/select

如果你是初学者,我建议你先休息一下,先在脑海中清楚地了解角度是如何工作的

https://www.codeschool.com/courses/shaping-up-with-angular-js

我希望能解决你的问题