locked
Webmatrix 2 - WebGrid Find option RRS feed

  • Question

  • User-1621298464 posted

    I work with Webmatrix  2 and the starter site.  I have been able to create a working CRUD process using the features of the WebGrid helper.

    The table has about 500 entries and I spend a lot of clicks getting to the record that needs the Edit, particulary a merchant that begins with "W" .

    Is there a way to position the entries in the WebGrid to locate an entry with a Find (or similar) technique.

    Thanks

    Dallas in Maryland.

    Monday, September 2, 2013 12:29 PM

Answers

  • User1713851783 posted

    The Mike's example works only if you have the selection form in the same page of the WebGrid. It is based on a jQuery script that resubmit the form anytime you click on a sort or page link.

    Having the selection form on an other page should be simpler, if you pass the selection terms with querystrings. I have tried with the following example, that you can accomplish strarting from the Mike's example (Displaying Search Results In A WebGrid), replacing the original Default.cshtml with:

     

    @{
        Page.Title = "Filter WebGrid - Select";
        var db = Database.Open("Northwind");
        var query = "SELECT DISTINCT Country FROM Customers ORDER BY Country";
        var countries = db.Query(query);
        if (IsPost) {
            var field1 = Request["company"];
            var field2 = Request["country"];
            Response.Redirect("~/List?field1=" + field1 + "&field2=" + field2);
        }
    }
    
    <h1>@Page.Title</h1>
    <form method="post">
        <div>
            Company Name: <input type="text" name="company" value="@Request["company"]" />
            Country: <select name="country">
                     <option></option>
                @foreach(var item in countries){
                    <option @(Request["country"] == item.Country ? " selected=\"selected\"" : "")>@item.Country</option>
                }
            </select>
            <input type="submit" />
        </div>
    </form>

    and adding a new List.cshtml file in the root folder:

    @{
        Page.Title = "Filter WebGrid - List";
        var db = Database.Open("Northwind");
        var query = "SELECT * FROM Customers  WHERE CompanyName LIKE @0 AND Country LIKE @1";
        var company = "%" + Request["field1"] + "%";
        var country = "%" + Request["field2"] + "%";
        var data = db.Query(query, company, country);
        var columns = new[]{"CustomerID", "CompanyName", "ContactName", "Address", "City", "Country", "Phone"};
        var grid = new WebGrid(data, columnNames: columns, rowsPerPage: 6);
    }
    
    <h1>@Page.Title</h1>
    <div id="grid">
        @grid.GetHtml(    
            tableStyle : "table",
            alternatingRowStyle : "alternate",
            headerStyle : "header",
            columns: grid.Columns(
                grid.Column("CustomerID", "ID"),
                grid.Column("CompanyName", "Company"),
                grid.Column("ContactName", "Contact"),
                grid.Column("Address"),
                grid.Column("City"),
                grid.Column("Country"),
                grid.Column("Phone")
            )
        )
        
    </div>

    Note that this example doesn't need the jQuery library.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 5, 2013 5:06 PM
  • User1713851783 posted

    In addition to my previous answer I propose to you an example of a page with the same functionalities of the Mike's page, but based on querystrings and without the use of jQuery:

    @{
        Page.Title = "Filter WebGrid";
        var db = Database.Open("Northwind");
        var query = "SELECT DISTINCT Country FROM Customers ORDER BY Country";
        var countries = db.Query(query);
        query = "SELECT * FROM Customers  WHERE CompanyName LIKE @0 AND Country LIKE @1";
        var company = "%" + Request.QueryString["field1"] + "%";
        var country = "%" + Request.QueryString["field2"] + "%";
        var data = db.Query(query, company, country);
        var columns = new[]{"CustomerID", "CompanyName", "ContactName", "Address", "City", "Country", "Phone"};
        var grid = new WebGrid(data, columnNames: columns, rowsPerPage: 6);
    
        if (IsPost) {
            var address = HttpContext.Current.Request.Url.AbsolutePath + "?field1=" + Request["company"] +
                    "&field2=" + Request["country"];
            Response.Redirect(address);
        }
    }
    
    <!DOCTYPE html>
    
    <h1>@Page.Title</h1>
    <form method="post">
        <div id="grid">
            Company Name: <input type="text" name="company" value="@Request.QueryString["field1"]" />
            Country: <select name="country">
                     <option></option>
                @foreach(var item in countries){
                    <option @(Request.QueryString["field2"] == item.Country ? " selected=\"selected\"" : "")>@item.Country</option>
                }
            </select>
            <input type="submit" />
            @grid.GetHtml(
                tableStyle : "table",
                alternatingRowStyle : "alternate",
                headerStyle : "header",
                columns: grid.Columns(
                    grid.Column("CustomerID", "ID"),
                    grid.Column("CompanyName", "Company"),
                    grid.Column("ContactName", "Contact"),
                    grid.Column("Address"),
                    grid.Column("City"),
                    grid.Column("Country"),
                    grid.Column("Phone")
                )
            )
        
        </div>
    </form>

    You can try it replacing the Default.cshtml page in the Mike's site.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, September 8, 2013 9:24 AM

