Thursday, March 21, 2019

Calling Server side method from Client Script ASP.Net

A way to call service from client browser without a post back. This is only a structure, this will receive call back request from client page (aspx) by implementing ICallbackEventHandler interface


Step 1: [new Class]
public partial class ClientCallbackPage : System.Web.UI.Page, ICallbackEventHandler

{


}

Step 2: [Interface implementation]
The ICallbackEventHandler has two methods method 1: RaiseCallBackEvent() that receives request from the client browser, accept param as string argrument, method 2: GetCallbackResult() return result back to client browser.

public void RaiseCallbackEvent(string callbackEventArgument)

{
//m_callbackEventArgument is a string variable declare in te class
m_callbackEventArgument = callbackEventArgument;
}

Step 3:[Interface implementation]

//method to execute server method and return result back
public string GetCallbackResult()
{
//type ur code here

return (something); //return value will send to the client script method
}

Step 4:

//Client script
function ClientCallbackScript(result, context)
{
//result will return the data from server.(see return (something); above)

//type ur code here
}

Step 5:

// in page load we are deciding for which event
//the server side method to invoke
if (! Page.IsPostBack)
{
string callbackEventReference =
Page.ClientScript.GetCallbackEventReference(this,
"parameter pass from client", "ClientCallbackScript",
"null");

txtName.Attributes["onclick"] = callbackEventReference;//event fire for each click in the text box
}

Tuesday, March 19, 2019

Display <div> content in column wise

Output






Here explain a way to display multiple <div> in column wise. To achieve this, we required one Parent <div>, and parent div contains multiple child <div>, we list child <div> in column wise.

To achieve this we just need a style like below.

<style>

 

* {

           box-sizing : border-box ;
    }

 

/* Create equal columns that floats next to each other */
.column{

                        float:left ;
          width:50%;

                        padding : 10px;

}

 

/* Clear floats after the columns */

.row:after{

                 content : "";

                        display : table;

                        clear : both;

}

</style>


hope style is straight forward, width in style-class .column and display in style-class .row:after is crucial here. Width property defining number of column to be displayed.

 

 

HTML
you should required one parent and multiple child <div> tags. Below is parent should look like below. Parent should refer style-class "row

 

<divname="parent"class="row"style="width:100%;">


Child should refer style-class "column" and put your content under the <div> tag 

 

<divname="child"class="column"style= "background: cornflowerblue" >

 

Once complete above, your child <div> will list in two column. If you decrease the width property of style-class .column to 30%, then <div> will list in 3 column, like that you could reduce the width to list desired level of columns.


HTML should be like below.

 

<divname="parent"style="width: 100%;"class="row">

           <divname="child"class="column"style= "background: cornflowerblue" >

                     <divname="childcontent">

                               My Content 1

                     </div>

           </div>

            

           <divname="child"class="column"style= "background: cornflowerblue" >

                     <divname="childcontent">

                               My Content 2

                     </div>

           </div>

 

           <divname="child"class="column"style= "background: cornflowerblue" >

                     <divname="childcontent">

                               My Content 3

                     </div>

           </div>

 

           <divname="child"class="column"style= "background: cornflowerblue" >

                     <divname="childcontent">

                               My Content 4

                     </div>

           </div>

</div>

 

Output