title: New to HTML,WebMatrix,Razor,etc Dealing with WebGrid
body: <p>I'm am very sorry if this has been asked before but I cannot find it anywhere.</p>
  
  <p>I am fairly new to web development in all aspects, but decided to create a nice little application to access and search a database from anywhere in the office. </p>
  
  <p>I followed several tutorials using WebMatrix on how to set up a simple webpage etc and I have it mostly working, except for dealing with going to the next page in WebGrid. Here is what im talking about (kind of obscure but it cannot be helped)</p>
  
  <p>I found two examples online about trying to use javascript and they gave me these bits of code to use..</p>
  
  <p>In a file called _layout.cshtml
      </p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Start&lt;/title&gt;
  
      &lt;script src="@Href("~/scripts/jquery-1.6.2.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;link href="@Href("~/styles/site.css")" rel="stylesheet" /&gt;
      @RenderSection("script", required: false);
  &lt;/head&gt;
  &lt;body&gt;
      @RenderBody();
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Then a file called _PageStart.cshtml</p>
  
  <pre><code>@{
      Layout = "~/_layout.cshtml";
   }
  </code></pre>
  
  <p>Then I started creating my own site and modeling it after a few tutorials I had seen, specifically involved around the WebGrid.</p>
  
  <p>This is my Default.cshtml</p>
  
  <pre><code>@{
      string searchStr = Request["searchBox"];
      string choice = Request["choice"];
  
      Database db = Database.Open("NameOfDatabase");
      if(choice == null)
      {
          choice = "DefaultColumnName"; // they choose which column they want to search 
          //via radio buttons
      }
  
      var queryStr = "SELECT * FROM databaseTable WHERE "+choice
                      +" LIKE '"+searchStr+"%'";
      var data = db.Query(queryStr);
      WebGrid grid = new WebGrid(source: data, 
                                 defaultSort: "Name", 
                                 rowsPerPage: 20, canPage:true, canSort:true);
      if(IsPost)
      {//not really doing anything here
      }
  }
  
      &lt;head&gt;
      &lt;title&gt;Database&lt;/title&gt;
      &lt;style type="text/css"&gt; " //added that because it was goofing up the color scheme..
          .grid { margin: 4px; border-collapse: collapse; width: 600px; }
          .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
          .grid th, .grid td { border: 1px solid #C0C0C0; padding: 1px; }
          .alt { background-color: #E8E8E8; color: #000; }
          .style1{ min-width: 300px; max-width:400px; font-weight:bold; white-space:nowrap; overflow:hidden;}
          .style2{ min-width: 100px; max-width:150px; overflow:hidden;}
          .style3{ min-width: 200px; max-width:250px; overflow:hidden; white-space:nowrap;}
          .style4{ min-width:100px; max-width:200px; overflow:hidden; }
          .style5{ min-width: 150px; max-width:250px; overflow:hidden; white-space:nowrap;}
          .style6{ min-width: 200px; max-width:250px; overflow:hidden;}
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body onload="document.form1.searchBox.focus();"&gt; 
      &lt;h1&gt;Database&lt;/h1&gt;
      &lt;form name="form2" method="post" action=""&gt;
          &lt;p&gt;&lt;input type="submit" name="populate" value="Populate DB" /&gt;&lt;/p&gt;
      &lt;/form&gt;
      &lt;div id="grid"&gt;
          @grid.GetHtml(
              tableStyle: "grid",
              headerStyle: "head",
              alternatingRowStyle: "alt",
              columns: grid.Columns(
              grid.Column("Name","Name", 
                          format: @&lt;p title="@item.Name.Trim()"&gt;@item.Name&lt;/p&gt;,
                          style:"style1"),
             //repeat to create 5 more columns exactly the same essentially
          ), mode: WebGridPagerModes.All
          )
      &lt;/div&gt;
  
      &lt;form name="form1" method="post" action="Default"&gt;
        &lt;p&gt;&lt;label for="searchBox"&gt;Search:&lt;/label&gt;
        &lt;input type="text" name="searchBox" value="@searchStr"  /&gt;&lt;/p&gt;
  
        &lt;p&gt;&lt;input type="radio" name="choice" value="Name" /&gt;
        &lt;label for="Name"&gt;Name&lt;/label&gt;&lt;/p&gt;
  
        &lt;p&gt;&lt;input type="radio" name="choice" value="choice1" /&gt;
        &lt;label for="choice1"&gt;choice1&lt;/label&gt;&lt;/p&gt;
  
        &lt;p&gt;&lt;input type="radio" name="choice" value="choice2" /&gt;
        &lt;label for="choice2"&gt;choice2&lt;/label&gt;&lt;/p&gt;
  
        &lt;p&gt;&lt;input type="radio" name="choice" value="choice3" /&gt;
        &lt;label for="choice3"&gt;choice3&lt;/label&gt;&lt;/p&gt;
  
        &lt;p&gt;&lt;input type="radio" name="choice" value="choice4" /&gt;
        &lt;label for="choice4"&gt;choice4&lt;/label&gt;&lt;/p&gt;
  
        &lt;p&gt;&lt;input type="radio" name="choice" value="choice5" /&gt;
        &lt;label for="choice5"&gt;choice5&lt;/label&gt;&lt;/p&gt;
  
        &lt;p&gt;&lt;input type="submit" name="Submit" value="Submit" /&gt;&lt;/p&gt;
  
      &lt;/form&gt;
  
  &lt;/body&gt;
  @section script{
      &lt;script type="text/javascript"&gt;
      $(function () {
            $('th a, tfoot a').live('click', function () {
                   $('form1').attr('action', $(this).attr('href')).submit()
                   return false;
            });
      });
     &lt;/script&gt;
  }
  </code></pre>
  
  <p>That is my website in general.. Well whenever you enter say someones name and a choice and click submit, it queries it fine, but if there are more than 20 names then when i click on the second page it essentially redoes my orginial query to get all the names and i loose what they typed into the text field and which option they choose.</p>
  
  <p>The script I found is supposed to fire whenever they user clicks on the links that the webgrid creates to go to the next page, and put the data from form1 into something so that I can pull it back out when the page is loaded again.</p>
  
  <p>I have looked and looked online for a solution and if I have found one I havent understood how it works.. so if anyone out there understands what I'm talking about and could help me out it would be greatly appreciated. </p>
  
  <p>Thanks!</p>