创建一个ASP.Net MVC站点，过滤内容

Question

最近我开始了一个MVC项目来查询和报告公司的用户，一切似乎都很好，除了我做了一个finduser表单，我都被困住了！

您知道，我希望操作员能够通过输入hos引脚、序列号或呼叫号来找到合适的用户，但是我为搜索操作创建的操作链接都失败了，因为它们是在form_load时间生成的，因此向它们注入了文本框的空字符串。

所以我的要求是：

1. 如何使这个过滤器工作。
2. 现在，一个小小的Ajax文本框提示用户引脚或串行将是很好的，请给我一个或两个提示。

<table> <tr> <td> PIN:</td> <td> <asp:TextBox ID="txt_pin" runat="server"></asp:TextBox> </td> </tr> <tr> <td> Serial Number:</td> <td> <asp:TextBox ID="txt_sn" runat="server"></asp:TextBox> </td> </tr> <tr> <td> CallingNumber:</td> <td> <asp:TextBox ID="txt_callingNo" runat="server"></asp:TextBox> </td> </tr> <tr> <td> CalledThisNumberToday:</td> <td> <asp:TextBox ID="txt_calledNo" runat="server"></asp:TextBox> </td> </tr> <tr> <td> &nbsp;</td> <td> &nbsp;</td> </tr> <tr> <td> </td> <td> &nbsp;</td> </tr> </table>

 `<%:Html.ActionLink("Search for user", "Details", new { pin = txt_pin.Text })%>`

Answer 1

<asp:TextBox>？在ASP.NET MVC应用程序中？恐怕你搞错了。

我建议您在这里阅读入门教程，以便学习ASP.NET MVC的基本概念：http://asp.net/mvc。

在ASP.NET MVC中，您使用模型，在视图中使用帮助器来生成输入字段。

因此，在您的情况下，您可以设计一个视图模型：

public class SearchViewModel
{
    public string Pin { get; set; }
    public string SerialNumber { get; set; }
    public string CallingNumber { get; set; }
    public string CalledThisNumberToday { get; set; }
}

然后，您可以设计一个控制器操作，将此视图模型传递给视图，用于呈现搜索表单：

public ActionResult Index() 
{
    var model = new SearchViewModel();
    return View(model);
}

最后，在强类型视图中，可以使用HTML帮助程序：

<%@ Page 
    Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
    Inherits="System.Web.Mvc.ViewPage<AppName.Models.SearchViewModel>" %>

<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server">

    <%= Html.ValidationSummary() %>

    <% using (Html.BeginForm()) { %>

        <div>
            <%= Html.LabelFor(x => x.Pin) %>
            <%= Html.EditorFor(x => x.Pin) %>
        </div>

        <div>
            <%= Html.LabelFor(x => x.SerialNumber) %>
            <%= Html.EditorFor(x => x.SerialNumber) %>
        </div>

        <div>
            <%= Html.LabelFor(x => x.CallingNumber) %>
            <%= Html.EditorFor(x => x.CallingNumber) %>
        </div>

        <div>
            <%= Html.LabelFor(x => x.CalledThisNumberToday) %>
            <%= Html.EditorFor(x => x.CalledThisNumberToday) %>
        </div>

        <p><input type="submit" value="Search for user" /></p>
    <% } %>

</asp:Content>

最后一步是实现执行搜索的控制器操作，并将此表单添加到其中：

[HttpPost]
public ActionResult Index(SearchViewModel model)
{
    if (!ModelState.IsValid) 
    {
        // the model was not valid => redisplay the form
        // so that the user can fix his errors
        return View(model);
    } 

    // TODO: perform the search
    ...
}

Answer 2

除了Darin的出色答案(您确实需要遵循这个答案，以便以"MVC“的方式进行操作)，您还可以使用jQuery对表进行AJAX过滤。甚至还有一个用于jQuery的插件可以使实时表过滤变得像添加一个脚本引用和一个文本框一样简单，然后用几行Javascript代码来连接搜索。最终看起来会是这样的：

<script language="javascript" type="text/javascript" src="/Scripts/jquery.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jquery.uitablefilter.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#myFilter").keyup(function () {
            $.uiTableFilter($("#myTable"), $(this).val());
        });
    });
</script>


<input type="text" id="myFilter" />

<table id="myTable">
...
</table>

在开始键入筛选框时，将自动对表进行筛选，仅显示包含指定值的行。

至于自动完成的建议，您可能需要查看jQUery UI --它们使用几种不同的机制支持自动完成，从而提供提示值。