All replies

  • User379720387 posted

    Sure, look for filtering search results in a webgrid at mikesdotnetting.com

    What is going to help you out here is the LIKE function in SQL.

    Suppose you create a search box for Vendor Name.

    Then in the search box your type Was and then click filter.

    It then filters all vendor name with Was.

    Monday, September 2, 2013 2:06 PM
  • User-1621298464 posted

    The mikesdotnetting example does work to filter for the selected list.  However, when I click the sort or page control the entire list repopulates.  The only way to continue the filter is to reissue the submit.  Is that how it works for you?

    My grid also has the "Edit | Delete" columns.  Click either and again the filter has to be reissued.  Any ideas on how to maintain the filter while working with the grid?

    Dallas

     

    Thursday, September 5, 2013 9:02 AM
  • User1713851783 posted

    The Mike's example works only if you have the selection form in the same page of the WebGrid. It is based on a jQuery script that resubmit the form anytime you click on a sort or page link.

    Having the selection form on an other page should be simpler, if you pass the selection terms with querystrings. I have tried with the following example, that you can accomplish strarting from the Mike's example (Displaying Search Results In A WebGrid), replacing the original Default.cshtml with:

     

    @{
        Page.Title = "Filter WebGrid - Select";
        var db = Database.Open("Northwind");
        var query = "SELECT DISTINCT Country FROM Customers ORDER BY Country";
        var countries = db.Query(query);
        if (IsPost) {
            var field1 = Request["company"];
            var field2 = Request["country"];
            Response.Redirect("~/List?field1=" + field1 + "&field2=" + field2);
        }
    }
    
    <h1>@Page.Title</h1>
    <form method="post">
        <div>
            Company Name: <input type="text" name="company" value="@Request["company"]" />
            Country: <select name="country">
                     <option></option>
                @foreach(var item in countries){
                    <option @(Request["country"] == item.Country ? " selected=\"selected\"" : "")>@item.Country</option>
                }
            </select>
            <input type="submit" />
        </div>
    </form>

    and adding a new List.cshtml file in the root folder:

    @{
        Page.Title = "Filter WebGrid - List";
        var db = Database.Open("Northwind");
        var query = "SELECT * FROM Customers  WHERE CompanyName LIKE @0 AND Country LIKE @1";
        var company = "%" + Request["field1"] + "%";
        var country = "%" + Request["field2"] + "%";
        var data = db.Query(query, company, country);
        var columns = new[]{"CustomerID", "CompanyName", "ContactName", "Address", "City", "Country", "Phone"};
        var grid = new WebGrid(data, columnNames: columns, rowsPerPage: 6);
    }
    
    <h1>@Page.Title</h1>
    <div id="grid">
        @grid.GetHtml(    
            tableStyle : "table",
            alternatingRowStyle : "alternate",
            headerStyle : "header",
            columns: grid.Columns(
                grid.Column("CustomerID", "ID"),
                grid.Column("CompanyName", "Company"),
                grid.Column("ContactName", "Contact"),
                grid.Column("Address"),
                grid.Column("City"),
                grid.Column("Country"),
                grid.Column("Phone")
            )
        )
        
    </div>

    Note that this example doesn't need the jQuery library.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 5, 2013 5:06 PM
  • User1713851783 posted

    In addition to my previous answer I propose to you an example of a page with the same functionalities of the Mike's page, but based on querystrings and without the use of jQuery:

    @{
        Page.Title = "Filter WebGrid";
        var db = Database.Open("Northwind");
        var query = "SELECT DISTINCT Country FROM Customers ORDER BY Country";
        var countries = db.Query(query);
        query = "SELECT * FROM Customers  WHERE CompanyName LIKE @0 AND Country LIKE @1";
        var company = "%" + Request.QueryString["field1"] + "%";
        var country = "%" + Request.QueryString["field2"] + "%";
        var data = db.Query(query, company, country);
        var columns = new[]{"CustomerID", "CompanyName", "ContactName", "Address", "City", "Country", "Phone"};
        var grid = new WebGrid(data, columnNames: columns, rowsPerPage: 6);
    
        if (IsPost) {
            var address = HttpContext.Current.Request.Url.AbsolutePath + "?field1=" + Request["company"] +
                    "&field2=" + Request["country"];
            Response.Redirect(address);
        }
    }
    
    <!DOCTYPE html>
    
    <h1>@Page.Title</h1>
    <form method="post">
        <div id="grid">
            Company Name: <input type="text" name="company" value="@Request.QueryString["field1"]" />
            Country: <select name="country">
                     <option></option>
                @foreach(var item in countries){
                    <option @(Request.QueryString["field2"] == item.Country ? " selected=\"selected\"" : "")>@item.Country</option>
                }
            </select>
            <input type="submit" />
            @grid.GetHtml(
                tableStyle : "table",
                alternatingRowStyle : "alternate",
                headerStyle : "header",
                columns: grid.Columns(
                    grid.Column("CustomerID", "ID"),
                    grid.Column("CompanyName", "Company"),
                    grid.Column("ContactName", "Contact"),
                    grid.Column("Address"),
                    grid.Column("City"),
                    grid.Column("Country"),
                    grid.Column("Phone")
                )
            )
        
        </div>
    </form>

    You can try it replacing the Default.cshtml page in the Mike's site.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, September 8, 2013 9:24 AM