RSS

Monthly Archives: July 2013

jquery calendar not working in updatepanel


JQuery Calaner

 
<link rel=”stylesheet” href=”http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css&#8221; />
<script src=”http://code.jquery.com/jquery-1.9.1.js”></script&gt;
<script src=”http://code.jquery.com/ui/1.10.3/jquery-ui.js”></script&gt;
<link rel=”stylesheet” href=”/resources/demos/style.css” />

<script>
$(function () {
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function (evt, args) {
$(“#ctl00_ContentPlaceHolder1_pspSalePrice_txtstDate”).datepicker({ minDate: 0 });
});

});

</script>

 
<asp:UpdatePanel ID=”UpdatePanel25″ runat=”server” UpdateMode=”Conditional” RenderMode=”Inline”>
<ContentTemplate>

<table>

<tr id=”trDate” runat=”server” height=”10″>
<td >
</td>
<td align=”right”>
<asp:Label ID=”lblDate” runat=”server” Text=”Start Date” CssClass=”Label”></asp:Label>&nbsp;
</td>
<td align=”left”>
<asp:TextBox ID=”txtstDate” runat=”server” MaxLength=”10″  ></asp:TextBox>

<asp:RequiredFieldValidator ID=”rfvDate” runat=”server”
ControlToValidate=”txtstDate” ErrorMessage=”Please enter a Date.”
ToolTip=”Please enter a Date.” ValidationGroup=”AddEditPromotionalSalePrices” Enabled=”true” >*</asp:RequiredFieldValidator>

</td>
<td >
</td>
</tr>

</table>

</ContentTemplate>
</asp:UpdatePanel>

 

Solution:

i face this issue when i create usercontrol and use on Webpage.

with Above code  Jquery Calander on woriking first time after postback calander not working . so fine solution of this problem just change in header section jquery code replace with below mention code.

 


<script type="text/javascript">
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(evt, args) {
        $(".datepicker").datepicker();
    });
</script>

dtpicker
 
Leave a comment

Posted by on July 31, 2013 in JQuery

 

Tags: , , , , ,

Image Zoom or enlarge using ASP.Net GridView control


In this Article you see  Image enlarge or zooming to an click on  Image  column on ASP.Net GridView control.

if you want to see small size image  of Gridview Row to see enlarge then this article very helpfull for you.if this helpful then kindly comment about that.

9e45058b

Concept of Idea

Here I’ll be adding Zoom functionality to all the images in the GridView so that user can click on that and view the enlarged image in a modal div .

 

Add DIV

First you need to add the two DIV on Asp.net page where you place gridview.

 

<div id=”divBackground”>

</div>

<div id=”divImage”>

    <table style=”height: 100%; width: 100%”>

        <tr>

            <td valign=”middle” align=”center”>

                <img id=”imgLoader” alt=””

                 src=”images/loader.gif” />

                <img id=”imgFull” alt=”” src=””

                 style=”display: none;

                height: 500px;width: 590px” />

            </td>

        </tr>

        <tr>

            <td align=”center” valign=”bottom”>

                <input id=”btnClose” type=”button” value=”close”

                 onclick=”HideDiv()”/>

            </td>

        </tr>

    </table>

</div>

 

 

The First DIV divBackground will act as a modal DIV and will freeze the screen. The second DIV divImage will be used to display the enlarged image. You will notice the image which I have added to provide a loading in progress until the image is completely loaded. The below image displays the loading of an image.

 

when you Click to enlarge image

a156c83d-40a1-41fb-bca1-c84a049b10ff

Adding the CSS

You will need to add the following CSS in the head section of the page or in the CSS file

 

<style type=”text/css”>

     body

     {

        margin:0;

        padding:0;

        height:100%;

     }

     .modal

     {

        display: none;

        position: absolute;

        top: 0px;

        left: 0px;

        background-color:black;

        z-index:100;

        opacity: 0.8;

        filter: alpha(opacity=60);

        -moz-opacity:0.8;

        min-height: 100%;

     }

     #divImage

     {

        display: none;

        z-index: 1000;

        position: fixed;

        top: 0;

        left: 0;

        background-color:White;

        height: 550px;

        width: 600px;

        padding: 3px;

        border: solid 1px black;

     }

   </style>

 

Adding the JavaScript on Same Page

