Asp.net mvc сетка автоматически получает обновленную базу при вводе значения в текстовое поле

Question

Я хочу создать текстовое поле для поиска значений внутри сетки. Когда я набираю текст в текстовом поле, сетка будет автоматически обновляться, показывая значения, соответствующие тому, что я набрал, без необходимости нажатия кнопки или ввода. Как я могу это сделать? Это мои три Textboxes в Index.cshtml файле:

<div class="col-md-3"> 

    <div class="efield awe-il">@Html.Awe().TextBox("txtVINnumber").Placeholder("Find VIN number").CssClass("searchtxt") </div> 
</div> 
<div class="col-md-3"> 
    <div class="efield awe-il">@Html.Awe().TextBox("txtEngineVINnumber").Placeholder("Find Engine VIN number").CssClass("searchtxt") </div> 
</div> 
<div class="col-md-3"> 
    <div class="efield awe-il">@Html.Awe().TextBox("txtGoukinumber").Placeholder("Find Gouki number").CssClass("searchtxt") </div> 

</div> 

И это мой метод действия:

public ActionResult GetItems(GridParams g, int? atdid, bool? showDeleted, string vinNumber, string engineVinNumber, string goukiNumber) 
     { 
      vinNumber = (vinNumber ?? "").ToLower(); 
      engineVinNumber = (engineVinNumber ?? "").ToLower(); 
      goukiNumber = (goukiNumber ?? "").ToLower(); 

      IQueryable<VehicleRecord> query = _context.VehicleRecords.Where(o => o.VinNumber.ToLower().Contains(vinNumber) && o.EngineVin.ToLower().Contains(engineVinNumber) && o.GoukiNumber.ToLower().Contains(goukiNumber)).AsQueryable().Include(p => p.Spot).Include(l => l.VehicleLocation); 
      int id = Convert.ToInt32(g.Key); 
      if (showDeleted.HasValue) 
      { 
       query = query.Where(p => p.IsDeleted == showDeleted.Value); 
      } 
      if (!vinNumber.IsEmpty()) 
      { 
       query = query.Where(o => o.VinNumber.Equals(vinNumber)); 
      } 

      return Json(new GridModelBuilder<VehicleRecord>(query, g) 
      { 
       Key = "Id",// needed for Entity Framework | nesting | tree 

       Map = o => new 
       { 
        o.Id, 
        o.VinNumber, 
        o.EngineVin, 
        o.GoukiNumber, 
        Position = string.Format("{0} - spot # {1}", o.VehicleLocation.Name, o.Spot.SpotNumber), 
        o.IsDeleted 

       } 
       , 
       GetItem = 
        () => query.FirstOrDefault(x => x.Id == id) 
      } 
       .Build()); 


     } 
    } 

Edit: Это то, что я сделал до сих пор

Answer 1

Я думаю, что вы может достичь этого с помощью ajax и JQuery. Шаги

1. Регистрируйте с измененными текстовые поля событий. Для этого шага обратитесь к коду JQuery, чтобы получить значения, измененные в текстовом поле. В текущем примере я написал предупреждение для изменения значений.

2. В случае изменения события собирают значения из текстового поля и отправляются методу контроллера по тому же методу, который вы используете при нажатии кнопки.

Здесь необходимо сместить предупреждение с помощью вызова ajax.

Для стадии только что включает в себя идентификатор, как textBox1, TextBox2 и текстовое поле 3 и подключить с событием изменения

$('#elementId').change(function(){ 
 
    alert("changed"); 
 
    //Call here ajax code to call the controller method which will reload the grid 
 
}); 
 

 
previousVal = ""; 
 
function InputChangeListener() 
 
{ 
 
    if($('#elementId').val() 
 
    != previousVal) 
 
    { 
 
    previousVal = $('#elementId').val(); 
 
    $('#elementId').change();  
 
    } 
 
} 
 

 
setInterval(InputChangeListener, 500); 
 

 
$('#elementId').val(3);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
<input type="text" id="elementId" />

.

Теперь вместо вызова положить АЯКС оповещения там

$.ajax({ 
     type: "POST",//Your type of call get or Post 
     url: "http: ~/GetItems", //URL to application 
     content: "application/json; charset=utf-8", 
     data: dataRequest,//All the parameters 
     success: function(d) { 
      //Update your grid 
     }, 
     error: function (xhr, textStatus, errorThrown) { 
      // TODO: Show error 
     } 
    });