Need to convert an html form into an asp.net control

Posted on 2012-04-09
Medium Priority
Last Modified: 2012-04-25
This seems like it shouldn't be that hard but I'm not sure how to do this.

An outside contractor has handed me an html form for our site.

Our site is in sitefinity and I would like to convert this thing to an asp.net control.

However just slapping the html into the ascx file makes the cms editor lock up.

I know I can translate the inputs to textboxes, the options to a drop-down list etc. but how do I get the data sent when the original form had something like this:

<form action="https://theirsite/servlet/servlet.WebToCase?encoding=UTF-8\" method="POST">
hidden fields

<input type="submit" name="submit" />
Question by:EndeavorToPersevere
  • 6
  • 3
LVL 38

Expert Comment

by:Tom Beck
ID: 37825393
You can change your form tag to <form ID="form1" runat="server"> and add runat="server" to all inputs. They will behave just like asp:textboxes, etc.

Author Comment

ID: 37825423
So how does the data get passed to http://theirsite/servlet/servlet.WebToCase?encoding=UTF-8 when the button gets clicked?

Do I need to put code in the btnSubmit_Click event?

Author Comment

ID: 37825443
We currently have this page http://www.metalogix.com/events.aspx that uses hard-coded html. I am trying to have it automatically build from the events but I am running into trouble resolving the URL for the Registration URL.

Line 706 in the attached control code is where I am trying to translate this - can you please tell me the correct call to get a properly resolved URL - I am expecting something like "https://metalogix.webex.com/metalogix/lsr.php?AT=pb&SP=EC&rID=4989677&rKey=0663671568042aaf" after it is resolved.

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

LVL 38

Expert Comment

by:Tom Beck
ID: 37825652
I'm not familiar with sitefinity specifically, but putting runat="server" in your form tag will cause the data in the inputs for that page to be posted to itself on the server side where you can retrieve the values for any inputs with the runat="server" attribute. From there you can do whatever you need including calling a Web Service to parse the data entered and return a value.

Did you intend to attach some code? Line 706??

Author Comment

ID: 37827581
Sorry tommyBoy - the thing about line 706 was going in a trouble ticket for Sitefinity. Copy/paste error.

I appreciate your thoughts. Unfortunately the contractor is not providing a web service interface.

So what I'm left trying to sort out is some way to pass the data from aspx so it looks like it came from the html form.

I guess I 'm stuck making an html page with Javascript validation outside the CMS.
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 1500 total points
ID: 37828020
I cannot see the difference. A form is a form. Post data is post data. You can redirect from the server to any url you need. If you are submitting your html form to an outside url, you can submit your asp.net form to an outside url. With asp.net, you have the option to do server side validation first if that is what you require. The url you are submitting to will not see any difference. Unless I'm missing something in your particular situation.

Author Comment

ID: 37828370
Maybe I'm missing something obvious, here's the setup.

Our site runs on Sitefinity which is an ASP.Net / Telerik / C# based system (it does do VB.Net too but C# is preferred).

To create a page I have
- a .master file which contains the header, body, a form statement and various divs and content place holders to create the layout. The master I am trying to use is based on html 5.
- a theme with a style sheet and images to create the page look

I upload the .master file to Sitefinity and tie it to the theme as a template.

From there when I create a page I select the template which gives me the skeleton of the page.

I then fill the page with "generic content" html or controls/widgets (.ascx) that are built-in or I write.

Normally when we talk to the system this vendor has added on to, I talk through a web service. In this case, they want to hand me an html form to use.

What I want to do is have this page be in the CMS like any other page so the text on it can be edited/styled like the rest of the pages. I want to do validation preferably in C# and not Javascript and possibly add the captcha we are using on the other pages and then send the data off to them.

When I tried just slapping the html in an ascx file it locked up the page editor in the CMS. I'm reading that you can't have nested forms.

Accepted Solution

EndeavorToPersevere earned 0 total points
ID: 37873243
Just in case someone else runs across this, here is how I solved it. There may be a more elegant solution but this one is working except for dealing with the browser back button  (my next thread :-)  )

I ended up making the form an aspx page outside the cms. Here are a few things I had to deal with:
The form had to be posted to another server on completion
Some of the fields had to have names that weren't valid asp.net IDs - like 00x00000xxx
Once the form had an action, the submit button click event didn't get called