JavaScript function that will display the modal DIV when the Image in the ASP.Net GridView Control is clicked.

<script type=”text/javascript”>

 function LoadDiv(url)

 {

    var img = new Image();

    var bcgDiv = document.getElementById(“divBackground”);

    var imgDiv = document.getElementById(“divImage”);

    var imgFull = document.getElementById(“imgFull”);

    var imgLoader= document.getElementById(“imgLoader”);

 

    imgLoader.style.display = “block”;

    img.onload = function() {

        imgFull.src = img.src;

        imgFull.style.display = “block”;

        imgLoader.style.display = “none”;

    };

    img.src= url;

    var width = document.body.clientWidth;

    if (document.body.clientHeight > document.body.scrollHeight)

    {

        bcgDiv.style.height = document.body.clientHeight + “px”;

    }

    else

    {

        bcgDiv.style.height = document.body.scrollHeight + “px” ;

    }

 

    imgDiv.style.left = (width-650)/2 + “px”;

    imgDiv.style.top =  “20px”;

    bcgDiv.style.width=”100%”;

   

    bcgDiv.style.display=”block”;

    imgDiv.style.display=”block”;

    return false;

 }

 function HideDiv()

 {

    var bcgDiv = document.getElementById(“divBackground”);

   var imgDiv = document.getElementById(“divImage”);

    var imgFull = document.getElementById(“imgFull”);

    if (bcgDiv != null)

    {

        bcgDiv.style.display=”none”;

        imgDiv.style.display=”none”;

        imgFull.style.display = “none”;

    }

 }

</script>

Above are the two functions that will take care of all the functions needed. The LoadDiv function as the name that loads the modal background DIV and the Image DIV with the enlarged image. This function gets called when the Image in the GridView is clicked.

An important line I need to point out is this

imgDiv.style.left = (width-650)/2 + “px”;

 

As you will notice I have used a number 650 here. 650 is the width of the Image DIV in order to align it at the center of the screen I am subtracting it from the browser Viewport width and then taking the average.

The HideDiv function simply gets called when the Close Button is clicked on the Image DIV. It simply hides the DIV and unfreezes the screen.

 

Calling JavaScript from ASP.Net GridView Control

The only difference from my previous article is that I have used Image Control in Template Field instead of ImageField. Refer the GridView below

 

 

 

<asp:GridView ID=”GridView1″ runat=”server” AutoGenerateColumns=”false”

  Font-Names=”Arial”>

<Columns>

    <asp:BoundField DataField=”ID” HeaderText=”ID” />

    <asp:BoundField DataField=”FileName” HeaderText=”Image Name” />

    <asp:TemplateField HeaderText=”Preview Image”>

        <ItemTemplate>

            <asp:ImageButton ID=”ImageButton1″ runat=”server”

            ImageUrl='<%# Eval(“FilePath”)%>’ Width=”100px”

            Height=”100px” Style=”cursor: pointer”

            OnClientClick = “return LoadDiv(this.src);”

            />

        </ItemTemplate>

    </asp:TemplateField>

</Columns>

</asp:GridView>

 

 

 

when you  calling the LoadDiv function in the OnClientClick event of ASP.Net ImageButton. It is important to return false from the JavaScript function to avoid postbacks. In the figure below you can view the enlarged image being displayed

 

Click to enlarge image

 

 

 

Zoom

 

That’s it we come to an end. Hope you liked it. Download the related source code using the link below.

https://skydrive.live.com/?cid=fcca6a631a7ce903#cid=FCCA6A631A7CE903&id=FCCA6A631A7CE903!883

 

 
Leave a comment

Posted by on July 30, 2013 in ASP Dot Net C#

 

Tags: , , , , , ,

How to display the questions with their answers


Hello ,

if you want to develop application like MCQ or Survey Conduct  Web Application Project then use below mention code and also i add complete project code . i search on that lot of time to how to implement & validation . i think this Article very helpful for you.

surveyimgClient Side:

.css

 

<style type=”text/css”>
.questiontext {
background-color: #EEF6FF;
font-family: verdana;
font-size: 12px;
font-weight: bold;
padding: 0.5em 1em;
text-align: left;
}
.radioButtonList{ list-style-type: none;
margin: 0 0 0.5em 0.5em;
text-align: left;
}

