How to save input text value into database using asp.net

Question

User-1640542475 posted

Hi

I have an issue how to save value in input value. I have added the "runat="server". If I add Runat server, data could not populate into input text control from

card reader. If I remove runat server, data can populate, but could not save, error is not member....... 

pls advice me.

Thank  you in advance

maideen

Here is my code

<script>
function DisplayMyKAD(obj)
{
	var NL = "\n";
	var out = "";
	var out1 = "<b></b><br>";
	if (obj.Photo != "") { 
        out1 += "<img src=\"data:image/jpg;base64," + obj.Photo + "\"></img>";
	}

	document.getElementById("mykad_info").innerHTML = 
					out1 +
					//"<b>Itemized Result:</b><br>" + 
					"<textarea rows=\"16\" cols=\"120\" style=\"border:none;\">" + 
					out +
        "</textarea>"

    //document.getElementById("imgIC").value = obj.out1;
    document.getElementById("Name").value = obj.Name;
    document.getElementById("NRICNo").value = obj.ICNo;
    document.getElementById("Gender").value =  obj.Gender;
    document.getElementById("DOB").value = obj.DOB;
    document.getElementById("BirthPlace").value = obj.BirthPlace;
    document.getElementById("Race").value = obj.Race;
    document.getElementById("Photo").value = obj.Photo;

}
function DisplayMyKAD_JSON(mykad_str) {
    //var out = "<b>MyKAD:</b><br>";
	var obj = JSON.parse(mykad_str);
	DisplayMyKAD(obj);
}
function getElement(xmldoc, tagname)
{
	if( typeof (xmldoc.getElementsByTagName(tagname)[0].childNodes[0]) == "undefined" ) {   
		return "";
	}
	else {
		return xmldoc.getElementsByTagName(tagname)[0].childNodes[0].nodeValue;
	}
}
function quote(s) // return abc as "abc", needed in json string
{
	return "\"" + s + "\"";
}	
function DisplayMyKAD_XML(mykad_str) {
	var json_str = "{";
	parser = new DOMParser();
	xmlDoc = parser.parseFromString(mykad_str,"text/xml");	
	
	// convert to json string
	json_str += (quote("ERR_CODE") + ":" + quote(getElement(xmlDoc, "ERR_CODE")) + ",");
	json_str += (quote("Name") + ":" + quote(getElement(xmlDoc, "Name")) + ",");
	json_str += (quote("ICNo") + ":" + quote(getElement(xmlDoc, "ICNo")) + ",");
	json_str += (quote("Gender") + ":" + quote(getElement(xmlDoc, "Gender")) + ",");
	json_str += (quote("DOB") + ":" + quote(getElement(xmlDoc, "DOB")) + ",");
	json_str += (quote("BirthPlace") + ":" + quote(getElement(xmlDoc, "BirthPlace")) + ",");
	json_str += (quote("OldICNo") + ":" + quote(getElement(xmlDoc, "OldICNo")) + ",");
	json_str += (quote("Addr1") + ":" + quote(getElement(xmlDoc, "Addr1")) + ",");
	json_str += (quote("Addr2") + ":" + quote(getElement(xmlDoc, "Addr2")) + ",");
	json_str += (quote("Addr3") + ":" + quote(getElement(xmlDoc, "Addr3")) + ",");
	json_str += (quote("Postcode") + ":" + quote(getElement(xmlDoc, "Postcode")) + ",");
	json_str += (quote("City") + ":" + quote(getElement(xmlDoc, "City")) + ",");
	json_str += (quote("State") + ":" + quote(getElement(xmlDoc, "State")) + ",");
	json_str += (quote("Race") + ":" + quote(getElement(xmlDoc, "Race")) + ",");
	json_str += (quote("Nationality") + ":" + quote(getElement(xmlDoc, "Nationality")) + ",");
	json_str += (quote("Left_FP_Verify_Status") + ":" + quote(getElement(xmlDoc, "Left_FP_Verify_Status")) + ",");
	json_str += (quote("Right_FP_Verify_Status") + ":" + quote(getElement(xmlDoc, "Right_FP_Verify_Status")) + ",");
	json_str += (quote("Photo") + ":" + quote(getElement(xmlDoc, "Photo")) + ",");
	json_str += (quote("RegDate") + ":" + quote(getElement(xmlDoc, "RegDate")) + ",");
	json_str += (quote("Version") + ":" + quote(getElement(xmlDoc, "Version")) + "}");
	DisplayMyKAD_JSON(json_str) 
}
function GetMyKAD(fmt) 
{
	var method = "GET";
	var url = "";
	if (fmt == "JSON") {
		url = document.getElementById("idURIJSON").value;
	} else if (fmt == "XML") {
		url = document.getElementById("idURIXML").value;
	}
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function() {
		if (this.readyState == 4) {
			if (this.status == 200) {
				document.getElementById("returntext").innerHTML = 
					//"<b>Responseljljlj:</b><br>" + 
					"<textarea rows=\"8\" cols=\"120\" style=\"border:none;\">" + 
					//this.responseText +
					"</textarea>";
				if (fmt == "JSON") {
					DisplayMyKAD_JSON(this.responseText);
				} 
				else if (fmt == "XML") {
					DisplayMyKAD_XML(this.responseText);
				}
			}
			else {
				alert("Failed to get any data from the host.");
			}
		}
	};

	if ("withCredentials" in xhr) {
		// Check if the XMLHttpRequest object has a "withCredentials" property.
		// "withCredentials" only exists on XMLHTTPRequest2 objects.
		xhr.open(method, url, true);
	} else if (typeof XDomainRequest != "undefined") {
		// Otherwise, check if XDomainRequest.
		// XDomainRequest only exists in IE, and is IE's way of making CORS requests.
		xhr = new XDomainRequest();
		xhr.open(method, url);
	} else {
		alert("CORS is not supported by the browser");  // Otherwise, CORS is not supported by the browser.
		xhr = null;
	}
	xhr.send();
} // GetMyKAD

