Tuesday, January 14, 2020

QR Code Generator in Asp.net C# using ZXing.Net Library

c# qr code reader

Generating the bar code is very easy, we have so many libraries are there. out of that i am going to choose  zxing qr, this assembly is very good for generating the QR code and reading the QR code. by using asp.net, we can generate and read the QR Code is very easy in c#.

Create asp.net web application then add zxing qr library library to our application. below image shows how to install Zxing.net package.
click on
             Tools --> Nugut Package manager
                       --> manage nugut packages for solutions
                       --> go to browse search for Zxing.net.
                       --> install it.
And check by clicking References, we can find the zing assembly. once it is available then start our sample project


zxing qr code generator c#


for understanding purpose, i just created the one Text Box and one button.
Text Box is used for input values
Button is used for generated QR Code as show below image.

zxing qr code generator asp.net

Now we need to write the code "zxing qr code generator c#"

 using System;
using ZXing;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;


namespace BarCode
{
    public partial class alltechgeeksBARCODE : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnGetBarCode_Click(object sender, EventArgs e)
        {
            string name = txtToGenerateCode.Text;
            var writer = new BarcodeWriter();
            writer.Format = BarcodeFormat.QR_CODE;
            var result = writer.Write(name);
            string path = Server.MapPath("~/Barcodeimages/QRImage.jpg");
            var barcodeBitmap = new Bitmap(result);
            using (MemoryStream memory = new MemoryStream())
            {
                using (FileStream fs = new FileStream(path, FileMode.Create, FileAccess.ReadWrite))
                {
                    barcodeBitmap.Save(memory, ImageFormat.Jpeg);
                    byte[] bytes = memory.ToArray();
                    fs.Write(bytes, 0, bytes.Length);
                }
            }
            imgQROrBarCode.Visible = true;
            imgQROrBarCode.ImageUrl = "~/Barcodeimages/QRImage.jpg";
        }
    }
}

The out put shows as below image

zxing qr code generator in c sharp




Read More »

Thursday, January 2, 2020

What is Layout View and Viewstart in Asp.Net MVC


Layout View in asp.net MVC tutorials

Layout View in asp.net MVC is the same as a master page in asp.net webforms. which means, it is the common UI throughout the application. and no need to write the code for every page. just we can use this layout view where ever we want to use as a common UI on that page.

by default, asp.net MVC creates _Layour.cshtml file inside the shared folder in Views.
it has  main rendering methods in view is RenderBody() and RenderSection().


 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - All Tech Geeks</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - All Tech Geeks</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>


In the above .cshtml file, we can find the system-defined methods and HTML helper methods.
The system-defined methods are
      1.   @RenderBody() 
      2.  @RenderSection("scripts", required: false)
      3. @Scripts.Render("~/bundles/jquery")  
The HTML Helper methods are:
      1.   @Html.Partial("_LoginPartial")   
      2.   @Html.ActionLink("Home""Index""Home")
RenderBody() :
  1.  it renders the associated view at response in browser. 
  2. it must present in Layout page.
  3. multiple RenderBody() methods not allowed in single layout page

RenderSection()

  1. it is not manditory in layout page.
  2. RenderSection method renders the part of the child view 
  3. RenderSection method runs code blocks you define in your content pages.
  4. multiple RenderSection() methods allowed in a single layout page.
  5. RenderSection method expects one parameter and it is the name of the section. If we don’t give that, an exception will be thrown. 

The important area is _Viewstart.cshtml. after designing the out layout page immediately we need to add the code inside Viewstart.cshtml. as shown below snippet.


     @{
    Layout = "~/Views/Shared/_Layout.cshtml"
    }













Read More »

How To Render Partial View In Asp.Net MVC With Example

Asp.net MVC partial views are like reusable child views inside layout view or other views. the main purpose of partial views are to reduce the duplication of code. it is nothing but a small HTML component and component views like menu item is a component, left menu, right menu and footer are some other components of the web page. the components are used in different pages.

Sometimes the same view needs to be reused in different layout views, at that time we can place that view inside the Shared folder.

 _LayoutView.cshtml is the file where we should be specified the partial views. And we can render the different partial views in parent view using HTML helpers Methods. below are different ways of rendering partial views.
        1. Partial
        2. RenderPartial 
        3. RenderAction
        4. Action  
        5. JQueryLoadFunction 

1 .Partial() Html helper method :

Below snippet taken from_Layout.cshtml Page. here you can find the @Html.Partial("_LoginPartial").

_Layout.cshtml  :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET All Tech Geeks Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET All Tech Geeks Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>


in the above snippet, the navbar menu code is hardcoded for that we can make a separate partial view. copy the navbar menu code and create a new partial view as shown below.

Right-click on Shared Folder --> Add --> View --> click on view.
in the dialogue box, give the View name as _HeaderNavBarMenu. and check the Create as a partial view.


_HeaderNavBarMenu.cshtml :
   
  <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name""Index""Home"new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home""Index""Home")</li>
                    <li>@Html.ActionLink("About""About""Home")</li>
                    <li>@Html.ActionLink("Contact""Contact""Home")</li>
                </ul>
              </div>
        </div>
    </div>

Now we have created the partial view as _HeaderNavBarMenu.CSHTML . now let's see how to render the _HeaderNavBarMenu.cshtml partial view inside _Layout.cshtml.

1.Partial() HTML Helper method :

          Partial HTML helper method does not need to be enclosed braces. and it returns a HTML string.  no need to end with a semicolon.

_Layout.cshtml  :

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET All Tech Geeks Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
     Html.Partial("_HeaderNavBarMenu")
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET All Tech Geeks Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>


2. RenderPartial() HTML Helper method :

   The Renderpartial HTML helper method needs to be enclosed with braces. and it returns void.  and it must be required to end with a semicolon.


_Layout.cshtml  :
           
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET All Tech Geeks Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    @{
     Html.RenderPartial("_HeaderNavBarMenu");
    }
    
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET All Tech Geeks Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>                 

The below image shows the output of the partial view.

asp.net mvc partial view







Read More »