Benefits of Html Helpers in Asp.Net MVC

So today i am going to give an overview on Html helpers in Asp.Net MVC . So first questions that stuck our mind are -

 What are Html helpers ?

 Why to use them instead of using simple Html coded controls

 What are their benefits in Asp.Net MVC

Html helpers are very much similar to Asp.Net web controls . But Html helpers are much more lightweight as compared to Asp.net Web forms Server controls . The similarity between server controls in Asp.net webforms and Html helpers in Asp.Net MVC are Viewstate . Means they both contain the ability to hold or update the data on postbacks using ViewStates for each controls .

Main  Benefits Of using Html Helpers in Asp.net MVC

• MVC Html Helpers contains Overloaded Methods like IPostBackDataHandler that Pre-populate the values of html helpers means it works similar to as viewstates
• Html Helpers is also having one more advantage It provide inbuilt Validation for html helpers textboxes 

Available HTML Helpers 

There following HTML helpers can be used to render (modify and output) HTML form elements:

1. BeginForm()
2. EndForm()
3. TextArea()
4. TextBox()
5. CheckBox()
6. RadioButton()
7. ListBox()
8. DropDownList()
9. Hidden()
10. Password()

Sample Code To Demonstrate Use of Html Helpers

ASPX CODE

<%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %>

<% using (Html.BeginForm()){%>

<p>

<label for="FullName">FullName</label>

<%= Html.TextBox("FullName") %>

<%= Html.ValidationMessage("FullName", "*") %>

</p>

<p>

<label for="Username">Username</label>

<%= Html.TextBox("Username") %>

<%= Html.ValidationMessage("Username", "*") %>

</p>

<p>

<label for="Password">Password:</label>

<%= Html.Password("Password") %>

<%= Html.ValidationMessage("Password", "*") %>

</p>

<p>

<label for="Password">Confirm Password:</label>

<%= Html.Password("ConfirmPassword") %>

<%= Html.ValidationMessage("ConfirmPassword", "*") %>

</p>

<p>

<%= Html.CheckBox("ReceiveNewsletter") %>

<label for="ReceiveNewsletter" style="display:inline">Receive Newsletter?</label>

</p>

<p>

<input type="submit" value="Register" />

</p>

<%}%>

RAZOR CODE

@Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.")

@using (Html.BeginForm()){ 

<p>

<label for="FullName">FullName</label>

@Html.TextBox("FullName")  

@Html.ValidationMessage("FullName", "*")  

</p>

<p>

<label for="Username">Username</label>

@Html.TextBox("Username")  

@Html.ValidationMessage("Username", "*")  

</p>

<p>

<label for="Password">Password:</label>

@Html.Password("Password")  

@Html.ValidationMessage("Password", "*")  

</p>

<p>

<label for="Password">Confirm Password:</label>

@Html.Password("ConfirmPassword")  

@Html.ValidationMessage("ConfirmPassword", "*")  

</p>

<p>

@Html.CheckBox("ReceiveNewsletter")  

<label for="ReceiveNewsletter" style="display:inline">Receive Newsletter?</label>

</p>

<p>

<input type="submit" value="Register" />

</p>

} 

Advantage of Asp.Net MVC

Asp.net  is a part of .net platform for creating,building, deploying and running web applications using C#,VB etc .we can develop a web application by using Asp.Net Web Form and Asp.Net MVC. Asp.Net MVC is advanced technology that is most widely used nowadays . MVC is a great thing available for developers that makes work of developers easy and more flexible .

MVC stands for Model-View-Controller . MVC separates the code in 3 different things that make the code cleaner , flexible and easy to understand and modify . So Today I am going to tell some of big advantages or some good things that Asp.Net MVC provides as compared to Web-forms . This is not a comparison of Web-forms and MVC this is just overview or advantages or features that Asp.Net mvc provides us

1. Rapid Application Development ( RAD ) :- So first I will start with biggest advantage of Asp.net Mvc and this is the thing that is most in demand in Enterprises and everywhere in development area . This is Rapid application development . Asp.Net MVC provides Database First Approach for developing WebApplications . This approach is used with Scanfolding Technique this technique is like a magic provided in Asp.Net MVC . Scanfolding technique tells if you have designed your database in good manner that means if you have Created Normalized Database with all like Primary keys, foreign keys ,One-many , many-many relationships then you need not to do more effort for developing rest on your application in Asp.Net MVC Rest of things will be created with less efforts using scanfolding . With Asp.Net MVC you can have your simple basic website ready within 1 minute after you created your Database . So that was explanation to RAD in Asp.Net MVC

In Pic below we are choosing MVC5 scanfolding template