<script>

var myurlxml = "http://127.0.0.1/MYKAD/GetMyKAD?LoadPhoto=YES&VerifyFP=NO&Format=XML";
var myurljson = "http://127.0.0.1/MYKAD/GetMyKAD?LoadPhoto=YES&VerifyFP=NO&Format=JSON";
document.getElementById("idURIXML").value = myurlxml;
document.getElementById("idURIJSON").value = myurljson;
</script>


            <div class="row">
                <div class="col-lg-3">
                    <asp:Label ID="Label15" runat="server" Text="Name" CssClass="txtsize"></asp:Label>
                    <input id="Name" type="text" name="Name"  class="form-control cbo txtsize" runat="server"  />
                </div>
                <div class="col-lg-1">
                    <br />
                    <button id="idGetMyKADXML" type="button" onclick="GetMyKAD('XML')" Class="btn btn-primary" style="width:100px"  >XML</button><br>      
                </div>
            </div>
            <div class="row">            
                <div class="col-lg-3">
                    <asp:Label ID="Label1" runat="server" Text="NRIC No" CssClass="txtsize"></asp:Label>
                    <input id="NRICNo" type="text" name="NRICNo" class="form-control cbo txtsize" runat="server" />
                </div>
            </div>
            <div class="row">            
                <div class="col-lg-3">
                    <asp:Label ID="Label2" runat="server" Text="Gender" CssClass="txtsize"></asp:Label>
                    <input id="Gender" type="text" name="Gender" class="form-control cbo txtsize" runat="server" />
                </div>
            </div>
            <div class="row">            
                <div class="col-lg-3">
                    <asp:Label ID="Label3" runat="server" Text="Date Birth" CssClass="txtsize"></asp:Label>
                    <input id="DOB" type="text" name="DOB" class="form-control cbo txtsize" runat="server" />
                </div>
            </div>
            <div class="row">            
                <div class="col-lg-3">
                    <asp:Label ID="Label4" runat="server" Text="Birth Place" CssClass="txtsize"></asp:Label>
                    <input id="BirthPlace" type="text" name="BirthPlace" class="form-control cbo txtsize" runat="server" />
                </div>
            </div>
            <div class="row">            
                <div class="col-lg-3">
                    <asp:Label ID="Label5" runat="server" Text="Race" CssClass="txtsize"></asp:Label>
                    <input id="Race" type="text" name="race" class="form-control cbo txtsize" runat="server" />
                </div>
            </div>
            <div class="row">            
                <div class="col-lg-11">
                    <asp:Label ID="Label6" runat="server" Text="Photo" CssClass="txtsize"></asp:Label>
                    <input id="Photo" type="text" name="BirthPlace" class="form-control txtsize" runat="server" />
                </div>
            </div>
            <div class="row">
                <div class="col-lg-5">
                    <br />
                    <asp:Button ID="btnSave" runat="server" Text="Submit" CssClass="btn btn-primary"  />

                 </div> 
            </div>
            <div class="row">    
                <br />

                <div class="col-lg-5">
                   <%-- <button id="idGetMyKADJSON" type="button" onclick="GetMyKAD('JSON')" Class="btn btn-primary" style="width:100px" >JSON</button><br>--%>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-8" id ="idURIJSON">                    
                </div>
                <div class="col-lg-8" id="idURIXML">                 
                </div>
           </div>
            <div class="row">
                <div class="col-lg-6" id="mykad_info">
                </div>
                <div class="col-lg-6" id="returntext">
                </div>
            </div>


			
Code behind Page

Imports dbConnection
Imports Microsoft.VisualBasic
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration.ConfigurationManager
Imports System.Configuration

Partial Class Help_MyKad
    Inherits System.Web.UI.Page
    Dim cmd As New SqlCommand
    Dim data As SqlDataReader
    Dim i As Integer
    Dim errmsg As String

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not IsPostBack Then

        End If
    End Sub

    Private Sub InsertNRICData()

        cmd = New SqlCommand
        cmd.Connection = conn
        cmd.CommandType = CommandType.Text
        cmd.CommandText = "INSERT INTO Temp_MyKad ( Name, NRICNo, Gender, DOB, BirthPlace, Race, ImageType, ImageData)" &
                          " VALUES (@Name,@NRICNo,@Gender,@DOB,@BirthPlace,@Race,@ImageType,@ImageData)"


        Try
            conn.Open()
            cmd.Parameters.Add("@Name", SqlDbType.VarChar).Value = Name.Value
            cmd.Parameters.Add("@NRICNo", SqlDbType.VarChar).Value = NRICNo.Value
            cmd.Parameters.Add("@Gender", SqlDbType.Decimal).Value = Gender.Value

            cmd.Parameters.Add("@DOB", SqlDbType.VarChar).Value = DOB.Value
            cmd.Parameters.Add("@BirthPlace", SqlDbType.VarChar).Value = BirthPlace.Value
            cmd.Parameters.Add("@Race", SqlDbType.Decimal).Value = Race.Value

            cmd.Parameters.Add("@ImageType", SqlDbType.VarChar).Value = "image/.jpg"
            cmd.Parameters.Add("@ImageData", SqlDbType.VarChar).Value = Photo.Value
            cmd.ExecuteNonQuery()

        Catch ex As Exception
            ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "Message", "alert('Error occured : " & ex.Message.ToString() & "');", True)
        Finally
            cmd = Nothing
            conn.Close()
        End Try
    End Sub

    Private Sub btnSave_Click(sender As Object, e As EventArgs) Handles btnSave.Click
        InsertNRICData()
    End Sub
End Class



			
			

Answer 1

User-685154102 posted

Hi maideen5,

When you use Runat=<g class="gr_ gr_73 gr-alert gr_gramm gr_inline_cards gr_run_anim Style replaceWithoutSep" id="73" data-gr-id="73">'server</g>' it makes the component as <g class="gr_ gr_102 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins replaceWithoutSep" id="102" data-gr-id="102">server</g> component. You can see the output <g class="gr_ gr_148 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="148" data-gr-id="148">html</g> in <g class="gr_ gr_164 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins replaceWithoutSep" id="164" data-gr-id="164">console</g> when running your web application. You'll see a cryptic id suffixed in the name of server control. You need to use the ClientID of the server component when accessing it in Javascript.

So for eg. in your case -

<input id="NRICNo" type="text" name="NRICNo" class="form-control cbo txtsize" runat="server" />

the corresponding reference to this server component would be -

document.getElementById('<%= NRICNo.ClientID %>').value = obj.ICNo;

Answer 2

User839733648 posted

Hi maideen5,

According to your description and code, I suggest that you could use asp:Textbox instead of input.

The TextBox server control is an input control that lets the user enter text. 

You could modify the code like:

<asp:TextBox ID="Name" runat="server" CssClass="form-control cbo txtsize"></asp:TextBox>

When you want to get Textbox value in Javascript, you should write like:

document.getElementById('<%= Name.ClientID %>')

Reference: https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.textbox?view=netframework-4.8 

Best Regards,

Jenifer