How to combine two text inputs to search a list : The Official Microsoft ASP.NET Forums

Reply

How to combine two text inputs to search a list

Feb 27, 2013 02:23 PM|LINK

Hi, I am using the movies example by Mike Pope in my starter site.

However, unlike the movies example I need to be able to combine 2 text inputs to find a customer.

My page contains 3 search texts, I can succesfully search using each one individually.

However I also wish to be able to combine the last two text inputs to search my customers.

The text inputs are:

SearchCustomerCode

SearchCompany

SearchCity

my code is:

@{
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Customers";
 
    var db = Database.Open("A-LensCatFE-01SQL") ; 
    var selectCommand = ("Select * FROM dbo.qryFilteredCustomers"); 
   var searchTerm = "";
 
    if(!Request.QueryString["SearchCustomerCode"].IsEmpty() ) { 
        selectCommand = "SELECT * FROM dbo.qryFilteredCustomers WHERE CustomerCode = @0";
        searchTerm = Request.QueryString["SearchCustomerCode"];
    }
 
    if(!Request.QueryString["SearchCompany"].IsEmpty() ) { 
        selectCommand = "SELECT * FROM dbo.qryFilteredCustomers WHERE Company LIKE @0";
        searchTerm = "%" + Request["SearchCompany"] + "%"; 
    }
 
    if(!Request.QueryString["SearchCity"].IsEmpty() ) { 
        selectCommand = "SELECT * FROM dbo.qryFilteredCustomers WHERE City LIKE @0";
        searchTerm = "%" + Request["SearchCity"] + "%"; 
    }
 
       var selectedData = db.Query(selectCommand, searchTerm);
    var grid = new WebGrid(source: selectedData, defaultSort: "CustomerCode", rowsPerPage:25);
}
 
  <form method="get">
    <div>
      <label for="SearchCustomerCode">A/C num:</label>
      <input type="text" name="SearchCustomerCode" value="@Request.QueryString["SearchCustomerCode"]" />
    </div>
         
    <div>
      <label for="SearchCompany">Company:</label>
      <input type="text" name="searchCompany" value="@Request.QueryString["SearchCompany"]" />
    </div>
 
    <div>
      <label for="SearchCity">City:</label>
      <input type="text" name="searchCity" value="@Request.QueryString["SearchCity"]" />
    </div>
    <p> 
        <input type="submit" name="submit" /> 
    </p>     
  </form>
  <div>
    @grid.GetHtml(
    tableStyle: "grid", 
    headerStyle: "head", 
    alternatingRowStyle: "alt")
</div>

Thank you.

Reply

Re: How to combine two text inputs to search a list

Feb 27, 2013 03:47 PM|LINK

I would be grateful if someone could point me in the right direction. It is not that I am not searching on the web, which I am, however I have not seen anything I can relate to in my project. Hence why I am asking learned friends here to assist (again) if possible. thank you.

Reply

GmGregori

Contributor

5564 Points

749 Posts

Re: How to combine two text inputs to search a list

Feb 27, 2013 04:31 PM|LINK

Maybe the best starting point for your efforts is this Mike Brind's article: Displaying Search Results In A WebGrid.

Try to adapt it to your situation and post your questions, if any.

Reply

Liquidmetal

Member

26 Points

205 Posts

Re: How to combine two text inputs to search a list

Feb 28, 2013 08:35 AM|LINK

Hi, thanks for the reply, I will look at the link you have provided and will try to adapt to my needs.

Reply

Liquidmetal

Member

26 Points

205 Posts

Re: How to combine two text inputs to search a list

Feb 28, 2013 11:23 AM|LINK

GmGregori
Try to adapt it to your situation and post your questions, if any.

The following code is an adaptation of my code and Mike's tutorial. I am getting this error:

System.Web.HttpException: The following sections have been defined but have not been rendered for the layout page "~/_SiteLayout.cshtml": "script".

My code is

@{
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Customers";
 
   var db = Database.Open("A-LensCatFE-01SQL") ; 
   var query = ("Select Distinct City from dbo.qryFilteredCustomers order by City");
   var cities = db.Query(query);
   query = "Select * from dbo.qryFilteredCustomers Where Company Like @0 AND City like @1";
   var company = "%" + Request["company"] + "%";
   var city = "%" + Request["city"] + "%";
   var data = db.Query(query, company, city);
   var selectCommand = ("Select * FROM dbo.qryFilteredCustomers"); 
   var searchTerm = "";
   
 
    if(!Request.QueryString["SearchCustomerCode"].IsEmpty() ) { 
        selectCommand = "SELECT * FROM dbo.qryFilteredCustomers WHERE CustomerCode = @0";
        searchTerm = Request.QueryString["SearchCustomerCode"];
    }
 
    
    var selectedData = db.Query(selectCommand, searchTerm);
    var grid = new WebGrid(source: selectedData, defaultSort: "CustomerCode", rowsPerPage:100);
}
 
  <form method="post">
    <div style="float: left;">
      <label for="SearchCustomerCode">A/C Num:</label>
      <input type="text" name="SearchCustomerCode" value="@Request.QueryString["SearchCustomerCode"]" />
    </div>
    
    <div style="float: left;">
     <p>
        <input type="submit" name="submit" /> 
    </p> 
      </div>
 
