Skip to main content

Nested update panels with file upload and download in asp(.)net c#

This comes as basic requirements by the majority of clients that they want a good user experience with some file uploaders/downloads for templates which are further used in your application.
Just in case,  you are not using any new technologies, no spa, no JSON and no angularjs etc.
Your app is made of asp.net because of security concerns of your firm and not so knowledgeable managers and the page refreshes every time the second you click a button and reload the entire content, but you do not want that as you know UX design ethics, so to overcome this problem you added an update panel and a nested update panel outside button to make it asynchronous, but what is this? You are not able to make button click event to get hit in code behind c#.

What will you do?
You will use update panel triggers like below.

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset style="width: 90%">
                    <legend>File Uploader</legend>
                    <table style="width: 90%">
                        <tr>
                            <td>
                                <b>File Type:</b>&nbsp;&nbsp;
                            </td>
                            <td>
                                <asp:DropDownList ID="ddlFileType" runat="server" AutoPostBack="False">
                                </asp:DropDownList>
                            </td>
                            <td>
                                <b>Upload File:</b>
                            </td>
                            <td>
                                <asp:UpdatePanel ID="UpdatePanelUpload" runat="server" UpdateMode="conditional">
                                    <ContentTemplate>
                                        <asp:FileUpload ID="flUploadFile" runat="server" />
                                        <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" /><br />
                                    </ContentTemplate>
                                    <Triggers>
                                        <asp:PostBackTrigger ControlID="btnUpload" />
                                    </Triggers>
                                </asp:UpdatePanel>
                            </td>
                            <td>
                                <asp:UpdatePanel ID="UpdatePanelDownload" runat="server" UpdateMode="conditional">
                                    <ContentTemplate>
                                        <asp:Button ID="btnDownload" runat="server" OnClick="btnDownload_Click" Text="Download Sample File" />
                                    </ContentTemplate>
                                    <Triggers>
                                        <asp:PostBackTrigger ControlID="btnDownload" />
                                    </Triggers>
                                </asp:UpdatePanel>
                            </td>
                        </tr>
                    </table>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>




Rest is same in backend file.

Enjoy coding.
Labels:
Location: Delhi, India

Comments

Post a Comment

Important - Make sure to click the Notify Me check-box below the comment to be notified of follow up comments and replies.

Popular posts from this blog

Convert your datatable into generic poco object in c# using linq, ado and reflections.

Follow @harshit_parshii The most common problem that we face these days is to create a common class and method that can be used across all the projects and codes. So today I will be sharing my code where you can see how to make and create a generic function without using entity framework for ado. net. The scenario is like you have an old software that uses stored procedure to return set of entities as a data-table, you do not want to re-write the back-end code as you are creating a web API in c# which needs to be delivered asap. You need to map these data tables to models as you might be using MV* pattern. So here we will be doing one to one mapping of model to data- table, and in similar fashion insert or update can also be done. So basically we are converting a data-table to list of strongly typed object model to do CRUD operations. So we have following things before hand. A helper class is referenced as the database(dbFactory) which executes ado. ne...
Post a Comment
Read more

With new experiences comes great responsibility

Hello Everyone, I am an ordinary person with some highly looked after skills, not boasting about myself. But after coding in this IT industry for almost 5 years for the first time I am thinking:- Is delivering the code my only responsibility or is there anything else I need to look into as well? From last few month's I was highly involved in some entirely new domain which is financial, and when you play with the number you need to be highly focused, so unable to update my blog as well. When I was working on the urgent deadlines and tight estimates and being from a healthy UI background like css3, html5, responsive design, knockout js, less etc. I was put on the SQL server and asp.net with grid views and some freaked out Telerik controls. I know it's a learning for me and I can see why UX matters to every person in this entire world but not UI and you can write it on stamp paper. User Experience, with logical and functionally correct code, is the need of the hour to...
Post a Comment
Read more

Run CSS specific to Internet Explorer - Browser Hack

Run CSS specific to Internet Explorer - Browser Hack Referencing to the following blog post, we are going to make CSS targeting exclusively to IE browser, to make it work first we should know what are media queries. A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself. For Ex: < style > @media (max-width : 600px) { .facet_sidebar { display : none ; } } So below we will wrap the IE specific CSS rules in @media blocks and trick IE into rendering @media blocks that use media queries. Targeting only IE browsers Style rules defined in the following blocks will only be applied in IE, other browsers will ignore them. IE 6 and 7  @media screen\9 {     body { background: red; ...
Post a Comment
Read more