Building a dynamic “Advanced Search” Control in MVC3

Okay, I will give a broad overview of how I'd go about this, as I've done something a bit similar, though not with ASP.net (so there won't be any code, and please don't ask for any, as I'm making it up as I go along :) ).

Client side
Each row is a separate entity, which will act the same. So you want a template somewhere in the page – you could construct it in JavaScript, but I prefer to have it in the static markup but under a div which is hidden. It's a complex entity, so put it in an outer div element (still under the hidden container, though), and give that an id like "search_template" so you can get at it from script.

<div style="display:none">
 <div id="search_template" class="search_row">
  ... <!-- In here goes the actual content-->
  e.g. <input type="text" id="search_template_content"/>
 </div>
</div>

Then you want a JavaScript function to clone the template, replacing any instances of "search_template" with "search_next_id". You can do that just with an innerHTML replace, in most cases:

function clone(baseid){
 // baseid: the root of the name, i.e. 'search_'
 var templatename = baseid + 'template';
 var template = document.getElementById(templatename);
 var indexer = 1;
 while(null != document.getElementById(baseid + indexer)) indexer++;
 var newdiv = document.createElement('div');
 var newname = baseid + indexer;
 newdiv.id = newname;
 newdiv.innerHTML = template.innerHTML.replace(new RegExp(templatename), newname);
 
 var containerdiv = document.getElementById('search_container');
 containerdiv.appendChild(newdiv);
}

And obviously now you need to have a search_container:

<form action="/Search">
 <div id="search_container" style="margin: 0; padding: 0" />
 <input type="button" value="Add entry" onclick="clone('search_')"/>
 <input type="submit"/>
</form>

Finally, you probably want to call clone('search_') in your body.onload handler or in inline script, so you get one search criteria row to start with.

You should start with a very simple template (i.e. a single search box), but hopefully you know enough JavaScript to do the single line cleverness (it involves a lot of making <input> controls or custom JS controls, and AJAX lookups to get content).

Server side you will receive a set of query pairs that look like

search_1_content=Text+entered+in+first+row&
search_2_content=etc

... which you will have to use Request.Form to look through and create the search logic appropriately.

This is getting long enough to be an article so I'll stop there :P ... that should be enough to set you on the right path at least.