검색 방법 문제

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

더 좋은 방법은 도랑하는 것입니다 Html.BeginForm (실제로 뭔가 다른 필요하지 않는 한) 데이터를 얻기의 순수 아약스 방법을 사용합니다.

그래서 수정 된 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> 

는 또한 아약스 호출 될 동작을 변경해야합니다 (그리고 난 당신이 "인덱스"조치를 호출하는 이유를 모르겠어요).

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

이 아약스의 가장 좋은 점은 거기에 어떤 게시물이 없습니다 그것은 비동기, 그래서 당신은 당신의 데이터 손실에 대해 걱정하지 않아도됩니다.

Answer 2

질문에 대한 의견에 동의합니다. 모든 키 스트로크에 게시하면 좌절감을주는 사용자 경험이 될 것입니다.

두 가지 대답은 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>