The DocumentViewer for ASP.NET and Angular supports the completion of MS Word compatible form fields including text form fields, checkboxes, dropdowns and date picker fields. Form fields are available automatically when they are part of the document that is loaded into the DocumentViewer. Based on the Conditional Instructions , required fields can be validated.

Forms, that can be created in the TX Text Control editor, are deployed using the DocumentViewer that allows end-users to complete form fields. The completed data can be merged back into the document in order to create a PDF document or it is possible to extract the form data only. This is helpful, if the completed data should be used to write them back into a database or the form data should be analyzed.

This ASP.NET Core sample shows how to deploy a form and how to collect the resulting data. For demo purposes, all Deployments are stored in a simple JSON file server-side. After creating a new Deployment, the list of available deployments is updated:

Creating documents with TX Text Control

The Deployment simply stores a user name (or id) and the available form fields:

public class Deployment {
public string Username { get; set; }
public FormField[] FormFields { get; set; }
}
view raw test.cs hosted with ❤ by GitHub

The FormField model contains the Name, Type and Value and is returned by the forms.getValues JavaScript method of the DocumentViewer:

public class FormField {
public string name { get; set; }
public string type { get; set; }
public dynamic value { get; set; }
}
view raw test.cs hosted with ❤ by GitHub

After clicking on Open, the end-user's view is opened in a new tab:

Creating documents with TX Text Control

After all fields have been completed, the form field values are posted back to the controller:

function submitform() {
// validate forms
var valid = TXDocumentViewer.forms.validate();
if (valid === false) { // not valid
$('.alert-info').text(
"Document contains invalid form fields.").show().delay(5000).fadeOut();
return;
}
// -> valid
// get the form values
var formsJson = JSON.stringify(TXDocumentViewer.forms.getValues());
// send values to controller
var serviceURL = "@Url.Action("FormValues", "Home", new { username = Model.Username })";
$.ajax({
type: "POST",
url: serviceURL,
contentType: 'application/json',
data: formsJson,
success: successFunc,
error: errorFunc
});
function successFunc(data, status) {
$('.alert-info').text(
"Thanks. Your document has been submitted!").show().delay(5000).fadeOut();
TXDocumentViewer.downloadDocument(TXDocumentViewer.StreamType.AdobePDF, true);
}
function errorFunc() {
$('.alert-info').text("Oops! There was an error.").show().delay(5000).fadeOut();
}
}
view raw test.js hosted with ❤ by GitHub

The controller method FormValues is deserializing the form field values and calls the helper method DeploymentHelpers.WriteValue:

[HttpPost]
public IActionResult FormValues(string Username) {
// read stream to retrieve form field values
Stream inputStream = Request.Body;
FormField[] fields;
StreamReader str = new StreamReader(inputStream);
string sBuf = str.ReadToEndAsync().Result;
fields = (FormField[])JsonConvert.DeserializeObject(sBuf, typeof(FormField[]));
// write the values
DeploymentHelpers.WriteValue(Username, fields);
return Ok();
}
view raw test.cs hosted with ❤ by GitHub

The DeploymentHelpers.WriteValue method is writing the completed form field values into the Deployments data source:

public static bool WriteValue(string username, FormField[] formFields) {
List<Deployment> deployments = GetDeployments();
foreach (Deployment deployment in deployments) {
if (deployment.Username == username) {
deployment.FormFields = formFields;
System.IO.File.WriteAllText("App_Data/deployments.json",
JsonConvert.SerializeObject(deployments));
return true;
}
}
return false;
}
view raw test.cs hosted with ❤ by GitHub

Back in the overview, the posted values are now visible in the table:

Creating documents with TX Text Control

You can test this sample on your own by downloading the project from our GitHub account.