Then it automatically generate code for us

2. Partial Layouts :- In Asp.Net we ofter use User controls that were used for code reusability we create a user control then where we require that type of code that we coded in user control we call that user control there . In similar way Partial Layouts is provided in Asp.Net MVC .Partial Layouts are very useful things provided in Asp.Net MVC . Partial Layouts are like Master Pages that we use in Asp.Net web-forms . These are used as master pages or master layouts that can be called in any view in Asp.Net MVC . Like in php we use include ( "partialheader.php" ); to include some header in all pages or some specific pages so instead of writting that code in all pages we call then there . Similar in Asp.Net Web-Forms We use content placeholders and contentplaceholders are placed in Master Pages and when we call these master pages and use then in child forms then code of child forms is placed in content placeholder area In the similar way Partial layout works . The partial layout contains @Renderbody in Razor view then replace the child page or code of  page that is calling it

3. MVC Is  Stateless : Asp.Net was Statefull by using viewstates or sessions but Asp.net MVC is stateless . It will be wrong to say mvc is stateless it would say http is stateless . By stateless i mean there is nothing in http that holds the user session or that record the activity of user when user logged in etc so this was maintained or state was maintained using viewstate and sessions . This was used in asp.net Webforms because they contain server controls that contains viewstate and that postback the values and update viewstates But there is not server controls in Asp.Net MVC So it does not maintain states . It has divided the code in three patterns model-view-controller that handles everything That's why it says MVC is stateless But in actual http is stateless that why MVC is stateless

4. No Events : As we came to know there are no server controls in Asp.Net MVC so there are no events for any control as there are not server controls All this is handled by connection of controllers with views where views hold your html code or designing code and controller hold your logics code .

Difference Between ViewState and Session in Asp.Net

"View State and Session "
  The Two main State Management things used in Asp.net Web applications . We cannot even think of an application without ViewState and Session . So today i decided to gave an overview of what is the difference between viewstate and session why these two terms exist and what are their usage To clearify this difference i am giving some points below

1. So First of all what is a Session ? -- A Session is a Time or a span of time upto which user used that webapplication or for how much session of how much period of time user has used your webapplication will be called session . Session contains some values that will be used throughout the user interaction with the webapplication and used in more than one webpage that user navigate So we can say that it is a variable in simple sense that takes our value from one page to another and Session got distroyed or killed automatically after a particular span or time or it is automatically destroyed or cleared when like user signout of application or when user close the browser

A live example would be a web application where a user login . Each user that logs into your system will have a unique session. We can hold additional data into the session which can be used as the user browses your site. We can hold the username, userrole, userpermissions simply by adding it to the session:


Session[“userrole”] = “programmer”; 
Session[“username”] = “Ageek”; 

Session[“userpermissions"] = “cangotohell”; 

A Session  stores the information on the server side  . It stores the values or it uses server memory for storage of data that it holds in . Session variables will use different new and unique session variables for each different user that logs in to web application . large amount of data can be stored on the session, web sites that have a large amount of traffic not use this method, because it will put a severe load on the server memory.

2. Now What is ViewState ? -- so we are clear with session now comes the turn of viewstate . So ViewState is also used for holding our important data But in case of viewstate data is kept in the single viewstate page . It means viewstate data is not taken from one page to another page in this point it is different from session . 

ViewState is only used to Track to analyse the changes that occur to current page during postbacks of data to pages .The viewstate of page can be viewed if you right click on webpage and then clickon view page source then you will see some code of lines similar to below code --

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value=””></input>

If you are having large number of viewstate fields then it will make the postbacks very slow as all viewstate values will be needed to updated during postbacks so it will make the webpage open slower

Data can be written into viewstate like we do in sessions . But it can retain that data only with life cycle of page after that it will be changed or updated .If you closes that page or redirects to another page then viewstate data will be reset .

How to fill data in viewstate and how to access that data 

ViewState[“PreviousPage”] = “http://www.google.com”; 

Retrieving data form ViewState:

string PreviousPage = ViewState[“PreviousPage”].ToString();  

Display Category on Product Page in Opencart

Necessity is the advent of everything today while doing some project i got requirement from my client to show the categories of the product to which that particular product belongs along with the product on the product view page So in order to accomplish this task we have to perform some simple and easy steps :

• In your open-cart folder whether it is online or offline double click on Catalog Folder
• Then inside Catalog folder double click on Controller folder
• Then inside Controller Folder double click on Product Folder
• Then inside Product Folder open Product.php file in your text editor
• Then Search for following line in Product.php file

$this->load->model('catalog/product');

• When this line found just below this line add the following code 

//product category

$this->load->model('catalog/category');

$this->data['catprod'] = array();

$product_category = $this->model_catalog_product->getCategories($product_id);

foreach ($product_category as $prodcat) {

$category_info = $this->model_catalog_category->getCategory($prodcat['category_id']);

if ($category_info) {

$this->data['catprod'][] = array(
'name' => $category_info['name'],
'href' => $this->url->link('product/category', 'path=' . $category_info['category_id'])
);
}
}

//end of product category

• Then again come in root folder of opencart
• In your open-cart folder whether it is online or offline double click on Catalog Folder
• Then inside Catalog folder double click on view folder
• Then inside Controller Folder double click on theme Folder
• Then inside Product Folder open your currently applied theme folder
• Then inside theme folder open template folder

How to use Login Dialog Box in Android Mono C#

For This small demo project we require the following file structure

Main.axml file that contains code for hello world button on which we place button that will further generate the Dialog Box for Login Activity

Main.cs file Now this file will contain the code for Main.axml actions and events

Login.axml file that will contain the code that will contain the style or pattern how the login dialog will look all .axml design code for login form will reside here

AXML Code For Login  Dialog Box  ( login .axml ) file code

Design Look -

It is a simple code that contains a linear layout that will place all controls in linear order as they are placed in it Then we have placed two Edittext for allowing the user to enter username in first and Password in second . Then we have placed two buttons One for login and second for cancellation of login .

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_height="match_parent"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:background="#fff"
    android:layout_width="300dp"
    android:paddingTop="10dp">
    <EditText
        android:layout_height="wrap_content"
        android:id="@+id/txtUsername"
        android:layout_width="match_parent">
        <requestFocus />
    </EditText>
    <EditText
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:id="@+id/txtPassword"
        android:layout_width="match_parent" />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/linearLayout1">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:id="@+id/btnLogin"
            android:text="Login" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:id="@+id/btnCancel"
            android:text="Cancel" />
    </LinearLayout>
</LinearLayout>

XAML code for Main .axml file 

Design Look -

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_height="match_parent"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:background="#fff"
    android:layout_width="300dp"
    android:paddingTop="10dp">
 
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:id="@+id/hello"
            android:text="Hello world!" />
 
</LinearLayout>

C# Code for Main.cs file 

 protected override void OnCreate(Bundle bundle)
{
 base.OnCreate(bundle);
 SetContentView(Resource.Layout.Main);
 TextView hellobtn = FindViewById<TextView>(Resource.Id.hello);
 hellobtn.Click += btnclick;
}

void btnclick(object sender, EventArgs e)
        {

            Dialog login = new Dialog(this);
            login.SetContentView(Resource.Layout.login);
            login.Show();
}

Explanation of Code 

PART I

protected override void OnCreate(Bundle bundle)
{
 base.OnCreate(bundle);
 SetContentView(Resource.Layout.Main);
 TextView hellobtn = FindViewById<TextView>(Resource.Id.hello);
 hellobtn.Click += loginclick;
}

In above code First i have used OnCreate Method that is startup method when an android application starts it first load up everything in OnCreate Method and Create their space in memory

SetContentView(Resource.Layout.Main);

Then at this line i have set what layout will this code is meant for I have choosen Main layout in Resource folder whose design preview is shown in images above

 Button loginbtn = FindViewById<Button>(Resource.Id.btnLogin);

Then at this line i have made instance of button and set that textview to the hello world button that i have placed on Main form I have used FindviewById method to find the button and then assign that button to hellobtn

Then at this line i have assigned click event to button by using following line of code

 hellobtn.Click += btnclick;

Then i have given definition to btnclick funtion in code below

PART I

void btnclick(object sender, EventArgs e)
        {

            Dialog login = new Dialog(this);
            login.SetContentView(Resource.Layout.login);
            login.Show();
}

In this code i have made Instance of Dialog class for showing dialog box on screen i have created new class instance then i have set what view will be shown on dialog that is going to appear i have set the view contentview to login.axml content view that i have designed earlier in this article then i have used show( ) function to show login dialog box

Star Pattern Programs Cplusplus

Program To Print Following Star Pattern in Cpluplus

#include<iostream.h>
void main()
{
   int i,j,k,n;
   cout<<"\Enter the number of lines to be printed: ";
    cin>>n;
   for(i=0;i<n;i++)
   {
      for(j=0;j<(n-i-1);j++)
 cout<<" ";
      for(k=0;k<(2*i+1);k++)
 cout<<"*";
      cout<<endl;
   }
      for(i=0;i<n-1;i++)
   {
      for(j=0;j<=i;j++)
cout<<" ";
      for(k=(2*n-2*i-3);k>0;k--)
   cout<<"*";
      cout<<endl;
   }
}

 

Program To Print Following Star Pattern in Cpluplus

Star Pattern in Cpluplus

#include<iostream.h>
void main()
{
 int i,j,k,n;
 cout<<"\Enter the number of lines to be printed: ";
 cin>>n;
 for(i=0;i<n;i++)
 {
       for(j=n-i-1;j>0;j--)
     cout<<" ";
       cout<<"*";
       for(k=2*i-1;k>0;k--)
     cout<<" ";             //code for upper triangle
       if(i!=0)
     cout<<"*";
       cout<<endl;
  }
  for(i=n-1;i>0;i--)
  {
       for(j=0;j<n-i;j++)
     cout<<" ";
       cout<<"*";                  //code for lower triangle
for(k=2*i-3;k>0;k--)
    cout<<" ";
       if(i!=1)
     cout<<"*";
       cout<<"\n";
    }
}

 

Program To Create Circular Loading Bar using Graphics.h

#include<graphics.h>

#include<dos.h>

void main()
{
int gd=DETECT,gm; 
              // variable to detect graphics driver and graphic mode

 int counter;   

//Below is code to initialize the graphics with parameters for graphics initgraph(&gd,&gm,"c:\\turboc3\\bgi");

//Loop to show the loading circle for(counter=0;counter<=360;++counter)
{
circle(300,200,80);
pieslice(300,200,0,counter,80);
outtextxy(200,320,"Loading....Please Wait!");
delay(20);
}
closegraph();
}

OUTPUT :

Program To Create Circular Loading Bar graphics.h cplusplus

Program To Create Loading Bar using Graphics.h

#include<iostream.h>
#include<conio.h>
#include<graphics.h>
#include<dos.h>

void main()
{
 int x=170,i,gdriver=DETECT,gmode;
  // variable to detect graphics driver and graphic mode

//Below is code to initialize the graphics with parameters for graphics
 initgraph(&gdriver,&gmode,"c:\\tc\\bgi");

 settextstyle(DEFAULT_FONT,HORIZ_DIR,2);

//Outtextxy is used to print the given text at specified x and y pixel position 
//It will print given text at pixel position 170,180
 outtextxy(170,180,"LOADING,PLEASE WAIT");

  for(i=0;i<300;++i)
 {
  delay(30);
  line(x,200,x,220);
  x++;
 }
 getch();

//close the graph that was initialized
 closegraph();  

}

OUTPUT :

Program To Create Loading Bar using Graphics.h Cplusplus

Program To Print Star Triangle Pattern in Cplusplus

#include<iostream.h>

#include<conio.h>

void main()

{

clrscr(); //to clear the screen

int i,j,k,num;

cout<<"Tell How many lines you want";

cin>>num;

num*=2;

for(i=0;i<num;i+=2)

{

cout<<"\n";

for ( j = num; j > i; j -= 2 )

cout<<" ";

for( k=0; k<=i; ++k )

cout<<"*";

}

getch(); //to stop the screen

}

OUTPUT

Program To Print Star Triangle Pattern Cplusplus

Program To Print Alphabets in Cplusplus ( I have printed A to H ) 

#include<iostream>

using namespace std;

int main()
{
int i,j,k=1;
char ch;
cout<<"Input an Alphabet in capital letters that you want to print:";
cin>>ch;
cout<<"\n\n\n\n";
switch(ch)
{
case 'A':
cout<<"\t\t\t    ";
for(i=1;i<=40;++i)
{
for(j=0;j<=22;++j)
{
if(i==1||i==2||i==21||i==20)
cout<<"*";
else
{
if(j==0||j==20)
cout<<"**";
else
cout<<" ";
}
}
cout<<"\n\t\t\t    ";

}
break;



case 'B':
cout<<"\t\t\t\t";

while(k<=2)
{
for(i=1;i<=9;++i)
{
for(j=0;j<=i;++j)
{
if(j==0||j==i)
cout<<"**";
else
cout<<" ";
}

cout<<"\n\t\t\t\t";

}
for(i=1;i<=10;++i)
{
if(i==1||i==10)
cout<<"**";
else
cout<<" ";
}
cout<<"\n\t\t\t\t";

for(i=1;i<=10;++i)
{
if(i==1||i==10)
cout<<"**";
else
cout<<" ";
}
cout<<"\n\t\t\t\t";

for(i=9;i>=1;--i)
{
for(j=0;j<=i;++j)
{
if(j==0||j==i)
cout<<"**";
else
cout<<" ";
}
cout<<"\n\t\t\t\t";
}
++k;
}
 break;

 case'C':
cout<<"\t\t\t    ";

for(i=1;i<=40;++i)
{
for(j=0;j<=22;++j)
{
if(i==1||i==2||i==39||i==40)
cout<<"*";
else
{
if(j==0)
cout<<"**";
else
cout<<" ";
}
}
cout<<"\n\t\t\t    ";

}
break;

 case'D':
 cout<<"\t\t\t\t";
 for(i=1;i<=18;++i)
 {
for(j=0;j<=i;++j)
{
if(j==0||j==i)
cout<<"**";
else
cout<<" ";
}
cout<<"\n\t\t\t\t";
 }
 while(k<=4)
 {
for(i=1;i<=19;++i)
{
if(i==1||i==19)
cout<<"**";
else
cout<<" ";
}
cout<<"\n\t\t\t\t";
 ++k;
 }
 for(i=18;i>=1;--i)
 {
for(j=0;j<=i;++j)
{
if(j==0||j==i)
cout<<"**";
else
cout<<" ";
}
 cout<<"\n\t\t\t\t";
 }
 break;

 case'E':

 cout<<"\t\t\t\t";
 for(i=1;i<=39;++i)
 {
for(j=1;j<=20;++j)
{
if(i==1||i==2||i==20||i==21||i==38||i==39)
cout<<"*";
else
{
if(j==1)
cout<<"**";
else
cout<<" ";
}
}
 cout<<"\n\t\t\t\t";
 }
 break;

 case'F':

 cout<<"\t\t\t\t";

for(i=1;i<=40;++i)
{
for(j=1;j<=20;++j)
{
if(i==1||i==2||i==18||i==19)
cout<<"*";
else
{
if(j==1)
cout<<"**";
else
cout<<" ";
}
}
cout<<"\n\t\t\t\t";
}
break;

 case'G':

cout<<"\t\t\t";
for(i=1;i<=25;++i)
{
for(j=1;j<=20;++j)
{
if(i==1||i==2)
cout<<"*";
else
{
if(j==1)
cout<<"**";
else
cout<<" ";
}
}
cout<<"\n\t\t\t";
}
for(i=1;i<=10;++i)
{
for(j=1;j<=20;++j)
{
if(i==1||i==2)
{ if(j==1||j==14||j==15||j==16)
cout<<"**";
  else
  cout<<" ";
}
else
{
if(i==9||i==10)
cout<<"*";
else
{  if(j==1||j==18)
  cout<<"**";
  else
  cout<<" ";
}
}
}
cout<<"\n\t\t\t";
}
break;


 case'H':

cout<<"\t\t\t";
for(i=1;i<=40;++i)
{
for(j=1;j<=21;++j)
{
if(i==20||i==21)
cout<<"*";
else
{
if(j==1||j==19)
cout<<"**";
else
cout<<" ";
}
}
cout<<"\n\t\t\t";
}
break;

return 0;
}

OUTPUT :

How To Create Printable Bootstrap Page

Every Day Is a New Learning Day . Today, I learnt a new thing with bootstrap When We use the page becomes responsive it will adapt its width and height and change it accordingly to the screen on which we are viewing that webpage that's the magic of Bootstrap .

 BUT there is one thing need to be noticed that is When we print that page . Like i needed to give one functionality in my web application to the client . Client wants a button when client click on that button a print preview of current page is given to client and page will be downloaded as .PDF file 

But Now you may face some problem as below :-

Bootstrap - Print layout and breaks after each grid column

Grid stacks when printing Bootstrap page

you may search How to Create Printable bootstrap page So solution is below


when you see in your print preview or .PDF file you can see bootstrap  layout will be not there . This is because bootstrap make the columns and rows by using some inbuilt classes these classes are by default included in bootstrap.min.css file but you have to set them to be allowed in all media As bydefault it is set to screen only


When you try code below in your html page you can see it is not printing your page with bootstrap enabled 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <div class="container">
  <div class="row">
  <div class="col-md-6">Column1</div>
    <div class="col-md-6">Column2</div>
  </div>
</div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Steps To Create your Bootstrap Webpage Printable

1. Replace every col-md- with col-xs-
 e.g. :- replace every col-md-6 to col-xs-6 This is the thing that worked for me to get me rid of this problem you can see what you have to replace

Replace following code 

   <div class="container">
  <div class="row">
    <div class="col-md-6">Column1</div>
    <div class="col-md-6">Column2</div>
  </div>
</div>


With this code in our given example 

<div class="container">
  <div class="row">
    <div class="col-xs-6">Column1</div>
    <div class="col-xs-6">Column2</div>
  </div>
</div>