如何使用ajax文件上传控件单击上传按钮后回页。 [英] How to page post back after click on upload button using ajax file upload control.

问题描述

<div class="col-lg-12 btn btn-lg red-background">
        <ajaxToolkit:AjaxFileUpload ID="ajaxfuImage"  runat="server"      MaximumNumberOfFiles="10" />
</div>
<asp:DataList ID="dlistImages" runat="server" RepeatColumns="6"   RepeatDirection="Horizontal" RepeatLayout="Flow"

OnItemDataBound="dlistImages_ItemDataBound" DataKeyField="ImageId">
     <ItemTemplate>
         <div id="thumbnail" class="col-sm-2 spacer-top">
                <asp:CheckBox ID="cbxDelete" runat="server" CssClass="checkbox" Value='<%#Eval("ImageId") %>' />
        <asp:Image ID="imgDisplayImages" runat="server" CssClass="img-responsive thumbnail"/>
        </div>
    </ItemTemplate>
</asp:DataList>

我的尝试：



我想要点击Ajax文件上传控件上传按钮后，数据列表自动刷新并获取最新上传的图像。

What I have tried:

I want After the click on Upload button of Ajax File Upload Control the Data list Auto Refresh and get latest uploaded Images.

推荐答案

为了实现以下步骤：



Step1 ：在updatepanel中添加网格，如下所示

In order to implement follow below steps:

Step1: Add your grid inside updatepanel like below

<input type="button" value="Get Current Time" onclick="ReloadGrid()" />
<form id="form1" runat="server">
	<asp:scriptmanager id="ScriptManager1" runat="server"></asp:scriptmanager>
	<asp:updatepanel id="UpdatePanel1" runat="server">
		<contenttemplate>
			<asp:gridview id="GridView1" runat="server"></asp:gridview>
			<asp:button id="btnHidddenSubmit" runat="server" onclick="ReloadGrid" style="display: none" />
		</contenttemplate>
	</asp:updatepanel>
</form>

Step2 ：添加以下javascript代码重新加载网格（在您的情况下，您需要在AJAX上传控制按钮内写入）：

Step2: Add following javascript code to reload grid(in your case you need to write inside AJAX upload control button):

<script type="text/javascript">
	function ReloadGrid() {
		document.getElementById("<%=btnHidddenSubmit.ClientID %>").click();
	}
</script>

对于您的方案，您需要使用 OnClientUploadComplete ：



< ajaxToolkit：AjaxFileUpload ID =ajaxfuImagerunat =serverMaximumNumberOfFiles =10 OnClientUploadComplete =ReloadGrid/>



Step3 ：添加以下代码重新加载网格：

For your scenario you need to use OnClientUploadComplete:

<ajaxToolkit:AjaxFileUpload ID="ajaxfuImage" runat="server" MaximumNumberOfFiles="10" OnClientUploadComplete="ReloadGrid"/>

Step3: Add following code to reload grid:

protected void ReloadGrid(object sender, EventArgs e)
{       
     // Reload your grid
	List<string> nameList = new List<string>() { "Manas", "Milu" };
	GridView1.DataSource = nameList;
	GridView1.DataBind();
}
</string></string>

注意：如果您通过AJAX将数据加载到网格中，则无需执行上述步骤。只需发送AJAX请求重新加载网格（重新使用代码）。

Note: If you are loading data to your grid through AJAX then there is no need to implement above steps. Simply send AJAX request to reload grid(re-use the code).

这篇关于如何使用ajax文件上传控件单击上传按钮后回页。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！