在MVC3中构建动态“高级搜索”控件 [英] Building a dynamic “Advanced Search” Control in MVC3

问题描述

大家好，



你能指导如何进行高级搜索，如下面这个链接



请点击此处



希望提供帮助我在这个

提前感谢

解决方案

好的，我将概述我将如何解决这个问题，因为我做了一些类似的事情，虽然没有使用ASP.net（因此不会有任何代码，请不要问任何代码，因为我正在进行补充:)）。



客户端

每一行都是一个独立的实体，它的行为相同。所以你想在页面的某个地方使用一个模板 - 你可以在JavaScript中构建它，但我更喜欢在静态标记中使用它，但在隐藏的div下。它是一个复杂的实体，所以把它放在一个外部的div元素中（尽管仍然在隐藏的容器下），并给它一个像search_template这样的id，这样你就可以从脚本中获取它。

< div style =display：none> 
< div id =search_templateclass =search_row> 
 ...<！ - 这里是实际内容 - > 
，例如< input type =textid =search_template_content/> 
< / div> 
< / div> 

然后你想要一个JavaScript函数克隆模板，替换search_template的任何实例用search_ next_id 。在大多数情况下，你只需要使用innerHTML替换即可：

函数clone（baseid）{
 // baseid：名称的根，即'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）; 
} 

显然现在你需要有一个search_container：

< form action =/ Search> 
< div id =search_containerstyle =margin：0; padding：0/> 
< input type =buttonvalue =添加条目onclick =clone（'search _'）/> 
< input type =submit/> 
< / form> 

最后，您可能想要调用 clone（'search_' ）在你的body.onload处理程序或内联脚本中，所以你得到一个搜索条件行开始。



你应该从一个非常简单的模板（即一个搜索框），但希望你知道足够的JavaScript来做单行聪明（它涉及很多制作< input>控件或自定义JS控件，以及AJAX查找来获取内容）。



服务器端您将收到一组看起来像

 search_1_content的查询对=文本输入+ + +在第一行+&安培; 
 search_2_content = etc 

...您必须使用Request.Form查看并正确创建搜索逻辑。



这已经足够成为一篇文章所以我会停在那里：P ......这应该足以让你至少在正确的道路上。

看看这些链接，我认为你可能正在寻找面包屑效果。

http ：//mvcsitemap.codeplex.com/ [ ^ ]

http://edspencer.me.uk / 2011/09/20 / mvc-sitemap-provider-tutorial-2-breadcrumbs / [ ^ ]

但是如果你仍然想要网格方式。我建议这个jquery实现。

http://flexigrid.info/ [ ^ ]

构建搜索表单

http://forums.asp.net/t/1671805.aspx/1 [ ^ ]

http://unboxedsolutions.com/sean/archive/2011/03/30/15977.aspx [ ^ ]

希望这个帮助。

如果这对您有帮助，请标记为您的解决方案。谢谢

查看 EasyQuery 组件库。



这是一个使用EasyQuery小部件构建的实时演示网页：

http://demo.easyquerybuilder.com/asp-net-mvc/

Hi Everyone,

can you guide on how to make Advance search like this link below

click here

hoping to help me out on this
thanks in advance

解决方案

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.

Take a look at these links I think a breadcrumb effect is what you might be looking for.
http://mvcsitemap.codeplex.com/[^]
http://edspencer.me.uk/2011/09/20/mvc-sitemap-provider-tutorial-2-breadcrumbs/[^]
However if you do still want to go the grid way. I'd suggest this jquery implementation.
http://flexigrid.info/[^]
Building a search form
http://forums.asp.net/t/1671805.aspx/1[^]
http://unboxedsolutions.com/sean/archive/2011/03/30/15977.aspx[^]
Hope this helps.
Please mark as your solution if this helps you. thanks

Take a look at EasyQuery component library.

Here is a live demo web-page built with EasyQuery widgets:
http://demo.easyquerybuilder.com/asp-net-mvc/

这篇关于在MVC3中构建动态“高级搜索”控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！