Question

我想创建一个文本框来搜索网格内的值。当我在文本框中键入文本时，网格将自动更新，显示与我输入的内容相对应的值，而无需按下按钮或输入。我怎样才能做到这一点？这是我在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());


        }
    }

编辑：这是我到目前为止所做的

Answer 1

我认为你可以用ajax和JQuery实现这一点。步骤

使用更改的事件注册文本框。对于此步骤，请参阅JQuery代码以在文本框中更改值。在当前的例子中，我已经为值的变化写了警告。
在更改事件中，从文本框中收集值并发送到您的控制器方法，与您在单击按钮上使用的方法相同。

在这里，您需要使用ajax调用来替换警报。

对于第一步，只包括像textbox1，textbox2和textbox 3这样的id，并与更改事件挂钩

＆＃13;

$('#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);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<input type="text" id="elementId" />

＆＃13;

现在取代警报将ajax调用放在那里

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

Asp.net mvc网格会根据文本框中的输入值自动更新

1 个答案: