在回发时仅更新页面的一部分

Question

我有 2 个 div，一个 div 有一个在服务器端运行的 html 按钮，并在同一页面上的另一个 div 中的 reportviewer 中生成一个 rdlc 报告。 回发后，整个页面刷新并清除我在回发之前已经选择的下拉列表中的数据。 请在回发报告生成后如何防止下拉列表和其他控件的值被清除。 UpdatePanel 对我不起作用 谢谢

将数据加载到选择下拉菜单中

$(document).ready(function () {
    //$("#assayreport").tableHeadFixer({ 'foot': true });
    "responsive"; true,
        "serverSide"; true,
            "info"; true,
                "stateSave"; true,
                    $.ajax({
                        url: 'RhemaServices.asmx/GetJobs',
                        data: '{"jobnumber":"","clientID":"0","status":"2"}',
                        type: 'POST',
                        dataType: 'json',
                        contentType: "application/json; charset-utf-8",
                        success: function (data) {
                            jobdatavariable = data
                            $.each(data, function (i, item) {
                                $('<option value="' + item.TotalInvoiceValue + '">' + item.JobNumber + '</option>').appendTo('#jobcard');
                            });
                        },
                        error: function (err) {
                            console.log(err)
                        },
                        complete: function () {
                        }


                    });
});



<div class="col-md-4">
            <div class="box box-primary">
                <div class="box-header">
                   <%-- <h3 class="box-title" id="jobidss" style="color: #3C8DBC;">Job Card Details</h3>--%>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <div class="box-body">
                    <div class="col-lg-8">
                        <div class="form-group">
                            <label style="color: red;">Select Job Card </label>
                            <div class=".col-xs-3">
                                <select class="select2  form-control" id="jobcard" name="jobcard" onchange="return getJobNo()">
                                    <option selected="selected"></option>
                                </select>
                            </div>
                        </div>
                        <div style="display: nones;">
                            <span style="float: right">
                                <button id="but_add" class="btn btn-primary fa fa-eye" runat="server" onserverclick="LoadData"> Get Invoice</button></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

   <div class="col-md-8">
            <div class="box box-info">
                <div class="box-header">
                    <h3 class="box-title" id="jobidS" style="color: #3C8DBC;">Gold Assay Invoice</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <div class="box-body" style="display: nones">
                    <form runat="server">
                        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
                        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                            <ContentTemplate>
                                <rsweb:ReportViewer ID="rv" runat="server" Height="800px" Width="100%" SizeToReportContent="True" ShowBackButton="False" ShowCredentialPrompts="False" ShowDocumentMapButton="False" ShowFindControls="False" ShowParameterPrompts="False" ShowPromptAreaButton="False">
                                </rsweb:ReportViewer>
                            </ContentTemplate>
                        </asp:UpdatePanel>

                        <asp:HiddenField ID="jobnumber" runat="server" />
                    </form>
                </div>
            </div>

        </div>

页面加载和按钮点击事件的C#代码（LoadData）

protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack)
        {

        }
    }
    protected  void LoadData(object sender, EventArgs e)
    {
        rv.ProcessingMode = ProcessingMode.Local;
        rv.LocalReport.ReportPath = Server.MapPath("~/Reports/Invoice.rdlc");
        DataTable dt = GetData();          

        ReportDataSource datasource = new ReportDataSource("DataSet1", dt);

        rv.LocalReport.DataSources.Clear();
        rv.LocalReport.DataSources.Add(datasource);
        rv.LocalReport.Refresh();

    }

Answer 1

所以你已经通过ajax jquery绑定了Dropdown，在这种情况下，每次你回发jquery的$(document).ready(){}事件时会发生什么，你的下拉列表再次填充值并重置它的值，所以对于解决方案你可以做的就是绑定drop在 c# 中通过页面加载事件后面的代码尝试下面的代码。

protected void Page_Load(object sender, EventArgs e)
{
    if(!IsPostBack)
    {
       jobcard.DataSource=dtJobCard;//get data in this dtJobCard using DB or from wherever you want to get
       jobcard.DataTextField="JobNumber";
       jobcard.DataValueField="TotalInvoiceValue"; 
       jobcard.DataBind();
    }
}

并让 ASP.NET Dropdown 控件在 aspx 代码中像这样更改它。

<asp:DropDownList ID="jobcard" runat="server">  
    </asp:DropDownList> 

更新 如果这是一个要求，那么您可以执行以下操作。 将值存储在隐藏字段中并检查隐藏字段中是否有任何值，如果是，则填写 ddl 并设置值，否则什么也不做。下面是完整的代码。 修改脚本代码

    $(document).ready(function () {

        //$("#assayreport").tableHeadFixer({ 'foot': true });
        "responsive"; true,
            "serverSide"; true,
                "info"; true,
                    "stateSave"; true,
                        $.ajax({
                            url: 'RhemaServices.asmx/GetJobs',
                            data: '{"jobnumber":"","clientID":"0","status":"2"}',
                            type: 'POST',
                            dataType: 'json',
                            contentType: "application/json; charset-utf-8",
                            success: function (data) {
                                jobdatavariable = data
                                $.each(data, function (i, item) {
                                    $('<option value="' + item.TotalInvoiceValue + '">' + item.JobNumber + '</option>').appendTo('#jobcard');
                                });
                            },
                            error: function (err) {
                                console.log(err)
                            },
                            complete: function () {
                            }


                        });
            if($('#jobnumber').val()!="")
             {
                $('#jobcard').val($('#jobnumber').val());
             }
    });

创建onchange函数 像这样

function getJobNo()
{
   $('#jobnumber').val($('#jobcard').val());
}

综合上我可能是错的，但这个逻辑应该有效。