从javascript（VB.NET）执行代码隐藏功能/子代码

Question

In my project, there are 3 user controls; BasicContact, BasicDetail and ActionTime. They are in EditOrder.aspx page.

There is "ReportDate" property (Date type) in BasicContact, RadioButtonList "rdl_Priority" (with integer value from "prio_id" field) in BasicDetail and "CheckDate" property in ActionTime. The ReportDate value is derived from txt_ReportDate and txt_ReportTime and CheckDate value is derived from txt_CheckDate and txt_CheckTime.

My objective is to calculate Checkdate after I add date into ReportDate and click on radiobuttonlist. Checkdate will be calculated from ReportDate (date) + SLAHour (hour, get from "GetSLAHour" method where input is prio_id) and then set text in txt_CheckDate and txt_CheckTime.

Right now, I was be able to complete this task using Postback. I create custom event and raise it in RadioButtonList selectedIndexchanged method. After that, event is handled in code behind of EditOrder page. Here are my code.

BasicDetail - RadioButtonList

<asp:RadioButtonList ID="rdl_Priority" runat="server" RepeatDirection="Horizontal" AutoPostBack="true" />

BasicDetail - codeBehind

Public Event priorityClicked As System.EventHandler

Private Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
    If Not IsPostBack Then SetupList()
End Sub

Private Sub SetupList()
    Dim ctx As New StsDataContext
    With rdl_Priority
        Dim Result = (From r In ctx.Priorities Order By r.display_order)
        If Result.Count > 0 Then
            .DataTextField = "prio_name"
            .DataValueField = "prio_id"
            .DataSource = Result
            .DataBind()
        Else
            lbl_Priority.Visible = False
            rdl_Priority.Visible = False
        End If
    End With
End Sub

Protected Sub rdl_Priority_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles rdl_Priority.SelectedIndexChanged
    RaiseEvent priorityClicked(sender, e)
End Sub

EditOrder - codeBehind

Private Sub BasicDetail_priorityClicked(ByVal sender As Object, ByVal e As System.EventArgs) Handles BasicDetail.priorityClicked
    Dim reportDate As Date? = BasicContact.ReportDate
    Dim SLAHour As Integer? = GetSLAHour(BasicDetail.PriorityId)
    If reportDate.HasValue AndAlso SLAHour.HasValue Then
        ActionTime.CheckDate = CDate(reportDate).AddHours(CDbl(SLAHour))
    End If
End Sub

However, I don't want the page to be refreshed (no postback). I don't know how to call the function or sub from javascript. I have tried PageMethod but it cause error in runtime saying that the method is not supported. Anyway, if there is a better way than calling code-behind from javascript, please let me know.

Thanks in advance

Answer 1

Ok Sorry, here is my solution

Since for now I used PageMethod to solve this problem, I don't need raise event function from code behind anymore so I deleted all the codes I have posted to ask my own question.

First, I added javascript function to each item in RadioButtonList in BasicDetail code behind

BasicDetail - Code behind

Private Sub rdl_Priority_DataBound(ByVal sender As Object, ByVal e As System.EventArgs) Handles rdl_Priority.DataBound
    For Each li As ListItem In rdl_Priority.Items
        Dim slaHour As Integer? = GetSLAHour(li.Value)
        li.Attributes.Add("onclick", "return CalCheckDate(" & If(slaHour.HasValue, CStr(slaHour), "null") & ");")
    Next
End Sub

This "CalCheckDate" function added to each button is implemented in EditOrder page (user control's parent page)

EditOrder.aspx

<script type="text/javascript">
    function CalCheckDate(hour) {
        var hid_ServId = document.getElementById('<%=hid_ServId.ClientID%>');
        var txt_reportDate = document.getElementById('<%=BasicContact.ReportDateTextName%>');
        var txt_reportTime = document.getElementById('<%=BasicContact.ReportTimeTextName%>');
        PageMethods.GetCheckDateTime(hid_ServId.value, txt_reportDate.value, txt_reportTime.value, hour, OnGetCheckDateComplete, OnGetCheckDateError);
    }
    function OnGetCheckDateComplete(result) {
        var txt_checkDate = document.getElementById('<%=ActionTime.CheckDateTextName%>');
        var txt_checkTime = document.getElementById('<%=ActionTime.CheckTimeTextName%>');
        var chkDateTime = result.split(" ");
        txt_checkDate.value = chkDateTime[0];
        txt_checkTime.value = chkDateTime[1];
    }
    function OnGetCheckDateError(e)
    {
        alert(e._message);
    }
</script>

Child control within user control, such as txt_ReportDate in BasicContact, can be derived by creating property in BasicContact as follows:

BasicContact - Code Behind

Public ReadOnly Property ReportDateTextName() As String
    Get
        Return txt_ReportDate.ClientID
    End Get
End Property

This property is used in "CalCheckDate" function to get its value and pass it to PageMethod function. Other controls can be derived in the same way.

Last step is coding PageMethods function, "GetCheckDateTime", in EditOrder code behind

EditOrder - Code Behind

<System.Web.Services.WebMethod()> _
Public Shared Function GetCheckDateTime(ByVal servId As String, ByVal ReportDate As String, ByVal ReportTime As String, ByVal hour As String) As String
    Dim checkDate As String, checkTime As String
    '************************************************************************
    'Calculate check and time date from input ReportDate, ReportTime and hour
    '************************************************************************
    Return checkDate & " " & checkTime
End Function

The result is returned to "OnGetCheckDateComplete" function in javascript (or "OnGetCheckDateError" if there is an exception). Here, I split the String and use its value to set text in textbox.