搜索方法问题

本文关键字：问题 方法 搜索 | 更新日期: 2023-09-27 18:09:33

我使用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>

搜索方法问题

我同意你对这个问题的评论。每次按键都发帖子会让用户感到沮丧。

因此，有两个答案，使用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>

一个更好的方法是放弃您的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将调用的操作(我不知道为什么要调用"索引"操作)。

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的最好的事情是没有张贴，它是异步的，所以你不必担心丢失你的数据

相关文章：