页面在每个帖子上滚动回来

时间:2014-08-26 11:47:53

标签: c# javascript asp.net smooth-scrolling autopostback

我已经成功完成了一个组织的网络应用程序,它符合预期,但我注意到一个问题,并尝试通过在谷歌搜索并询问老年人来治愈它,但这些都没有帮助。

问题:我在页面上有多个下拉列表,其中在一个下拉列表中选择值会触发另一个下拉列表的加载,即Country>城市的情况,问题是,每当我点击任何值,它滚动页面到顶部,我必须再次滚动回来然后一次又一次,这看起来很糟糕和不专业。请帮帮我。

代码:

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" MaintainScrollPositionOnPostback="true" AutoEventWireup="true" CodeFile="frmReceivedSms.aspx.cs" Inherits="SmsComplaints" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<%@ Register assembly="Microsoft.ReportViewer.WebForms,Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" namespace="Microsoft.Reporting.WebForms" tagprefix="rsweb" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnSendSms").hide();
            $("#btnDelete").hide();
            $("#btnCancel").hide();
            $("#lblSelectedID-Span").hide();
            $("#txtSelectedID-Span").hide();
            var showHide = $("#HiddenFieldShowHideButtons").val();
            if (showHide == "True") {
                $("#btnSendSms").show();
                $("#btnDelete").show();
                $("#btnCancel").show();
                $("#lblSelectedID-Span").show();
                $("#txtSelectedID-Span").show();
                $("#buttonSearch").hide();
                $("#Save-Span").hide();
                $("#HiddenFieldShowHideButtons").val("False");
            }
            $("#btnSendSms").click(function () {
                $("#ConfirmMsg").text("Are you sure to update this record?");
                $("#Delete-Span").hide();
                $("#lblSelectedID-Span").hide();
                $("#txtSelectedID-Span").hide();
                $("#Save-Span").show();
                $("#buttonSearch").show();
                $("#Update-Span").show();
                $("#btnSendSms").hide();
                $("#btnDelete").hide();
                $("#btnCancel").hide();
                $("#ModalConfirmAction").modal({ show: true })
            });

            $("#btnDelete").click(function () {
                $("#ConfirmMsg").text("Are you sure to delete this record?");
                $("#Update-Span").hide();
                $("#lblSelectedID-Span").hide();
                $("#txtSelectedID-Span").hide();
                $("#Delete-Span").show();
                $("#Save-Span").show();
                $("#buttonSearch").show();
                $("#btnDelete").hide();
                $("#btnSendSms").hide();
                $("#btnCancel").hide();
                $("#ModalConfirmAction").modal({ show: true })
            });

            $("#btnCancel").click(function () {
                $("#btnSendSms").hide();
                $("#btnDelete").hide();
                $("#btnCancel").hide();
                $("#lblSelectedID-Span").hide();
                $("#txtSelectedID-Span").hide();
                $("#buttonSearch").show();
                $("#Save-Span").show();
                ClearTextBoxes();
            });
        });

        function ClearTextBoxes() {
            $("input[type=text]").each(function () {
                $(this).val("");

            });
        }

        function validate() {

            var setValue = false;
            var NotificationSummary = new Array();
            var fields = new Array("Admin Role");
            var txtboxes = new Array($("#txtAdminName"));

            $(txtboxes).each(function (index) {
                if ($(this).val() == "") {
                    NotificationSummary[index] = fields[index];
                    setValue = true;
                }
            });
            if (setValue == true) {
                $("#ConfirmMsg").text = NotificationSummary.join(",");
                $("#ModalConfirmAction").modal({ show: true })
            }
            return setValue;
        }

        $("#Save-Span").click(function () {
            validate();
        });
    </script>


<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<%--<script type="text/javascript">  //Maintain scroll on post back but doesn't load values in relevant drop down
    var xPos, yPos;
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_beginRequest(BeginRequestHandler);
    prm.add_endRequest(EndRequestHandler);
    function BeginRequestHandler(sender, args) {
        xPos = $get('ContentPlaceHolder1').scrollLeft;
        yPos = $get('ContentPlaceHolder1').scrollTop;
    }
    function EndRequestHandler(sender, args) {
        $get('ContentPlaceHolder1').scrollLeft = xPos;
        $get('ContentPlaceHolder1').scrollTop = yPos;
    }
</script>--%>

            <div class="widget">
                <div class="widget-header">
                        <div class="title">
                            Received Complaints Via Sms&nbsp;
                        </div>
                        <!-- widget title-->
                </div> <!-- widget header -->

                        <div class="widget-body">
                        <div class="row-fluid">
      <!-- cons start -->
           <div class="shortcut-group">
            <asp:HiddenField ID="HiddenFieldSetMessage" runat="server" 
                 ClientIDMode="Static"/>
            <asp:HiddenField ID="HiddenFieldShowMessage" runat="server" 
                 ClientIDMode="Static"/>
            <asp:HiddenField ID="HiddenFieldIsValidDropDownValue" runat="server" 
                 ClientIDMode="Static" />


        <asp:UpdatePanel ID="updGridViewSMS" runat="server" UpdateMode="Conditional">
          <ContentTemplate>
            <label><b>Search By Date Range</b></label>
            <asp:Label ID="lblDateFrom" runat="server" Text="From"></asp:Label>
            <asp:TextBox ID="txtFromDate" runat="server" ></asp:TextBox>                      
            <asp:CalendarExtender ID="CalendarExtenderFromDate" Format="dd/MMM/yyyy" TargetControlID="txtFromDate" runat="server">
            </asp:CalendarExtender>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator9" runat="server" 
                                ControlToValidate="txtFromDate" Display="None" ErrorMessage="" 
                                ForeColor="Red" >
            </asp:RequiredFieldValidator>
            <asp:Label ID="lblDateTo" runat="server" Text="To"></asp:Label>
            <asp:TextBox ID="txtToDate" runat="server"></asp:TextBox>
            <asp:CalendarExtender ID="CalendarExtenderToDate" Format="dd/MMM/yyyy" TargetControlID="txtToDate" runat="server">
            </asp:CalendarExtender>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator10" runat="server" 
                                ControlToValidate="txtToDate" Display="None" ErrorMessage="" 
                                ForeColor="Red" >
            </asp:RequiredFieldValidator>
            <asp:Button ID="btnSearchByDate"  CssClass="btn btn-success" runat="server" Text="Search" 
                        ClientIDMode="Static"  OnClick="btnSearchByDate_Click" />
            <asp:ValidationSummary
             HeaderText="Requires Date Range:"
             DisplayMode="SingleParagraph"
             EnableClientScript="true"
             ForeColor="Red"
             runat="server" ID="ValidationSummary1"/>
           <label runat="server" id="lblSelectionMessage" style="color:navy; font-size:12px; font-style:italic" visible="false">
               Please select one validity dropdown at a time
           </label>
           <asp:GridView ID="GridViewSmsComplaints" AllowPaging="True" PageSize="5" runat="server" AutoGenerateColumns="False" CssClass="mGrid" BorderColor="#333333"  Width="650px" OnRowDataBound="GridViewSmsComplaints_RowDataBound" OnPageIndexChanging="GridViewSmsComplaints_PageIndexChanging" >
               <Columns>
                    <asp:BoundField HeaderText="Sms ID" DataField="ID" /> 
                    <asp:BoundField HeaderText="Recieving Date" DataField="RecievingDate" />  
                    <%--<asp:BoundField HeaderText="ToMobileNo" DataField="ToMobileNo" />  --%>
                    <asp:BoundField HeaderText="Complainant Mob No." DataField="FromMobileNo" /> 
                    <asp:BoundField HeaderText="Complaint" DataField="Message" >   
                     <ItemStyle Wrap="True" />
                    </asp:BoundField>
                    <asp:TemplateField HeaderText="Complete/InComplete">
                     <ItemTemplate>
                       <%--<asp:CheckBox ID="ckboxIsComplaint"  runat="server" />--%>
                       <asp:DropDownList ID="ddlIsComplaint" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlIsComplaint_SelectedIndexChanged">
                        <asp:ListItem Text="-Select-" Value="-1"></asp:ListItem>
                        <asp:ListItem Text="InComplete" Value="0"></asp:ListItem>
                        <asp:ListItem Text="Complete" Value="1"></asp:ListItem>
                       </asp:DropDownList>
                     </ItemTemplate>
                    </asp:TemplateField>
               </Columns>
            </asp:GridView>    

        <br />
      <asp:Panel ID="pnlBoxesDropDowns" runat="server">
        <label>Complainant</label>
        <asp:TextBox ID="txtComplainant" runat="server" CssClass="textField_width"></asp:TextBox>
        <asp:RequiredFieldValidator ID="ReqFieldValdiatorComplainant" runat="server" ControlToValidate="txtComplainant" ErrorMessage="Complainant is Required" ForeColor="Red" SetFocusOnError="True" ValidationGroup="Complaints">Complainant is Required
        </asp:RequiredFieldValidator>
        <label style="width:400px">Relevant Region</label>
        <asp:DropDownList ID="ddlRegions" runat="server" CssClass="DropDown_Width" Width="147px" OnSelectedIndexChanged="ddlRegions_SelectedIndexChanged" AppendDataBoundItems="True"  AutoPostBack="true" >
          <asp:ListItem Value="-1" Selected="True">-Select-</asp:ListItem>
        </asp:DropDownList>
        <asp:RequiredFieldValidator ID="ReqFieldValidatorRegions" runat="server" 
         ControlToValidate="ddlRegions" ErrorMessage="Region is Required" InitialValue="-1"
         ForeColor="Red" ValidationGroup="Complaints">Region is Required</asp:RequiredFieldValidator>

        <label style="width:400px">Relevant District</label>
        <asp:DropDownList ID="ddlDistricts" runat="server" CssClass="DropDown_Width" Width="147px" OnSelectedIndexChanged="ddlDistricts_SelectedIndexChanged" AutoPostBack="true">
        </asp:DropDownList>
        <asp:RequiredFieldValidator ID="ReqFieldValidatorDistricts" runat="server" 
         ControlToValidate="ddlDistricts" ErrorMessage="Region is Required" InitialValue="-1"
         ForeColor="Red" ValidationGroup="Complaints">District is Required</asp:RequiredFieldValidator>
        <label>Relevant P.Station</label>
        <asp:DropDownList ID="ddlPoliceStations" runat="server" Width="147px" CssClass="DropDown_Width">
        </asp:DropDownList>
        <asp:RequiredFieldValidator ID="ReqFieldValidatorPoliceStations" runat="server" 
         ControlToValidate="ddlPoliceStations" ErrorMessage="Police Station is Required" InitialValue="-1"
         ForeColor="Red" ValidationGroup="Complaints">Police Station is Required</asp:RequiredFieldValidator>
        <label>Priority</label>
        <asp:DropDownList ID="ddlPriority" runat="server">
            <asp:ListItem Text="Top" Value="1"></asp:ListItem>
            <asp:ListItem Text="Normal" Value="2"></asp:ListItem>
        </asp:DropDownList>
      </asp:Panel>
        <br />
        <br />
            <asp:Timer runat="server" Interval="60000" ID="RefreshSmsComplaints" OnTick="RefreshSmsComplaints_Tick" />
          </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="RefreshSmsComplaints" EventName="Tick" />
            </Triggers>
         </asp:UpdatePanel>
        <asp:Button ID="btnSendSms" ValidationGroup="Complaints"  runat="server" CssClass="btn btn-success"  
            OnClick="btnSendSms_Click" Text="Send Sms" />
        <%--<asp:Button ID="btnGenerateReport"  CssClass="btn btn-success" runat="server" Text="Generate Report" 
                        ClientIDMode="Static" OnClick="btnGenerateReport_Click" />--%>
        <br />
        <br />
        <rsweb:ReportViewer ID="ReportViewer1" runat="server" Font-Names="Verdana" Font-Size="8pt" WaitMessageFont-Names="Verdana" WaitMessageFont-Size="14pt" Width="550px">
                    <LocalReport ReportPath="Reports\GetReceivedComplaintsReport.rdlc">
                    </LocalReport>
        </rsweb:ReportViewer>


    <br />
    <br />
                            &nbsp



                                     </div> <!-- shourtcut group">
                        <!-- cons end -->

                                                </div> <!-- row fluid -->
                    </div> <!-- widget body-->

            </div> <!-- widget-->

        <div class="clearfix"></div>

      <!-- Modal -->



</asp:Content>

即使我在页面指令和代码中使用了maintaincrollbackposition属性,但它不起作用,我使用的是firefox。即使我在scriptmanager标签之后使用了这段代码,但它的工作方式并不完全像是保持向后滚动页面位置,但在点击时不会加载值。

<script type="text/javascript">
    var xPos, yPos;
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_beginRequest(BeginRequestHandler);
    prm.add_endRequest(EndRequestHandler);
    function BeginRequestHandler(sender, args) {
        xPos = $get('scrollDiv').scrollLeft;
        yPos = $get('scrollDiv').scrollTop;
    }
    function EndRequestHandler(sender, args) {
        $get('scrollDiv').scrollLeft = xPos;
        $get('scrollDiv').scrollTop = yPos;
    }
</script>

1 个答案:

答案 0 :(得分:0)

作为替代方案,您可以在第一个Dropdownlist选择中使用Focus()方法,

考虑这是一个例子

代码背后

Protected void ddlstate_click(object sender, Eventargs e)
{
   ddlcity.Focus();
}

它会按你的意愿行事。