Tag: Microsoft

azure, HTML, Web

Step-by-Step Guide to Deploy Azure Static Web Apps

Jared Meredith

Enjoy this post of me bringing myself back into some of the basics to better help me keep my solutions architecture reflex fresh (ha)!

Use Case: I need a static page to host a logout page when users leave the SSO experience to land them to a custom-tailored page where I can provide the right guidance and support language related to the app.

So, where to begin?

First, here are some prerequisites to success:

Next, let’s pull down from a basic starter code kit to save some time on creating it from scratch:

https://github.com/new?template_name=vanilla-basic&template_owner=staticwebdev

And boom, just like that a repo with stuff:

But what to do now? Well so far we now have code, but still need a destination and a means to deploy it.

For a destination let’s go onward to Azure:

  • Go to the Azure portal and sign-in
  • Select Create a Resource.
  • Search for Static Web Apps.
  • Select Static Web Apps.
  • Select Create.

In the Basics section, begin by configuring your new app and linking it to a GitHub repository.

SettingValue
SubscriptionSelect your Azure subscription.
Resource GroupSelect the Create new link, and enter rg-static-app-deploy in the textbox.
NameEnter static-app-deploy in the textbox.
Plan typeSelect Free.
SourceSelect GitHub and sign in to GitHub if necessary.

If necessary, sign in with GitHub, and enter the following repository information.

SettingValue
OrganizationSelect (your organization).
RepositorySelect (your repo name).
BranchSelect (your branch e.g. main).

Once you have completed the wizard then you should see a successful creation of your resource to deploy to. (there are CLI references for those who prefer that below).

Your URL from the vanilla template should be live!

Within Github you can inspect the yaml that drove the deployment action (depending on what you pick for your token and deployment configuration this will vary):

You can also see where the secret is managed within Settings > Secrets and Variables > Actions:

Some extra credit -> want to add a custom domain to it?

Additional extra credit -> you can also have the app be front-ended with Azure Front Door.

Finally, if you’re not going to continue to use this application, you can delete the Azure Static Web Apps instance through the following steps:

  1. Open the Azure portal.
  2. Search for static-app-deploy from the top search bar.
  3. Select the app name.
  4. Select Delete.
  5. Select Yes to confirm the delete action (this action may take a few moments to complete).

References:

.Net, C#, HTML, Office, Programming, VB, Web

Exporting asp:GridView Results To A Microsoft Excel Spreadsheet in VB/C#

Jared Meredith

I have received this requirement on more than one occasion so I thought it would benefit others if I posted these snippets. So here we go, let’s export a gridview as an excel file.

For starters let’s add a couple controls to the front-end aspx page:

 
<asp:Button ID="btnExport" runat="server" Text="Export Results To Excel" /> &amp;nbsp;&amp;nbsp;<br /><br />

<asp:GridView ID="grdSearch" runat="server" CellPadding="3" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px">
 <FooterStyle BackColor="White" ForeColor="#000066" />
 <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
 <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
 <RowStyle ForeColor="#000066" />
 <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
 <SortedAscendingCellStyle BackColor="#F1F1F1" />
 <SortedAscendingHeaderStyle BackColor="#007DBB" />
 <SortedDescendingCellStyle BackColor="#CAC9C9" />
 <SortedDescendingHeaderStyle BackColor="#00547E" />
 </asp:GridView>

I’m going to assume you know how to wire in your gridview to return results.

With that assumption in place here is the click event that performs the export (in VB):

You will need: Imports System.IO

Protected Sub btnExport_Click(sender As Object, e As EventArgs) Handles btnExport.Click
        Try
            Response.Clear()
            Response.Buffer = True
            Response.ClearContent()
            Response.ClearHeaders()
            Response.Charset = ""
            Dim FileName As String = "filename" + DateTime.Now + ".xls"
            Dim strwritter As New StringWriter()
            Dim htmltextwrtter As New HtmlTextWriter(strwritter)
            Response.Cache.SetCacheability(HttpCacheability.NoCache)
            Response.ContentType = "application/vnd.ms-excel"
            Response.AddHeader("Content-Disposition", Convert.ToString("attachment;filename=") &amp; FileName)
            grdSearch.GridLines = GridLines.Both
            grdSearch.HeaderStyle.Font.Bold = True
            grdSearch.RenderControl(htmltextwrtter)
            Response.Write(strwritter.ToString())
            Response.[End]()
        Catch ex As Exception
            ' Do something important here if you expect strange results
        End Try
    End Sub

Now in C#:

You will need: using System.IO;

try {
	Response.Clear();
	Response.Buffer = true;
	Response.ClearContent();
	Response.ClearHeaders();
	Response.Charset = "";
	string FileName = "filename" + DateTime.Now + ".xls";
	StringWriter strwritter = new StringWriter();
	HtmlTextWriter htmltextwrtter = new HtmlTextWriter(strwritter);
	Response.Cache.SetCacheability(HttpCacheability.NoCache);
	Response.ContentType = "application/vnd.ms-excel";
	Response.AddHeader("Content-Disposition", Convert.ToString("attachment;filename=") + FileName);
	grdSearch.GridLines = GridLines.Both;
	grdSearch.HeaderStyle.Font.Bold = true;
	grdSearch.RenderControl(htmltextwrtter);
	Response.Write(strwritter.ToString());
	Response.End();
} catch (Exception ex) {
	// Do something important here if you expect strange results
}

I realize you may not need some of the formatting that I used in this example so remove the Gridview related property assignments in the export snippet. Also, depending on how you format your gridview on the aspx page will dictate some of the formatting you have on the spreadsheet. Hope this helps, questions are welcome.