I'm developping a web application for searching media, so for my interface of search i should have somthing like that : the user specify the 4 fields and he can add an other fields(the same fields nature but he want to add an other criterion) by clicking on the icon Plus, i have done that with jquery, see the image below:enter image description here
But my problem is that: How can i pass the liste of form values to my action!! here you are the code of my controller and my view (i do it just for one ) Controller:
[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");
}View:
<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>i think to do a list of the calss "Recherche" that i will pass it to my Action "RechercheForm" but i don't how?!!
