如何进行动态搜索

Question

我正在开发一个用于搜索媒体的 Web 应用程序，所以对于我的搜索界面，我应该有类似的东西：用户指定 4 个字段，他可以添加其他字段（相同的字段性质，但他想添加另一个标准）通过点击图标加号，我已经用jquery做到了，见下图：enter image description here

但我的问题是：如何将表单值列表传递给我的操作！ 这是我的控制器的代码和我的视图（我只是为了一个） 控制器：

[HttpPost]
        public ActionResult RechercheForm(Recherche FormData)
        {
            
            List<Asset> liste = null;
            
           
            if (FormData.Op == "Like")
            {
                if (FormData.Critere == "Titre")
                {
                    liste = bdd.Assets.Where(a => (a.Titre.Contains(FormData.Val1)
                                                               )).ToList();
            ViewBag.Val = FormData.Val1;
                    return View("Index",liste);
                }
                else
                    if (FormData.Critere == "TitreCourt")
                    {
                         liste = bdd.Assets.Where(a => (a.TitreCourt.Contains(FormData.Val1)
                                                                   )).ToList();
                        return View("Index", liste);
                    }

            }
            return View("Index");

           
            
        }

查看：

 <div class="right-content" style="width: 760px;" >
                   <!-- DropListDownData -->
                @{
                    
                    
                    Dictionary<string, string> ListCritere=new Dictionary<string, string>
                        {
                            {"Titre", "Titre"},
                            {"TitreCourt", "TitreCourt"},
                            
                            // some lines skipped
                        };
                    Dictionary<string, string> ListOp = new Dictionary<string, string>
                        {
                            {"Like", "Like"},
                            {"Sup", "Sup"},
                            {"Inf", "Inf"},
                            
                            // some lines skipped
                        };
                   
     
                                
                  
                    }
                   
                    



                

                
                        @using (Html.BeginForm("RechercheForm", "Recherche",new { ReturnUrl = ViewBag.ReturnUrl },FormMethod.Post, new { @class = "form-inline" })){
                            <button type="submit" class="btn btn-default">Rechecrcher</button>
                            <table id="TableRech">
                              <tr>
                                <th>Critere</th>
                                <th>Opérateur</th>
                                <th>Valeur1</th>
                                <th>Valeur2</th>
                                <th></th>
                                  
                              </tr>
                              <tr>
                                <td><div class="form-group">
                              @Html.DropDownList("Critere", new SelectList(ListCritere, "Key", "Value"),new { @class = "form-control" })
                                 
                          </div></td>
                                <td><div class="form-group">
                            
                               @Html.DropDownList("Op", new SelectList(ListOp, "Key", "Value"),new { @class = "form-control" })
                              
                          </div></td>
                                <td><div class="form-group">
      
                               @Html.TextBox("Val1",null,new {id = "Val2", @class = "textbox", style="width:50px;padding-right: 50px; " })
                          </div></td>
                                <td> <div class="form-group">
      
                              @Html.TextBox("Val2",null,new {id = "Val2", @class = "textbox", style="width:50px;padding-right: 50px; " })
                                
                          </div></td>
                                  <td><span class="glyphicon glyphicon-plus-sign" id="Plus" style="width: 15px;" onclick="RechFunctionPlus()" ></span></td>
                             
                                
                                
                              </tr>
                             
                            </table>
                        }
   </div>
        </div>
<script>
  function RechFunctionPlus() {
        
         var table= document.getElementById('TableRech');
         var tr = document.createElement('tr');
         table.appendChild(tr);
         var td = document.createElement('td');
         td.innerHTML='<select class="form-control" id="Critere" name="State"> <!-- some attrs=ibutes skipped --><option value=""></option><option value="Titre">Titre</option><option value="TitreCourt">TitreCourt</option><option value="Type">Type</option></select>';
         tr.appendChild(td);
         var td2 = document.createElement('td');
         td2.innerHTML='<select class="form-control" id="Op" name="State"> <!-- some attrs=ibutes skipped --><option value=""></option><option value="Like">Like</option><option value="Inf">Inf</option><option value="Sup">Sup</option></select>';
         
         tr.appendChild(td2);
         var td3 = document.createElement('td');
         td3.innerHTML='@Html.TextBox("Val1",null,new {id = "Val1", @class = "textbox", style="width:50px;padding-right: 50px; " })';
         tr.appendChild(td3);
         var td4 = document.createElement('td');
         td4.innerHTML='@Html.TextBox("Val2",null,new {id = "Val2", @class = "textbox", style="width:50px;padding-right: 50px; " })';
         tr.appendChild(td4);
         var td5 = document.createElement('td');
         td5.innerHTML='<span class="glyphicon glyphicon-minus-sign" id="Plus" style="width: 15px;" onclick="RechFunctionMoins()" ></span>';
         tr.appendChild(td5);
        
     }
 </script>

我想做一个“Recherche”列表，我会将它传递给我的操作“RechercheForm”，但我不怎么做？！！

Answer 1

使用 JavaScript

例如：

function sendForm(projectId, target) {
$.ajax({
    url: target,
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({ 
        projectId: projectId, 
        userAccountIds: [1, 2, 3] 
    }),
    success: ajaxOnSuccess,
    error: function (jqXHR, exception) {
        alert('Error message.');
    }
});

}

看到这个帖子Post JavaScript array with AJAX to asp.net MVC controller