【发布时间】：2012-02-28 08:33:51
【问题描述】：
如果之前有人问过这个问题，我很抱歉，但我在任何地方都找不到。
我在各个方面都对 Web 开发相当陌生，但我决定创建一个不错的小应用程序来从办公室的任何地方访问和搜索数据库。
我遵循了几个使用 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 个姓名，那么当我单击第二页时，它基本上会重做我的原始查询以获取所有名称，然后我松开他们在文本字段中输入的内容以及他们选择的选项。
我发现的脚本应该在用户单击 webgrid 创建的链接以转到下一页时触发，并将 form1 中的数据放入某个东西中，以便我可以在页面加载时将其拉回再次。
我已经在网上寻找解决方案，如果我找到了一个，我还没有理解它是如何工作的。所以如果有人理解我在说什么并且可以帮助我，我将不胜感激。
谢谢！
【问题讨论】：
标签： javascript html razor webmatrix webgrid