Новое в HTML, WebMatrix, Razor и т. Д. Работа с WebGrid - PullRequest
1 голос
/ 07 февраля 2012

Мне очень жаль, если об этом уже спрашивали, но я нигде не могу его найти.

Я довольно новичок в веб-разработке во всех аспектах, но решил создать симпатичное небольшое приложение для доступа и поиска в базе данных из любой точки офиса.

Я следовал нескольким учебникам, используя WebMatrix, о том, как настроить простую веб-страницу и т. Д., И у меня она в основном работает, за исключением случая перехода на следующую страницу в WebGrid. Вот что я имею в виду (неясно, но ничего не поделаешь)

Я нашел два примера в Интернете о попытке использовать javascript, и они дали мне эти кусочки кода для использования ..

В файле с именем _layout.cshtml

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Start</title>

    <script src="@Href("~/scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>

    <link href="@Href("~/styles/site.css")" rel="stylesheet" />
    @RenderSection("script", required: false);
</head>
<body>
    @RenderBody();
</body>
</html>

Затем файл с именем _PageStart.cshtml

@{
    Layout = "~/_layout.cshtml";
 }

Затем я начал создавать свой собственный сайт и моделировать его после нескольких уроков, которые я видел, специально посвященных WebGrid.

Это мой Default.cshtml

@{
    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
    }
}

    <head>
    <title>Database</title>
    <style type="text/css"> " //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;}
    </style>
</head>
<body onload="document.form1.searchBox.focus();"> 
    <h1>Database</h1>
    <form name="form2" method="post" action="">
        <p><input type="submit" name="populate" value="Populate DB" /></p>
    </form>
    <div id="grid">
        @grid.GetHtml(
            tableStyle: "grid",
            headerStyle: "head",
            alternatingRowStyle: "alt",
            columns: grid.Columns(
            grid.Column("Name","Name", 
                        format: @<p title="@item.Name.Trim()">@item.Name</p>,
                        style:"style1"),
           //repeat to create 5 more columns exactly the same essentially
        ), mode: WebGridPagerModes.All
        )
    </div>

    <form name="form1" method="post" action="Default">
      <p><label for="searchBox">Search:</label>
      <input type="text" name="searchBox" value="@searchStr"  /></p>

      <p><input type="radio" name="choice" value="Name" />
      <label for="Name">Name</label></p>

      <p><input type="radio" name="choice" value="choice1" />
      <label for="choice1">choice1</label></p>

      <p><input type="radio" name="choice" value="choice2" />
      <label for="choice2">choice2</label></p>

      <p><input type="radio" name="choice" value="choice3" />
      <label for="choice3">choice3</label></p>

      <p><input type="radio" name="choice" value="choice4" />
      <label for="choice4">choice4</label></p>

      <p><input type="radio" name="choice" value="choice5" />
      <label for="choice5">choice5</label></p>

      <p><input type="submit" name="Submit" value="Submit" /></p>

    </form>

</body>
@section script{
    <script type="text/javascript">
    $(function () {
          $('th a, tfoot a').live('click', function () {
                 $('form1').attr('action', $(this).attr('href')).submit()
                 return false;
          });
    });
   </script>
}

Это мой веб-сайт в общем. Ну, когда вы вводите, скажем, чье-то имя и выбор, и нажимаете «Отправить», он запрашивает его нормально, но если существует более 20 имен, то, когда я нажимаю на второй странице, это, по сути, возвращает мой оригинальный запрос, чтобы получить все имена, и я теряю то, что они ввели в текстовое поле и какой вариант они выбирают.

Сценарий, который я нашел, должен запускаться всякий раз, когда пользователь нажимает на ссылки, которые создает веб-сетка, чтобы перейти на следующую страницу, и помещает данные из form1 во что-то, чтобы я мог вытащить их обратно при загрузке страницы. еще раз.

Я искал и искал в Интернете решение, и если бы я нашел его, я не понял, как оно работает ... поэтому, если кто-то там поймет, о чем я говорю, и сможет мне помочь, это будет очень признательно.

Спасибо!

1 Ответ

2 голосов
/ 07 февраля 2012

Ознакомьтесь с Mikesdotnetting The WebGrid - эффективный пейджинг и сортировка на

http://mikesdotnetting.com/Article/181/The-WebGrid-Efficient-Paging-And-Sorting-With-SQL-CE-4.0

Должны дать вам несколько идей для работы.

...