Saturday, April 30, 2016

How to filter records in MVC Webgrid using textbox

In this article I am going to explain how to filter record in MVC Webgrid based on textbox.
 
How to filter records in MVC Webgrid using textbox
Click to enlarge

Implementation:

Model:
Model class (Employee.cs)

   public partial class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public Nullable<int> Phone { get; set; }
        public Nullable<int> Salary { get; set; }
        public string Department { get; set; }
        public string ImagePath { get; set; }
        public string EmailId { get; set; }
    }

Controller:
I have added a controller to project and write code to search the record.

using MVC_Project.Models;
DemoEntities1 db = new DemoEntities1();
        //
        // GET: /Employee/

        public ActionResult Index()
        {
            return View(db.Employees.ToList());
        }
        //Filter :/Employee/
        [HttpPost]
        public ActionResult Index(string SearchName)
        {
            var Employee = from em in db.Employees
                           where em.Name.Contains(SearchName)
                           select em;              
            return View(Employee);
        }

View:
Add the view for index. Below given is code of view (Index.cshtml)

@model IEnumerable<MVC_Project.Models.Employee>

<style type="text/css">
  
    .webgrid {
        font-size: 1.2em;
        width: 80%;

        display: table;    
        border-collapse: collapse;
    }     
    .header {
        background-color: #3F95C5;
        color: #fff;
        padding-bottom: 4px;
        padding-top: 5px;
        text-align: center;
    }
    .header a {
        text-decoration: none;
        color: #fff;
    }
    td {
            text-align: center;
        }
    table img
    {
        width:150px;
    }
    .row-style {
        background-color :#E6E6E6;
    }
    .row-style:hover {
        background-color: #C0C0C0;
    }
   
     .alternating-row {
        background-color: #DEEDF5;
    }
        .alternating-row:hover {
            background-color: #6EA0C3;
        }
</style>
@using(Html.BeginForm())
{
  @Html.Label("Enter Name :-"@Html.TextBox("SearchName", "", new { placeholder = "Name" })  <input type="submit" value="Filter" />
}

@{var grid = new WebGrid(Model, canSort: true, canPage: true);
  }
@grid.GetHtml(
        tableStyle: "webgrid",
        headerStyle: "header",
        footerStyle: "footer",
        rowStyle: "row-style",
        alternatingRowStyle: "alternating-row",
    mode: WebGridPagerModes.All,
    columns: grid.Columns
    (
        grid.Column("Name","Name"),
        grid.Column("Phone","Phone"),
        grid.Column("Salary","Salary"),
         grid.Column("Department","Department"),
         //if else condition to check email id
             grid.Column("Email",format: (item) =>
             {
                 if (item.emailid == null)
                     return Html.Raw("Email not available");
                 else
                     return (item.EmailId);
             }),       
       //if else condition to display image
       grid.Column("Image",format: (item) =>
                 {
                     if (item.ImagePath == null)
                         return Html.Raw (string.Format("<text><img src=\"{0}\" alt=\"Image\"/></text>", Url.Content("~/images/image.jpg")));
                     else
                         return Html.Raw(string.Format("<text><img src=\"{0}\" alt=\"Image\" /></text>", Url.Content(item.ImagePath)));
                 }),      
               
grid.Column("Edit",format:@<text>@Html.ActionLink("Edit", "Update", new { id = item.ID })</text>),
grid.Column("Delete",format:@<text>@Html.ActionLink("Delete", "Delete", new { id = item.ID })</text>)
   )
     )


Friday, April 29, 2016

How to apply (set) custom style on MVC webgrid

Tuesday, April 26, 2016

Condition statement example on MVC Webgrid column

In this article I am going to explain how to apply the conditional statement on webgrid column in mvc.

Condition statement example on MVC Webgrid column

Description:
Here I am going to explain the conditional attribute for webgrid. I have created a table Employees. At the time of registration some of employees not upload their picture and enter their email id. I want to show image not available image where employee’s pic is missing and same for email id.

Implementation:

Monday, April 25, 2016

ASP.NET MVC : CRUD operation using store procedure

In this article I am going to explain how Create, read, update and Delete (CRUD) opratuion using Store procedure in asp.net mvc.


Implementation:

Saturday, April 23, 2016

ASP.NET MVC : Email address validation using data Annotations

In this article I am going to explain how to validate the email address of users in MVC application using Data Annotation
ASP.NET MVC : Email address validation using data Annotations

Description:
We can validate the email address using data annotation regular expression.  Add the below given code before email address property in model class.

[Required(ErrorMessage="Enter Correct Email")]
[DataType(DataType.EmailAddress)]
[RegularExpression(@"[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}", ErrorMessage = "Invalid email")]

Implement:

Friday, April 22, 2016

ASP.NET MVC: Dynamically display images in webgrid

Saturday, April 16, 2016

RDLC report: Export data to PDF, Excel and Word

Export RDLC report to PDF programmatically in asp.net

Friday, April 15, 2016

Export RDLC report to Excel programmatically in asp.net

Thursday, April 14, 2016

RDLC Error: Report Viewer Configuration Error

In this article I am going to explain how we can resolve the Report Viewer Configuration Error when using RDLC report in asp.net.

When we are working in RDLC report, get the error at run time like given below:

Report Viewer Configuration Error

The Report Viewer Web Control HTTP Handler has not been registered in the application's web.config file. Add <add verb="*" path="Reserved.ReportViewerWebControl.axd" type = "Microsoft.Reporting.WebForms.HttpHandler, Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" /> to the system.web/httpHandlers section of the web.config file, or add <add name="ReportViewerWebControlHandler" preCondition="integratedMode" verb="*" path="Reserved.ReportViewerWebControl.axd" type="Microsoft.Reporting.WebForms.HttpHandler, Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" /> to the system.webServer/handlers section for Internet Information Services 7 or later.

Solution:
The error of reason is web.config file is not set up correctly. To solve this issue add the following in web.config file.

Tuesday, April 12, 2016

Add row in asp.net Gridview on button click using C# and vb.net

In this article I am going to explain how to add a row in gridview to insert the record into database on add new button click in asp.net.
Add row in asp.net Gridview on button click using C# and vb.net
Add row in asp.net Gridview on button click using C# and vb.net


Description:

Saturday, April 9, 2016

Asp.net: How to avoid duplicate record insert on page refresh

In this tutorial I am going to explain how to avoid (prevent) duplicate record insert on page refresh in asp.net using C#, VB.net


Description:
After insert the record when we refresh the page, it will reinsert (duplicate) the record with same values. In this article I am going to explain the solution to insert duplicate entries.

Implementation:

Friday, April 8, 2016

ASP.NET Gridview : How to auto generate and display Serial number

In this article I am going to explain how to auto generate and display Serial number (row number) in asp.net gridview data control using C# and vb.net.


Description:
The serial number can be generated using DataItemIndex in gridview. Add Templatefield and put the below given in ItemTemplate :
<%# Container.DataItemIndex + 1 %>

Implementation:

Monday, April 4, 2016

ASP.NET Gridview : Check and uncheck checkboxes using Jquery

In this article I am going to explain how to check uncheck OR select/deselect checkboxes in asp.net gridview control using Jquery.


Description:
Check and uncheck the entire checkboxes showing inside Gridview. A checkbox is placed inside headertemplate in Gridview to select and deselect checkboxes.

Implementation:
Add the below given Jquery code before closing the head section of webform.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var CheckAll = $("#chkAll").click(function () {
            if (this.checked) {
                $('.chk').attr('checked', this.checked);
            }
            else {
                $('.chk').attr('checked', this.checked = false);
            }
        });
        $(".chk").click(function () {
            if ($(".chk").length == $(".chk:checked").length) {
                $("#chkAll").attr("checked", "checked");
            } else {
                $("#chkAll").removeAttr("checked");
            }
        });