通用搜索控件

Question

我正在尝试为我的MVC应用程序构建一个可重用的产品查找器控件。打开一个Modal窗口，客户端可以输入一些文本，点击搜索，然后返回产品并显示在搜索文本框下方（通过ajax调用）。

我遇到的问题是，我需要将客户选择的产品详细信息返回到打开模式窗口的页面。根据我对MVC的了解，我调用了一个产品控制器，将所选的产品作为模型传递，然后调用相关的视图（ShowProducts）。这是可行的，但正如你所能想象的，搜索的部分视图是硬连接的，可以与某个控制器对话，也可以返回到相同的视图。

使用MVC，我想象客户端可以将一个"回调"视图添加到传递到搜索屏幕的模型中，并将其传递给控制器，然后控制器将使用该值返回正确的视图。必须这样把事情联系起来似乎有点奇怪，所以这个问题的下一部分是，是否有更容易/更明智的方法。

有可能使用客户端编程来做这样的事情吗：

在打开模式窗口之前，调用方页面注册一个事件，搜索控件引发事件，传递产品详细信息调用方页面接收数据（我假设它会收到一个包含产品详细信息的表），并以某种方式将其添加到列表中。

我理解这是相当模糊的，但我正在努力理解这样的事情是否真的可以做到（我看到了一些简单的例子，其中文本框可能会以这种方式更改，但不会在客户端传递基本上完整的模型）

如有任何帮助/指导，我们将不胜感激。

Answer 1

有点脏，但有一个例子：jsFiddle

HTML:

<div id="list_result">
    LIST OUTPUT:
    <ul id='selection_list'></ul>
</div>
<button id="modal_button">OPEN MODAL DIALOG</button>
<div id="modal_dialog">
    <ul id="product_list">
        <li><input name="product_details_selection" type="checkbox"/>Product 1 Details</li>
        <li><input name="product_details_selection" type="checkbox"/>Product 2 Details</li>
        <li><input name="product_details_selection" type="checkbox"/>Product 3 Details</li>
        <li><input name="product_details_selection" type="checkbox"/>Product 4 Details</li>
        <li><input name="product_details_selection" type="checkbox"/>Product 5 Details</li>
    </ul>
</div>

JS:

$("#modal_button").button().click(function(){
   $("#modal_dialog").dialog({
       autoOpen: true,
      modal: true,
      buttons: {
        Ok: function() {
          $( this ).dialog( "close" );
            $("#selection_list li").remove();
            $("#product_list li input[name='product_details_selection']:checked").each(function(){
                $("#selection_list").append("<li>"+$(this).parent().text()+"</li>");
                console.log("test");
            });
        }
      }
   });
});