.coa-button {
background-color: #9AC51D;
background-image: -moz-linear-gradient(center top , #9AC51D, #7C9F17);
border: 1px solid #759716;
border-radius: 3px 3px 3px 3px;
color: #FFFFFF;
display: block;
padding: 7px 0;
text-align: center;
text-decoration: none !important;
width: 189px;
}
</style>

 

:: Following  below  repeater code to show all Surveys

 

<asp:Repeater id=”Repeaterforselect” runat=”server”
onitemcommand=”Repeaterforselect_ItemCommand” >

<ItemTemplate>

<li>

<i><%#(((RepeaterItem)Container).ItemIndex+1).ToString()%></i>
<asp:LinkButton ID=”LinkButton1″ runat=”server” Text='<%#Eval(“title”)%>’ CommandName=”Click”

CommandArgument='<%# Eval(“id”)%>’ >

</asp:LinkButton>

</li>

</ItemTemplate>

</asp:Repeater>

 

:: Following  below  DataList  code to show selected  Survey Question & option answer

<asp:DataList ID=”dtlQuestions” runat=”server” RepeatDirection=”Vertical” DataKeyField=”ID” OnItemDataBound=”dtlQuestions_ItemDataBound” Width=”630px”>
<ItemTemplate>
<div >
<asp:Label ID=”Label2″ Text='<%#(((DataListItem)Container).ItemIndex+1).ToString()%>’ Runat=”server”/>
<asp:Label ID=”q” runat=”server” Text='<%# Eval(“questions”) %>’ CssClass=”questiontext”></asp:Label> <asp:RequiredFieldValidator ID=”RequiredFieldValidator1″ runat=”server”
ErrorMessage=”Required” ForeColor=”Red” ControlToValidate=”dtlAnswers” ValidationGroup=”Bla”></asp:RequiredFieldValidator>
<asp:HiddenField ID=”hnQuestionsid” runat=”server” Value='<%# DataBinder.Eval(Container.DataItem, “Questionsid”)%>’ />
</div>
<br />
<asp:RadioButtonList ID=”dtlAnswers” runat=”server” ValidationGroup=”Bla” RepeatDirection=”Vertical” RepeatColumns=”1″ CssClass=”radioButtonList”>

</asp:RadioButtonList>
</ItemTemplate>
</asp:DataList>

 

:: Submit Button Handle with validation, without selection any question data not insert into database.

 

<asp:Button ID=”btnSubmit” runat=”server” onclick=”btnSubmit_Click”

ValidationGroup=”Bla” CssClass=”coa-button” Width=”100px” style=”float:right;margin-right:150px;” Visible=false
Text=”Submit”  />

 

Server Side:

 

string connectionString = ConfigurationManager.ConnectionStrings[“ApplicationServices”].ToString();
SqlConnection conn;
SqlCommand cmd = new SqlCommand();

////Load All Survey on Page Load

protected void Page_Load(object sender, EventArgs e)
{

conn = new SqlConnection(connectionString);

if (!Page.IsPostBack)
{

hdnsurveyformswomp.Value = “0”;

loadSurvey();

}
}

// Fill Repeater Control to All Survey

public void loadSurvey()
{

string connectionString = ConfigurationManager.ConnectionStrings[“ApplicationServices”].ToString();

DataSet ds = new DataSet();

ds = SqlHelper.ExecuteDataset(connectionString, System.Data.CommandType.StoredProcedure, “surveysselect”);
if (ds.Tables[0].Rows.Count > 0 && ds != null)
{
Repeaterforselect.DataSource = ds;
Repeaterforselect.DataBind();
}

}

// At this Event we Load Question & option answer on Each Survey Click to fill datalist
protected void Repeaterforselect_ItemCommand(object source, RepeaterCommandEventArgs e)
{
switch (e.CommandName)
{
case “Click”:
//get command argument here
string id = e.CommandArgument.ToString();
loadQuestion(id);

break;
}

}

// Load Question against Survey

public void   loadQuestion(string id)
{

string connectionString = ConfigurationManager.ConnectionStrings[“ApplicationServices”].ToString();

DataSet ds = new DataSet();

SqlParameter[] paramArray = new SqlParameter[] {
new SqlParameter(“@id”,Convert.ToInt32(id)),

};

ds = SqlHelper.ExecuteDataset(connectionString, System.Data.CommandType.StoredProcedure, “SurveyFormsWOMPretrive”, paramArray);
if (ds.Tables[0].Rows.Count > 0)
{

Label1.Text = ds.Tables[0].Rows[0][“title”].ToString();
hnSurveyid.Value = ds.Tables[0].Rows[0][“surveysid”].ToString();
dtlQuestions.DataSource = ds;
dtlQuestions.DataBind();
btnSubmit.Visible = true;
}

else
{
Label1.Text = “No Record Found”;
dtlQuestions.DataSource = null;
dtlQuestions.DataBind();
btnSubmit.Visible = false;
}

}

 

// Fill DataList RaiobuttonDropdownList against each Question

protected void dtlQuestions_ItemDataBound(object sender, DataListItemEventArgs e)
{

DataListItem drv = e.Item.DataItem as DataListItem;
RadioButtonList RadioButtonList1 = (RadioButtonList)e.Item.FindControl(“dtlAnswers”);
HiddenField hnQuestionsid = (HiddenField)e.Item.FindControl(“hnQuestionsid”);
DataSet ds = loadQuestionOptionbyqid(hnQuestionsid.Value);
if (ds != null && ds.Tables[0].Rows.Count > 0)
{
RadioButtonList1.DataSource = ds;
RadioButtonList1.DataTextField = “question_option”;
RadioButtonList1.DataValueField = “question_id”;
RadioButtonList1.DataBind();
}

}

// Load Question Option in Radiobuttonlist

 
public DataSet loadQuestionOptionbyqid(string id)
{

string connectionString = ConfigurationManager.ConnectionStrings[“ApplicationServices”].ToString();

DataSet ds = new DataSet();

SqlParameter[] paramArray = new SqlParameter[] {
new SqlParameter(“@id”,Convert.ToInt32(id)),

};

return SqlHelper.ExecuteDataset(connectionString, System.Data.CommandType.StoredProcedure, “Surveyquestionchoisebyqstid”, paramArray);

}
/// Submit Selected Question to db

 
protected void btnSubmit_Click(object sender, EventArgs e)
{

//Data save
//  count = 0;
if (dtlQuestions.Items.Count > 0)
{
foreach (DataListItem li in dtlQuestions.Items)
{
RadioButtonList rdList = li.FindControl(“dtlAnswers”) as RadioButtonList;
HiddenField hnQuestionsid = (HiddenField)li.FindControl(“hnQuestionsid”);
foreach (ListItem answer in rdList.Items)
{
bool isSelected = answer.Selected; if (isSelected) { int slval = Convert.ToInt32(answer.Value); InsertSurveyData(Convert.ToInt32(hnSurveyid.Value), Convert.ToInt32(hnQuestionsid.Value), Convert.ToInt32(slval)); }
}
}
}

Response.Redirect(“thanksyou.aspx”);

}

/// Insert Function

 

private void InsertSurveyData(int sid, int qid, int qoptid)
{
SqlCommand cmd = new SqlCommand();
cmd.CommandType = System.Data.CommandType.StoredProcedure;
cmd.CommandText = “SubmitSurveyForminsert”;
//simple hiden field no repeater
cmd.Parameters.Add(“@Surveyid”, SqlDbType.Int).Value = sid;
cmd.Parameters.Add(“@Questionid”, SqlDbType.Int).Value = qid;
cmd.Parameters.Add(“@surveyQuestionOptionid”, SqlDbType.Int).Value = qoptid;

cmd.Connection = conn;
conn.Open();
cmd.ExecuteNonQuery();

conn.Close();

}

 

 

// Complete Application Code With database Script

 

https://skydrive.live.com/?cid=FCCA6A631A7CE903&id=FCCA6A631A7CE903%21880

 

 
2 Comments

Posted by on July 24, 2013 in ASP Dot Net C#

 

Tags: , , ,

How to Disable Popup Blocker?


<script type=”text/JavaScript” language=”JavaScript”>
 var mine = window.open(”,”,’width=1,height=1,left=0,top=0,scrollbars=no’);
 if(mine)
    var popUpsBlocked = false
 else
    var popUpsBlocked = true
 mine.close()
</script>

 
Leave a comment

Posted by on July 8, 2013 in Uncategorized