<form method="post">
<div id="grid">
        Company: <input type="text" name="company" value="@Request["company"]" />
        City: <select name="city">
                 <option></option>   
            @foreach(var item in cities){
                <option @(Request["city"] == item.city ? " selected=\"selected\"" : "")>@item.city</option>
            }
        </select>
        <input type="submit" />
</div>
    </form>
<div>
    @grid.GetHtml(
    tableStyle: "grid", 
    headerStyle: "head", 
    alternatingRowStyle: "alt")
</div>
 
@section script{
<script src="~/Scripts/jquery-1.8.1.min.js" type="text/javascript"></script> 
<script type="text/javascript">
   $(function(){
        $('th a, tfoot a').live('click', function() {
            $('form').attr('action', $(this).attr('href')).submit();
            return false;
        });
    });
</script>
}

 
 
Please help.

Edited by Liquidmetal on Feb 28, 2013 11:28 AM
Edited by Liquidmetal on Feb 28, 2013 11:32 AM

Reply

Liquidmetal

Member

26 Points

205 Posts

Re: How to combine two text inputs to search a list

Feb 28, 2013 11:59 AM|LINK

Ok I managed to get rid of the script error by insering the:

@RenderSection("script", required: false)

into ~/_SiteLayout.cshtml

However, I cannot figure where

@RenderBody()

is supposed to go, please let me know.

and the page is being rendered without errors

my modified code is:

@{
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Customers";
 
   var db = Database.Open("A-LensCatFE-01SQL") ; 
   var query = ("Select Distinct City from dbo.qryFilteredCustomers order by City");
   var cities = db.Query(query);
   query = "Select * from dbo.qryFilteredCustomers Where Company Like @0 AND City like @1";
   var company = "%" + Request["company"] + "%";
   var city = "%" + Request["city"] + "%";
   var data = db.Query(query, company, city);
   var selectCommand = ("Select * FROM dbo.qryFilteredCustomers"); 
   var searchTerm = "";
   
 
    if(!Request.QueryString["SearchCustomerCode"].IsEmpty() ) { 
        selectCommand = "SELECT * FROM dbo.qryFilteredCustomers WHERE CustomerCode = @0";
        searchTerm = Request.QueryString["SearchCustomerCode"];
    }
 
    
    var selectedData = db.Query(selectCommand, searchTerm);
    var grid = new WebGrid(source: selectedData, defaultSort: "CustomerCode", rowsPerPage:100);
}
 
<form method="post">
    <div style="float: left;">
      <label for="SearchCustomerCode">A/C Num:</label>
      <input type="text" name="SearchCustomerCode" value="@Request.QueryString["SearchCustomerCode"]" />
    <input type="submit" name="submit" /> 
    </div>
 
<div id="grid">
        Company: <input type="text" name="company" value="@Request["company"]" />
        City: <select name="city">
                 <option></option>   
            @foreach(var item in cities){
                <option @(Request["city"] == item.city ? " selected=\"selected\"" : "")>@item.city</option>
            }
        </select>
        <input type="submit" />
</div>
</form>
<div>
    @grid.GetHtml(
    tableStyle: "grid", 
    headerStyle: "head", 
    alternatingRowStyle: "alt")
</div>
 
@section script{
<script src="~/Scripts/jquery-1.8.1.min.js" type="text/javascript"></script> 
<script type="text/javascript">
   $(function(){
        $('th a, tfoot a').live('click', function() {
            $('form').attr('action', $(this).attr('href')).submit();
            return false;
        });
    });
</script>
}

However, the searches do not work! I would be grateful for some help/input/suggestions to sort this issue.

Reply

GmGregori

Contributor

5564 Points

749 Posts

Re: How to combine two text inputs to search a list

Feb 28, 2013 12:07 PM|LINK

Liquidmetal
System.Web.HttpException: The following sections have been defined but have not been rendered for the layout page "~/_SiteLayout.cshtml": "script".

This is exactly the same error that you have met in your previous thread and that takes place because in your layour page there is a RenderSection method that expects a "Scripts" section and not a "script" section.

You should simply rename your section from @section script { to @section Scripts {.

Speaking of your previous thread, you should mark as answers the posts that solve your problem.

Anyway the script section name isn't the only problem in your code.

It looks like you haven't understood what the Mike's example do.

For example, this peace of code:

var selectCommand = ("Select * FROM dbo.qryFilteredCustomers");
   var searchTerm = "";
   
 
    if(!Request.QueryString["SearchCustomerCode"].IsEmpty() ) {
        selectCommand = "SELECT * FROM dbo.qryFilteredCustomers WHERE CustomerCode = @0";
        searchTerm = Request.QueryString["SearchCustomerCode"];
    }
 
    
    var selectedData = db.Query(selectCommand, searchTerm);
    var grid = new WebGrid(source: selectedData, defaultSort: "CustomerCode", rowsPerPage:100);

has nothing to do with the remaining part.

I suggest to you to start from an empty page adding Mike's code row by row and testing any new input seeking to understand what is its meaning.

When you are sure with the Mike's code, you can adapt it to your needs.

Edited by GmGregori on Feb 28, 2013 12:08 PM
Edited by Liquidmetal on Feb 28, 2013 12:22 PM
Edited by Liquidmetal on Feb 28, 2013 01:03 PM

Reply

Liquidmetal

Member

26 Points

205 Posts

Re: How to combine two text inputs to search a list

Feb 28, 2013 12:29 PM|LINK

Hi yes you are right, one for the memory banks, regarding these small things.

You are also correct in stating my code is fragmented. I have followed mike's example but it is for 2 search inputs, I have 3 inputs.

My first search criteria is for an exact match and can only be found is the user has the customer code.

The other 2 searches are much more fuzzy, needing part of the name to find a block of customers, and these are for Company and City. The user should be able to find with either or parameters indvidually or combined.

Mikes example matches mine very closely but I was trying to add the 1st search item too. That is why there is a remnant of my old code in my current code. I will off course follow your advice and start from the beginning line by line and see how I can add this for all 3 searches. Thanks alot again.

Reply

Liquidmetal

Member

26 Points

205 Posts

Re: How to combine two text inputs to search a list

Feb 28, 2013 01:07 PM|LINK

I have gone back to a blank page and this is my new code:

@{
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Customers";
 
   var db = Database.Open("A-LensCatFE-01SQL") ; 
   var query = ("Select Distinct City from dbo.qryFilteredCustomers order by City");
   var cities = db.Query(query);
   query = "Select * from dbo.qryFilteredCustomers Where CustomerCode like @0 AND Company like @1 AND City like @2";
   var customercode = "%" + Request["customercode"] + "%";
   var company = "%" + Request["company"] + "%";
   var city = "%" + Request["city"] + "%";
   var data = db.Query(query, customercode, company, city);
   var columns = new[]{"CustomerCode", "Company", "City"};
   var grid = new WebGrid(data, columnNames: columns, defaultSort: "customercode", rowsPerPage:50);
   
}
 
<form method="post">
<div id="grid">   
     
     <input type="text" name="customercode" value="@Request["customercode"]" />
     
      <input type="text" name="company" value="@Request["company"]" />
    
      <select name="city">
                 <option></option>   
            @foreach(var item in cities){
                <option @(Request["city"] == item.city ? " selected=\"selected\"" : "")>@item.city</option>
            }
        </select>
        <input type="submit" />
 
    @grid.GetHtml(
    tableStyle: "table", 
    headerStyle: "header", 
    alternatingRowStyle: "alternate",
    columns: grid.Columns(
                grid.Column("CustomerCode", "ID"),
                grid.Column("Company"),
                grid.Column("City")
               )
        )
 
 
</div>
    </form>
 
@section Scripts{
<script src="~/Scripts/jquery-1.8.1.min.js" type="text/javascript"></script> 
<script type="text/javascript">
   $(function(){
        $('th a, tfoot a').live('click', function() {
            $('form').attr('action', $(this).attr('href')).submit();
            return false;
        });
    });
</script>
}

I get the 2 text inputs (CustomerCode, Company) and a dropdown box (City). 
The dropdown is populated with cities. Click the submit button does nothing.

However, the grid is not populating. There is no data in the grid and the only thing that I have not accounted 
for (in my view) is the @RenderBody() shown in Mike's example. 

So I need suggestions on how I can get this working. Thank you.

Edit: I have changed where CustomerCode = @0 to CustomerCode LIKE @0 and this seems to have done the trick.
Early days yet but I am hopeful that this code is working as intended.

Edited by Liquidmetal on Feb 28, 2013 01:17 PM
Marked as answer by Liquidmetal on Feb 28, 2013 01:41 PM

How to combine two text inputs to search a list RSS

8 replies

Liquidmetal

How to combine two text inputs to search a list

Liquidmetal

Re: How to combine two text inputs to search a list

GmGregori

Re: How to combine two text inputs to search a list

Liquidmetal

Re: How to combine two text inputs to search a list

Liquidmetal

Re: How to combine two text inputs to search a list

GmGregori

Liquidmetal

Re: How to combine two text inputs to search a list

GmGregori

Re: How to combine two text inputs to search a list

Liquidmetal

Liquidmetal

Re: How to combine two text inputs to search a list

Liquidmetal

Re: How to combine two text inputs to search a list

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft