Добавление фильтра на страницу на основе значения текстового поля

Question

У меня есть следующие две таблицы:

Table1 
___________ 
ID 
Name 
Company 
Industry 
Rank 
Key - guid 

и

Table2 
_____________ 
Key - guid 
FieldValue 
StartDate 
EndDate 

Я использую MVC шаблон, а не обычные веб-формы. Я создал 2 отдельных класса моделей для каждого и отдельных классов DBContext.

Первоначально, когда страница загружается, я отображаю все данные из Таблицы 1 на странице. Я хочу добавить текстовое поле в верхней части страницы, и когда пользователь вводит значение и хиты ввода, я хочу, чтобы данные в таблице на странице, чтобы быть отфильтрованы на основе введенного пользователем значения:

SELECT ID, Name, Company,Industry, Rank 
FROM Table1 INNER JOIN Table2 ON Table1.Key=Table2.Key 
WHERE FieldValue=TextBox1.Text 

У меня уже есть код для отображения данных из таблицы 1 на странице, работающих отлично, но мне нужна помощь в добавлении фильтра на основе значения текстового поля. Может кто-то указать мне верное направление?

Вот мой код с точки зрения:

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

<h2>Records</h2> 
<table style="border: 1px solid black;"> 
     <tr> 
      <th>ID</th> 
      <th>Name</th> 
      <th>Company</th> 
      <th>Industry</th> 
      <th>Rank</th> 
     </tr> 
@foreach (ProjectName.Models.Records item in Model) 
     { 
      <tr style="border: 1px solid black;"> 
       <td>@item.ID</td> 
       <td>@item.Name</td> 
       <td>@item.Company</td> 
       <td>@item.Industry</td> 
       <td>@item.Rank</td> 

      </tr> 
     } 
</table> 

Здесь обновляется вид код:

<div>  
    @using (Html.BeginForm()) 
    { 
    <input type="text" id="TextBox1" /> 
    <input type="submit" name="submit" /> 
    } 

    <h2>Records</h2> 
    <table style="border: 1px solid black;"> 
    <tr> 
     <th>ID</th> 
     <th>Name</th> 
     <th>Company</th> 
     <th>Industry</th> 
     <th>Rank</th> 
    </tr> 
    @foreach (ProjectName.Models.Records item in Model) 
    { 
     <tr style="border: 1px solid black;"> 
      <td>@item.ID</td> 
      <td>@item.Name</td> 
      <td>@item.Company</td> 
      <td>@item.Industry</td> 
      <td>@item.Rank</td> 

     </tr> 
    } 
    </table> 
</div> 

P.S. Уважаемые редакторы, пожалуйста, пожалуйста, пожалуйста, прекратите редактирование слова MVC из названия - иначе люди предполагают, что это шаблон Web Forms, а не MVC. ТАК ПОЖАЛУЙСТА, ЧТОБЫ ПОЖАЛУЙСТА, прекратите его редактирование, вы не помогаете, только делаете что-то трудным. Большое спасибо заранее, моя оценка выше и выше

Answer 1

Несмотря на то, что вы используете MVC, вам по-прежнему нужен <form>, чтобы отправить значение фильтра методу контроллера.

Это ваше текстовое поле в пределах формы MVC:

@using (Html.BeginForm()) 
{ 
    <input type="text" name="TextBox1" /> 
    <input type="submit" name="submit" /> 
} 

Это отображается в виде HTML <form> тегов. Ваш контроллер выглядит следующим образом:

public ActionResult Index(string TextBox1) 
{ 
    // You don't say how you're interacting with the database, 
    // but you need to check the `TextBox1` parameter for null, 
    // and use it in your query if it's not - simplified: 
    if(TextBox1 != null) 
    { 
     // do qry with parameter 
    } 
    else 
    { 
     // do qry without parameter 
    } 
    ... 

Есть несколько способов сделать то, что я написал выше, но это простая версия, которая не требует изменений вашего ViewModel (в основном потому, что я не знаю, что это выглядит как!)

Answer 2

Вы можете использовать datatables plugin, у вас есть фильтры со статическими или серверными таблицами.

Очень простой пример:

$(document).ready(function() { 
    $('#example').DataTable(); 
}); 

Answer 3

Во-первых, создать что-то, что Postback, вроде <as:button> и правильно ссылка событие в код, затем:

using(context db = new context()) 
{ 
    List<Table2> var1 = db.Table2.ToList() 
    List<Table2> var2 = new List<Table2>() 
    foreach(Table2 t in var1) 
    { 
     if(t.FieldValue == textbox.Text) 
     { 
      var2.Add(t); 
     } 
    } 
} 

, а затем:

foreach(Table2 t in var2) 
    { 
     //Bind your things here 
    } 

Извините, если он не поможет вам или если я неправильно понял вопрос.