1
如果之前已询问过此问题，但我无法在任何地方找到它，我非常抱歉。HTML，WebMatrix，Razor等新手处理WebGrid
我对网络开发的各方面都比较陌生，但决定创建一个漂亮的小应用程序来访问和搜索办公室的任何地方的数据库。
我跟着使用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中的数据放入某些内容中，以便在页面处于弹出状态时将其拉出再次装载。
我看了看网上的解决方案，如果我找到了一个我还没有理解它是如何工作的..所以如果有人了解我在说什么，并可以帮助我，它将不胜感激。
谢谢！
谢谢你最终做了我所需要的。我正在尝试使用WebGrid中已有的分页功能，但事实证明，从该网站创建我自己的分页功能会更容易。 – 2012-02-08 13:58:18