如何创建一个带有提交按钮的简单搜索框以在 MVC 中返回结果集？

Question

我对 MVC 很陌生，只是学习基础知识。我一直在关注 Nerd Dinner 并使用该演示来创建我自己的应用程序。我创建了一个页面，列出了一些含有卡路里、脂肪、蛋白质等的食物... (http://rjsfitness.net/CalorieList) 这是我自己的个人网站之一，我设置它来测试 MVC。我做了很多工作，但我被困在带有搜索按钮的文本框上。

我的查看页面有这个搜索代码：

    <form action="/CalorieList/Search" method="post" id="searchForm">
  <input type="text" name="searchTerm" id="searchTerm" value="" size="10" maxlength ="30" />
  <input type ="submit" value="Search" />
</form>

我的 global.asax 有这个路由代码：

        routes.MapRoute(
            "Search", // Route name
            "CalorieList/Search/{searchTerm}", // URL with parameters
            new { controller = "CalorieList", action = "Search", search = "" } // Parameter defaults
        );

我的控制器有这个代码：

        public ActionResult Index(int? page)
    {
        const int pageSize = 10;

        //load a list with the calorie list
        var calorieLists = calorieListRepository.GetAllCalorieLists();

        //var paginatedCalorieLists = calorieLists.Skip((page ?? 0) * pageSize).Take(pageSize).ToList();
        var paginatedCalorieLists = new PaginatedList<CalorieList>(calorieLists, page ?? 0, pageSize);

        return View("Index", paginatedCalorieLists);
    }

    public ActionResult Search(String searchTerm)
    {
        const int pageSize = 100;
        int? page = 0;

        var calorieLists = calorieListRepository.GetCalorieListsBySearch(searchTerm);

        var paginatedCalorieLists = new PaginatedList<CalorieList>(calorieLists, page ?? 0, pageSize);

        return View("Index", paginatedCalorieLists);
    }

        return View("Index", paginatedCalorieLists);
    }

当我输入一个值并单击按钮时，会触发 Index 方法而不是控制器中的 Seach 方法，然后我会再次获得完整列表。如果我手动输入网址 (http://rjsfitness.net/CalorieList/Search/choc)，我会得到正确的列表。

为什么我的按钮没有使用正确的路由点击并给我搜索结果？

Answer 1

你的表单实际上指向这个：

<form id="form1" action="CalorieList" method="post">

如果您使用 Html.BeginForm，则您传入了错误的参数。

<% using (Html.BeginForm("Search", "CalorieList")) %>
<% { %>
// Your form fields
<% } %>

顺便说一句，为什么您的页面上有 ViewState？

Answer 2

因为我认为您要回到 Index ActionResult。在您的索引操作中放置一个断点并查看。

您可能想要返回到路线而不是视图。

编辑

或者有一个搜索视图可以返回。

或者你可以做一个 jQuery 回传并返回一个 PartialView 并用返回的部分视图 html 替换 div 的内容。

如果这是您想要发表的评论，我可以提供代码和链接。

编辑 2

我在这个问题中稍微解释一下。如果您需要更多代码或示例，请添加另一条评论，我会发布没有问题。

another approach to returning some thing to browser in mvc with ajax call instead of using response.write