I ended up with:
starting with the form not having any action associated with it
declaring the fields with normal names, then changing their ID's on page load and using the new names on the requiredfieldvalidators for the controltovalidate field and in the javascript when I referenced them
going with a "validate" button that would make sure everything was valid, disable the fields so the user couldn't change them, set the form's action field and swap the validate button for a submit button
I ended up using Telerik's button because it had a client-side on-clicking event that would let me re-enable the fields at the last second so they would get picked up by the other application when the form posted

Here's the aspx file:
<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeFile="SubmitTicket.aspx.cs" Inherits="Tools_SubmitTicket" %>
<%@ Register src="../mynav/TopNav-MegaDD.ascx" tagname="TopNav_MegaDD" tagprefix="uc1" %>
<%@ Register TagPrefix="recaptcha" Namespace="Recaptcha" Assembly="Recaptcha" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Metalogix Submit Support Ticket</title>
    <link rel="stylesheet" type="text/css" href="/mysheets.css" />

    <form runat="server" id="form1" method="post" onsubmit="formsubmit">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    <div id="wrapper">
        <div id="header">
            <div id="hdrtop">
 		logos and other header stuff
            <uc1:TopNav_MegaDD ID="TopNav_MegaDD1" runat="server"/>
        <img src="my img" />
        <div id="content">
    	    <h1>Submit a <em>Support Ticket</em></h1>
    	    <div class="content">
                <p><em>Note: all fields are required</em></p>
                <telerik:RadButton ID="submit" runat="server" Text="Submit" ButtonType="LinkButton" Enabled="False" Visible="False" CommandArgument="SubmitCommand" CommandName="SubmitCommand" OnClientClicking="SubmitClicking" Image-IsBackgroundImage="True" Image-ImageUrl="/stylesheets/SubmitTicketImages/validateSubmitButtons.png">
                <input type=hidden name="retURL" value="http://www.metalogix.com/Support/Submit-Support-Ticket/Submit-Support-Ticket-Thank-You.aspx">

                input fields and validators
                <br />

                <input type="hidden"  id="external" name="external" value="1" />

               <div id="recaptchabox">
                    <recaptcha:RecaptchaControl ID="recaptcha" runat="server" PublicKey="mypublickey" PrivateKey="myprivatekey" Theme="white" />                  
                <asp:LinkButton ID="validate" runat="server" OnCommand="btnValidate_Command" 
                    CommandArgument="ValidateCommand" CommandName="ValidateCommand"><span>validate</span></asp:LinkButton>


    <%-- Submit clicking - reenable all fields so they are recorded properly --%>
        <script type="text/javascript">
            function SubmitClicking(sender, args) {
                var userinput = document.getElementById('name');
                userinput.disabled = false;

    <%--end Submit Clicking--%>
    <%--Submit Form--%>
    <script type="text/javascript">
        function formsubmit(sender, args) 
            var submitButton = document.getElementById('submit');
            submitButton.disabled = true;
            submitButton.visible = false;

            var validateButton = document.getElementById('validate');
            validateButton.disabled = false;
            validateButton.visible = true;
    <%--end Submit Form--%>

Open in new window

Here's the code behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text.RegularExpressions;

public partial class Tools_SubmitTicket : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)
        country.ID = "00x00000000xxx";
        ProductArea.ID = "00x00000000oxxx";
        ContractType.ID = "00x00000000oxxx";
        version.ID = "00x00000000xxx";
        Region.ID = "00x00000000xxx";
        LicenseKey.ID = "00x00000000xxx";

        // force the browser to do a full 
        // page reload if it comes back here (note this is not working yet)

    protected void btnValidate_Command(object sender, EventArgs e)
            if (Page.IsValid)
                // disable the text fields to prevent changes
                name.Enabled = false;
                email.Enabled = false;

                // hide the captcha
                recaptcha.Enabled = false;
                recaptcha.Visible = false;

                // switch the validate and submit buttons
                validate.Enabled = false;
                validate.Visible = false;

                submit.Enabled = true;
                submit.Visible = true;

                // set the action to call the other site
                Form.Action = "https://www.othersite.com/servlet/servlet.application?encoding=UTF-8";



Open in new window


Author Closing Comment

ID: 37890933
Thanks to tommyBoy for giving me the hints to get started on this.

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question