Question

我正在使用MVC 5，C＃而我正在尝试构建一个搜索过滤器，该过滤器将在每次击键时进行过滤。它的工作方式如此，但文本框在提交后会删除。现在这也许不是最好的方法。有没有办法在发布时发布它不会删除文本框，或者更好的是，还有更好的选择吗？

    @using (Html.BeginForm("Index", "Directory", FormMethod.Post, new { id = "form" }))
    {
       <p>
          Search Employee: <input type="text" name="userName" onkeyup="filterTerm(this.value);" />


       </p>

    }



<script>
    function filterTerm(value) {
        $("#form").submit();
        event.preventDefault();
    }
</script>

Answer 1

我同意您对问题的评论。每次击键都会发布令人沮丧的用户体验。

所以，两个答案，使用ajax来执行搜索（这将保留值，因为整个页面不会发布）或者有一个提交按钮并将输入命名为与控制器动作参数相同。

控制器代码（与现有代码一起使用）：

public class DirectoryController : Controller 
{
    [HttpPost()]
    public ActionResult Index(string userName) 
    { 
        // make the input argument match your form field name.

        //TODO: Your search code here.

        // Assuming you have a partial view for displaying results.
        return PartialView("SearchResults"); 
    }
}

查看代码（用Ajax替换代码）：

<p>
    Search Employee:@Html.TextBox("userName", new { id = "user-name-input" })
</p>
<div id="results-output"></div>

<script type="text/javascript">
$("#user-name-input").change(function(e) {
    $.ajax({
        url: '@Url.Action("Index", "Directory")'
        , cache: false
        , type: "post"
        , data: {userName: $("#user-name-input").val() }
    }).done(function (responseData) {
        if (responseData != undefined && responseData != null) { 
            // make sure we got data back
            $("#results-output").html(responseData);
        } else {
            console.log("No data returned.");
            alert("An error occurred while loading data.");
        } // end if/else
    }).fail(function (data) {
        console.log(data);
        alert("BOOOM");
    });
}
</script>

Answer 2

更好的方法是放弃你的Html.BeginForm（除非你真的需要它用于别的东西）并使用纯粹的ajax方法来获取数据。

所以你修改过的html会是：

<p>
    Search Employee:
    <input type="text" name="userName" onkeyup="filterTerm(this.value);" />
</p>

<script>
    function filterTerm(value) {
        $.ajax({
            url: '@Url.Action("Index", "Directory")',
            data: {
                searchTerm: value
            },
            cache: false,
            success: function (result) {
                //do something with your result,
                //like replacing DOM elements
            }
        });
    }
</script>

您还需要更改ajax将要调用的操作（我不知道您为什么要调用“Index”操作）。

public ActionResult Index(string searchTerm)
{
    //lookup and do your filtering

    //you have 2 options, return a partial view with your model
    return PartialView(model);

    //or return Json
    return Json(model);
}

关于这个ajax的最好的事情是没有发布并且它是异步的，所以你不必担心会丢失你的数据。

搜索方法问题

2 个答案: