ASP.net: pass dynamically created (by client-side javascript) value along with postback

Question

I have a button that performs a postback as follows:

default.aspx

<asp:LinkButton ID="LinkButton1" CssClass="print" runat="server" PostBackUrl="Default.aspx" OnClick="ExportTaxInfoToPDF">Print</asp:LinkButton>

default.aspx.cs

protected void ExportTaxInfoToPDF(object sender, EventArgs e)
{
    ...

I want to pass a javascript computed value to the codebehind (such as $('#taxTable').html() i.e. I want to bind the value of that computation to EventArgs e so I can retrieve it on the server side) How could I go about doing that or is there a better way of achieving that?

Thank you

EDIT:

Following Tetsuya Yamamoto's suggestions, I now have the following code:

<asp:HiddenField ID="TaxTableData" runat="server" Value="" />
<asp:LinkButton ID="PrintButton" CssClass="print" runat="server" PostBackUrl="Default.aspx" OnClick="ExportTaxInfoToPDF">Print</asp:LinkButton>

TaxTableData is populated whenever the popup containing the data (in table format) is opened using directly the HTML of the table:

$("#ctl00_maincontent_TaxTableData").val($table[0].outerHTML);

The HTML is then converted into PDF using iTextSharp. It is a simple html <table>:

<table>
<thead>
<th>...</th>
...
</thead>
<tbody>
..

I am wondering if there are better ways of transmitting the data to the server side such as not to be forced to disable security checks? Is there a way to serialize the table and unserialize it on the other side?

You can use hidden field (either vanilla HTML `input type="hidden"` or `asp:HiddenField` server control) and use `Request.Form["taxTable"]` (or `ClientID` if server control being used) to retrieve the client-side value. — Tetsuya Yamamoto, Jan 31 '17 at 04:14
Thank you, this worked. Although, I am getting an error while trying to pass HTML as I need to do (*A potentially dangerous Request.Form value was detected from the client*) Do you know what would be the best way to pass HTML? — Andrei Savin, Jan 31 '17 at 05:30
Try using `` with `` in web config and `<%@ Page ValidateRequest="false" %>` in ASPX page. Which character triggered `Request.Form` error? — Tetsuya Yamamoto, Jan 31 '17 at 05:49
Thank you for your help. This worked. It was the `<` character I presume (error message said: ` — Andrei Savin, Jan 31 '17 at 06:05
I preferred to convert HTML markup into other format (e.g. JSON) before pass it into code behind to prevent `Request.Form` error, then serialize received data in process logic and render the result thereafter. You can edit the question to provide data format you want to pass with, and I can provide steps to do so in detailed answer. — Tetsuya Yamamoto, Jan 31 '17 at 06:13
I have edited the original question as I am interested to know a better way of doing this. You can provide a full answer and I will accept it. Thank you! — Andrei Savin, Jan 31 '17 at 08:10

score 1 · Accepted Answer · edited May 23 '17 at 11:53

First, to pass JS values into code behind on postback, you can set hidden field server control value using this:

<!-- ASPX markup -->
<asp:HiddenField ID="TaxTableData" runat="server" Value="" />
<script type="text/javascript">
    $('#<%= TaxTableData.ClientID %>').val($table[0].outerHTML); // set hidden field value with table markup
</script>

// Code behind
protected void ExportTaxInfoToPDF(Object sender, EventArgs e)
{
    ...
    var table = this.TaxTableData.Value; // get passed data
    ...
}

Given the passed string from client-side contains HTML table markups, it is possible to throw potential dangerous Request.Form exception during postback from the hidden field due to presence of illegal characters. To avoid it, you may try one of the solutions below:

A. Disable request validation

Add these lines in web.config file:

<httpRuntime requestValidationMode="2.0" />
<pages validateRequest="false" />

Also, in Page directive you need to add ValidateRequest attribute:

<%@ Page ValidateRequest="False" %>

This way allows illegal characters included in HTML markup to be passed smoothly, however it can pose security-related issues.

B. Using JSON serialization

The HTML markups can be serialized into JSON format using this method:

<script type="text/javascript">
    $('#<%= TaxTableData.ClientID %>').val(JSON.stringify({ html: $table[0].outerHTML }));
</script>

Then, pass it into code behind using hidden field value and use JavaScriptSerializer to deserialize it, either using dedicated class or a Dictionary type:

// Code behind
protected void ExportTaxInfoToPDF(Object sender, EventArgs e)
{
    ...
    var serializedTable = this.TaxTableData.Value; // get passed data

    // use either dedicated class with SerializableAttribute or Dictionary type
    // this example uses Dictionary for simple HTML markups
    var serializer = new JavaScriptSerializer();
    Dictionary<String, Object> dict = serializer.Deserialize<Dictionary<String, Object>>(serializedTable);

    var table = dict["html"].ToString();
    ...
}

NB: If submitted HTML markup contains attribute with values inside single or double quote marks (e.g. <table class='example'>), escape all quote marks in client-side before setting hidden field value (usually it done automatically when doing JSON.stringify).

The serialization method is preferred if you want to keep request validation settings in place, preventing malicious scripts to be executed in client-side.

Related issues:

ASP.net: pass dynamically created (by client-side javascript) value along with postback

1 Answers1