Implement Search functionality in WebGrid with Paging in ASP.Net MVC


The Search functionality in WebGrid with Paging will be implemented using Stored Procedure and Entity Framework in ASP.Net MVC Razor


The Search functionality in WebGrid with Paging will be implemented using Stored Procedure and Entity Framework in ASP.Net MVC Razor.
 CREATE PROCEDURE Customers_SearchCustomers
      @ContactName NVARCHAR(30)
AS
BEGIN
      SET NOCOUNT ON;
      SELECT TOP 10 *
      FROM Customers
      WHERE ContactName LIKE '%' + @ContactName + '%'
END


Controller
The Entity Framework is now configured and hence now we can create a Controller and write code to fetch the records from the Customers Table of the Northwind Database.
The Controller consists of two Action methods.
Action method for handling GET operation
Inside the Index Action method, the Stored Procedure is called using the SearchCustomers function created using the Function Import procedure done earlier.
The parameter ContactName is passed as empty string and hence it gets all records from the Customers table of the Northwind database.
Finally the list of Customers Entity is returned to the View.
 
Action method for handling POST operation
When the Form is submitted, the value of the Customer Name TextBox is submitted this Action method and the value is passed as parameter to the SearchCustomers function and the list of Customers Entity is returned to the View.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        NorthwindEntities entities = new NorthwindEntities();
        return View(entities.SearchCustomers("").ToList());
    }
 
    [HttpPost]
    public ActionResult Index(string customerName)
    {
        NorthwindEntities entities = new NorthwindEntities();
        return View(entities.SearchCustomers(customerName).ToList());
    }
}
 
 
View
Inside the View, in the very first line the Customer Entity is declared as IEnumerable which specifies that it will be available as a Collection.
HTML Form
The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
Inside the View, a TextBox is created using the Html.TextBox HTML Helper function and there is a Submit button which when clicked, the Form gets submitted.
 
WebGrid
The WebGrid is initialized with the Model i.e. IEnumerable collection of Customer Entity class objects as source.
The WebGrid is created using the GetHtml method with the following parameters.
HtmlAttributes – It is used to set the HTML attributes to the HTML Table generated by WebGrid such as ID, Name, Class, etc.
Columns – It is used to specify the columns to be displayed in WebGrid and also allows to set specific Header Text for the columns.
 
Performing HTTP POST on WebGrid Paging
By default, when a Page Number Link is clicked in the WebGrid, a HTTP GET called is performed and hence with the help of jQuery the Page Number Links are forced to perform HTTP POST.
 
Displaying Empty Message
When the searching yields zero records, then an Empty Message such as No records found needs to be displayed.
In order to display the Empty Message, a jQuery script is wrapped inside an IF condition which evaluates to TRUE only when the Model.Count is 0 i.e. no records returned from the Stored Procedure.
The jQuery script simply adds a new row with one cell to the HTML Table rendered by the WebGrid and then Empty Message is set in the Table cell.
@model List<WebGrid_Stored_Proc_MVC.Customer>
 
@{
    Layout = null;
    WebGrid webGrid = new WebGrid(source: Model, canSort: false, rowsPerPage: 5);
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
 
        .Grid
        {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
 
        .Grid th
        {
            background-color: #F7F7F7;
            font-weight: bold;
        }
 
        .Grid th, .Grid td
        {
            padding: 5px;
            border: 1px solid #ccc;
        }
 
        .Grid, .Grid table td
        {
            border: 0px solid #ccc;
        }
 
        .Grida, .Grid a:visited
        {
            color: blue;
        }
    </style>
</head>
<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @id = "WebGridForm" }))
    {
        <span>Customer Name:</span> @Html.TextBox("CustomerName")
        <input type="submit" value="Search"/>
    }
    <br/>
    @webGrid.GetHtml(
        htmlAttributes: new { @id = "WebGrid", @class = "Grid" },
        columns: webGrid.Columns(
                 webGrid.Column("CustomerID", "Customer Id"),
                 webGrid.Column("ContactName", "Customer Name"),
                 webGrid.Column("City", "City"),
                 webGrid.Column("Country", "Country")
        ))
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $("body").on("click", ".Grid tfoot a", function () {
            $('#WebGridForm').attr('action', $(this).attr('href')).submit();
            return false;
        });
    </script>
    @if (Model.Count == 0)
    {
        <script type="text/javascript">
            $(function () {
                var row = $("#WebGrid")[0].insertRow(-1);
                var cell = $(row.insertCell(-1));
                cell.html("No records found.");
                cell.attr("colspan", "4").attr("align", "center");
            });
        </script>
    }
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Automatically send Birthday email using C#.Net

In order to automatically send Birthday email daily at particular time, a Windows Service will be created which will run daily at the particular time and will automatically send Birthday emails using C#.Net. In this article the Windows Service will execute a Task daily at a specific time. The Task is to fetch all records of Students who have a Birthday today. Such students will receive an email containing Birthday wishes automatically by the Windows Service. Config:- < appSettings >     < add  key  = " Mode "  value  = " Daily "  />     < add  key  = " IntervalMinutes "  value  = " 1 "  />     < add  key  = " ScheduledTime "  value  = " 17:43 "  /> </ appSettings > < connectionStrings >     < add  name = " constr "  connectionString = " Data Source=.\SQL2008R2;Initial Catalog=S...
Read more

Drag and Drop multiple File upload using jQuery AJAX in ASP.Net using C# and VB.Net

Multiple files such as Image, PDF, Word, Excel, etc. and also large Music and Video files such as MP3 and MP4 will be easily uploaded by simple Drag and Drop of files in HTML5 supported browsers using jQuery and AJAX in ASP.Net. This article makes use of the jQuery FileDrop plugin which makes use of Generic HTTP Handlers for uploading files with Drag and Drop using jQuery and AJAX in ASP.Net. In this article I will explain with an example, how to upload multiple files with Drag and Drop in HTML5 supported browsers using jQuery and AJAX in ASP.Net using C# and VB.Net. Multiple files such as Image, PDF, Word, Excel, etc. and also large Music and Video files such as MP3 and MP4 will be easily uploaded by simple Drag and Drop of files in HTML5 supported browsers using jQuery and AJAX in ASP.Net. This article makes use of the  jQuery FileDrop  plugin which makes use of Generic HTTP Handlers for uploading files with Drag and Drop using jQuery and AJAX in ASP.Net.  ...
Read more

Difference between each and map in jquery

Image
$.map $.each map method can be used as an iterator. each method is an immutable iterator Returns a new array Returns the original array The order of callback arguments - element, index. $.map(elems,  function  () { element, index }, arg) The order of callback arguments - index, element. $.each(elems,  function  () { index, element }, arg) Does not have a way to terminate the iteration Return false to terminate the iteration Example :  Notice that the callback arguments in the each method are the reverse of the callback arguments in the map function. Also notice that map returns a new array where as each method returns the original array. This proves the point that each method is an immutable iterator where as map is not. $(document).ready( function  () {      var  intArray = [1, 2, 3, 4, 5];      function  functionA(index, element) {          return ...
Read more