如何使用两个术语实现集合搜索?

时间:2016-01-10 01:18:51

标签: javascript c# asp.net-mvc

所以,目前我有一个项目集合,我希望用户能够使用该集合中的名称和一些随机文本进行搜索。

这是我到目前为止所做的事情:

    public IEnumerable<Item> items = new[]
    {
        new Item { ItemId = 1, ItemName = "Apple", ItemDescription = "crispy, sweet", ItemPairing = "Walnut"},
        new Item { ItemId = 2, ItemName = "Pear", ItemDescription = "slightly tart", ItemPairing = "Cheese"},
        new Item { ItemId = 3, ItemName = "Banana", ItemDescription = "good source of potassium", ItemPairing = "Honey" },
        new Item { ItemId = 4, ItemName = "Chocolate", ItemDescription = "Sweet and rich melting flavor", ItemPairing = "Wine"}
    };


    public ActionResult Index()
    {
        return View("Index");
    }

    public ActionResult Search(string search)
    {
        return View("Index", items.Where(n => n.ItemName.StartsWith(search))); 
    }

这是视图中的搜索部分:

<p>
    <b>Search for Name:</b> 
    @Html.TextBox("ItemName", "", new { @class = "form-control" })  
    <b>Search for Text:</b>
    @Html.TextBox("ItemText", "", new { @class = "form-control" })

    <input id="search" type="submit" value="Search" onclick="search(ItemName,ItemText)" />
</p>

<script>
    function search(ItemName, ItemText) {
        $("search").click(function () {

            $.ajax({
                type: "POST",
                url: "/Items/Search",
                data: {ItemName, ItemText},
                datatype: "html",
                success: function (data) {
                    $('#result').html(data);
                }
            });
        });
    }
</script>

所以它看起来像这样:

SearchPage

我想要它,以便当用户在Apple中键入Name for Crispy for text时,他们可以从我的收藏中找到Apple项目。我也想要它,如果他们输入名称或文本,它仍将返回匹配的项目。

我不知道该怎么做。

3 个答案:

答案 0 :(得分:1)

虽然CStrouble的答案可行,但如果您正在进行AJAX调用并希望在单个页面中对其进行排序,则可以考虑使用AJAX和JQuery调用。

使用AJAX&amp; JQuery的:

private void Button1_Click(object sender, EventArgs e)
       {
        MyUserControl MainPanelControls = new MyUserControl();
        MainPanel.SuspendLayout();
        MainPanel.Controls.Clear();
        MainPanel.Controls.Add(MainPanelControls);             
        MainPanel.ResumeLayout();
       }

行动:

var search = function(itemName, itemText) {
    //note that if you want RESTful link, you'll have to edit the Routing config file.
    $ajax.get('/controller/action/itemName/itemText/', function(res) {
        //do stuff with results... for instance:
        res.forEach(function(element) {
            $('#someElement').append(element);
        });
    });
};

请注意,我不在家,因此可能存在一些语法错误。

好吧,所以说我想要返回一个部分,而不是一个简单的数组:

首先,将操作更改为:

public JsonResult SearchAction(itemName, itemText) {
    List<Item> newItems = items.Where(x => x.ItemName.ToUpperInveriant().Contains(itemName.ToUpperInveriant()) 
                                        || x.ItemDescription.ToUpperInveriant().Contains(itemText.ToUpperInveriant())
                                        || x.ItemPairing.ToUpperInveriant().Contains(itemText.ToUpperInveriant()));
    return Json.Encode(newItems.ToArray());
}

您在指定的目录中创建局部视图,并使用您转移的模型(public ActionResult SearchAction(itemName, itemText) { List<Item> newItems = items.Where(x => x.ItemName.ToUpperInveriant().Contains(itemName.ToUpperInveriant()) || x.ItemDescription.ToUpperInveriant().Contains(itemText.ToUpperInveriant()) || x.ItemPairing.ToUpperInveriant().Contains(itemText.ToUpperInveriant())); return PartialView("~/Views/Partials/MyPartialView.cshtml", newItems); }

newItems

现在当你收到jquery响应时:

@model IEnumerable<Path.to.Item>

<h3>Results</h3>
<ul>
@foreach(var item in model)
{
    <li>@item.Name - @item.Description</li>
}
</ul>

答案 1 :(得分:1)

从提交按钮中删除onclick属性并将其更改为

<button type="button" id="search">Search</button>

并将脚本更改为

var url = '@Url.Action("Search", "Items")';
$("#search").click(function () {
  $.post(url, { ItemName: $('#ItemName').val(), ItemText: $('#ItemText').val() }, function(data) {
    $('#result').html(data);
  });
})

请注意,您可能需要考虑将其设为$.get()而不是$.post()

并更改控制器方法以接受来自两个文本框的输入

public PartialViewResult Search(string itemName, string itemText)
{
  var items = ??
  // filter the data (adjust to suit your needs)
  if (itemName != null)
  {
    items = items.Where(x => x.ItemName.ToUpperInveriant().Contains(itemName.ToUpperInveriant()) 
  }
  if (itemText != null)
  {
    items = items.Where(x => x.ItemDescription.ToUpperInveriant().Contains(itemText.ToUpperInveriant()) 
  }
  // query you data
    return PartialView("_Search", items); 
}

旁注:不清楚搜索的逻辑是什么 - 即如果您在两个文本框中输入搜索文本,是否需要andor搜索

假设问题视图中的视图为Index.cshtml,那么它将包含以下html

<div id="result">
  @Html.Action("Search") // assumes you want to initially display all items
</div>

_Search.cshtml部分类似

@model IEnumerable<Item>
@foreach (var item in Model)
{
  // html to display the item properties
}

答案 2 :(得分:0)

您可能需要考虑将两个字符串转换为较高或较低,具体取决于您的搜索要求。以下代码假定搜索不区分大小写。

public ActionResult Search(string search)
{
    string upperSearch = search.ToUpperInvariant();
    return View("Index", items.Where(n => 
        n.ItemName.ToUpperInvariant().StartsWith(search) || 
        n.ItemDescription.ToUpperInvariant().Contains(search))); 
}

如果文本或名称匹配,则条件匹配。如果它们匹配不同的项目(如Apple和Tart),您可能需要考虑该用例中发生的情况,但在这种情况下,它将返回Apple和Pear。