Блог

Я использую 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 amp;amp; 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 — это отсутствие публикации и асинхронность, поэтому вам не нужно беспокоиться о потере ваших данных.