Monday, December 22, 2008

Making server side decision based on client side JavaScript

Many of you might have come across the situation where you need to making server side discussion based on client side JavaScript confirm message value. Though this may sound very basic feature, surprisingly large developers struggle when implementing this. In this article, I will show you how to.


<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">

<table style="margin-top:100px;">

<tr style="padding-bottom:10px">

<td>

<asp:Label ID="lblitemName" Text="Item Value" runat="server">asp:Label>td>

<td>

<asp:TextBox ID="txtitemval" runat="server">asp:TextBox>td>

tr>

table>

<div style="padding-bottom:10px">

<asp:Label ID="lblMsg" runat="server">asp:Label>

div>

<div style=" margin-bottom:100px; margin-left:120px">

<asp:HiddenField ID="hdnField" runat="server" Value="false" />

<asp:Button ID="btnSubmit" runat="server" Text="Check Val" OnClick="btnSubmits_Click" />

div>

asp:Content>


And the code behind for this page is like

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Data.SqlClient;

public partial class Test : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void btnSubmits_Click(object sender, EventArgs e)

{

string itemValue = Convert.ToString(txtitemval.Text);

if (hdnField.Value == "false")

{

lblMsg.Visible = false;

AddJavascriptCode(itemValue);

}

else if (hdnField.Value == "true")

{

lblMsg.Visible = true;

lblMsg.Text = string.Format("You have entered {0}", itemValue);

hdnField.Value = "false";

}

}




private void AddJavascriptCode(string itemValue)

{

string script = @"<script language=""JavaScript"" type=""text/javascript"">

window.onload=function()

{

var IsConfirm = 1;

objField = document.getElementById('" + hdnField.ClientID + @"');

objSubmit = document.getElementById('" + btnSubmit.ClientID + @"');

IsConfirm = newConfirm('Test','You have entered " + itemValue + @" value. Are you sure you want to go next page?',1,1,0);

if(IsConfirm == true)

{

objField.value = 'true';

objSubmit.click();

}

else

{

objField.value = 'false';

}

}

function newConfirm(title,mess,icon,defbut,mods)

{

if (document.all)

{

retVal = confirm(mess);

retVal = (retVal==1)

}

else

{

retVal = confirm(mess);

}

return retVal;

}

</script>";

Page.ClientScript.RegisterStartupScript(this.GetType(), "Test", script);

}

}


See the Result below

5 comments:

  1. Thank you. Its a very good workaround. I didn't get the idea of making the page postback through clicking that button in javascript.

    By Mauro

    ReplyDelete
  2. Thank Q so much. it is more useful for me.

    ReplyDelete
  3. thanku so much for the wonderful post..i was lingering upon this issue for abt 2 days.. good job!!

    ReplyDelete
  4. You helped me a lot with these lines, spared me a lot of time. Thank you so much.

    ReplyDelete