搜索方法的问题 [英] Search method issue

问题描述

我使用MVC 5，C＃，我试图建立一个搜索过滤器，将通过在每次击键过滤。它的工作原理是这样的，但在提交后的文本框擦除。现在，这可能不是它的最好的办法不是。有没有一种方法，使所以当它张贴它不会删除文本框，或更好，但还有更好的选择吗？

  @using（Html.BeginForm（指数，目录，FormMethod.Post，新{ID =形式}））
    {
       ＆所述p为H.;
          搜索员工：其中;输入类型=TEXTNAME =username的的onkeyup =filterTerm（THIS.VALUE）; /＆GT;
       ＆所述; / P＆GT;    }＆LT;脚本＆GT;
    功能filterTerm（值）{
        $（＃表）提交（）。
        。事件preventDefault（）;
    }
＆LT; / SCRIPT＆GT;
 

解决方案

我同意你的问题的意见。张贴在每个击键会是一个令人沮丧的用户体验。

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

控制器code（与现有的code使用）：

 公共类DirectoryController：控制器
{
    [HttpPost（）]
    公众的ActionResult指数（用户名字符串）
    {
        //使输入参数匹配您的表单字段名。        // TODO：您搜索code在这里。        //假设你有显示结果的局部视图。
        返回PartialView（SearchResult所）;
    }
}
 

查看code（更换您的code。与阿贾克斯）：

 ＆LT; P＆GT;
    搜索员工：@ Html.TextBox（username的，新的{ID =用户名输入}）
＆所述; / P＆GT;
＆LT; D​​IV ID =结果输出＆GT;＆LT; / DIV＆GT;＆LT;脚本类型=文/ JavaScript的＆GT;
$（＃用户名输入）。改变（函数（五）{
    $阿贾克斯（{
        网址：'@ Url.Action（指数，目录）
        ，缓存：假的
        键入：后
        数据：{用户名：$（＃用户名输入）VAL（）}
    }）。完成（功能（responseData）{
        如果（responseData =不确定和放大器;！＆安培;！responseData = NULL）{
            //确保我们得到的数据备份
            $（＃成果产出），HTML（responseData）;
        }其他{
            的console.log（无数据返回。）;
            警报（在加载数据时出现错误。）;
        } //结束的if / else
    }）失败（功能（数据）{
        的console.log（数据）;
        警报（BOOOM）;
    }）;
}
＆LT; / SCRIPT＆GT;
 

I'm using MVC 5, C# and I'm trying to build a search filter that will filter through upon each key stroke. It works as so, but the textbox erases after submitting. Now this is probably not the best approach to it either. Is there a way to make so when it posts it doesn't erase the textbox, or better yet, is there a better alternative?

    @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>

解决方案

I agree with the comments on your question. Posting on every key stroke would be a frustrating user experience.

So, two answers, use ajax to perform the search (which will then keep the value since the whole page will not post) or have a submit button and name the input the same as the controller action parameter.

Controller code (used with your existing code):

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"); 
    }
}

View Code (to replace your code with 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>

这篇关于搜索方法的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！