如何在 ASP.NET MVC 中将路由值从自动完成搜索传递到我的 URL

Question

我需要一些帮助，我尝试了一切，将路由值传递给我的 URL，但我仍然遇到同样的问题。我想从 TextBox (movieTitle) 和 DropDownList (languageID) 中获取路线值。对于 TextBox，我也在使用 jquery 自动完成功能。单击按钮后，我想将用户重定向到包含电影详细信息的新页面。问题出在我的路由上，因为详细信息页面看起来像这样，只有控制器名称和操作名称：

Movie/MyMovie

我想实现这样的目标：

Movie/movieTitle-languageID

但由于某种原因，我的路由忽略了searchTerm（电影标题）和searchQ（语言ID）

当然，我尝试将Model.Movie.MovieID 的路由值传递给@using(Html.BeginForm())，但它给我一个错误，这是可以理解的。你们有什么想法可以解决这个问题吗？

这是我的自动完成操作：

public JsonResult GetMovie(string term)
{
    List<string> movies;

    var viewModel = new ViewModel
    {
        Movies = db.Movies.Where(x => x.MovieTitle.StartsWith(term)).ToList(),
        Languages = db.Languages.ToList()
    };

    movies = db.Movies.Where(x => x.MovieTitle.StartsWith(term)).Select(y => y.MovieTitle).ToList();
    return Json(movies, JsonRequestBehavior.AllowGet);
}

这是我的看法：

            @using (Html.BeginForm("MyMovie", "Movie", FormMethod.Post))
            {
                <b>Movie Title:</b>
                @Html.TextBox("searchTerm", null, new { id = "txtSearch" })
                @Html.DropDownListFor(x => x.Language.LanguageId, new SelectList(Model.Languages, "LanguageId", "LanguageName", Model.Languages.First().LanguageId), new { Name = "searchQ" })
                <input type="submit" id="sss" value="Search" />
            }    

自动完成：

$('#txtSearch').autocomplete({
    source: '@Url.Action("GetMovie")'
});

还有我的动作 MyMovie：

[HttpPost]
public ActionResult MyMovie(string searchTerm, int searchQ)
{
    //string decodedGenre = HttpUtility.UrlDecode(searchTerm);

    var viewModel = new ViewModel
    {
        Movie = db.Movies.Where(x => x.MovieTitle == searchTerm).FirstOrDefault(),
        //Subtitles = db.Subtitles.Where((x => x.LanguageId == searchQ)
        Subtitles = db.Subtitles.Where(x => x.LanguageId == searchQ && x.MovieTitle == searchTerm)
    };

    return View(viewModel);
}

路由配置：

    routes.MapRoute(
        name: "MyMovie",
        url: "Movie/MyMovie/{searchTerm}-{searchQ}",
        defaults: new { controller = "Movie", action = "MyMovie" },
        constraints: new { searchTerm = @"[\w& ]+" }
    );

我还想将movieID 传递给我的动作MyMovie 并将其传递给URL，但我真的不知道该怎么做，因为在我的TextBox 中我只传递了字符串MovieTitle。多亏了这一点，我可以更改 MyMovie 操作以通过他的 ID 搜索电影，--- 例如：Movie = db.Movies.Find(id)

这也是我的 ViewModel 也许它会以某种方式帮助你。

public class ViewModel
{
    public Movie Movie { get; set; }
    public IEnumerable<Movie> Movies { get; set; }

    public Genre Genre { get; set; }
    public IEnumerable<Genre> Genres { get; set; }

    public Language Language { get; set; }
    public IEnumerable<Language> Languages { get; set; }

    public Subtitle Subtitle { get; set; }
    public IEnumerable<Subtitle> Subtitles { get; set; }

    public Comment Comment { get; set; }
    public IEnumerable<Comment> Comments { get; set; }
}

//好的，小更新。我将方法从 POST 更改为 GET，现在我的 URL 看起来像这样，但仍然无法得到我想要的。

Movie/MyMovie?searchTerm=Ant+Man&searchQ=1

Answer 1

您正在使用 GET 提交表单，它将表单内容编码为查询字符串参数（“17.13.1 表单提交方法”http://www.w3.org/TR/html4/interact/forms.html#h-17.13 了解更多详细信息）

实现所需结果的一种方法是使用 JavaScript 构造指向所需 url 的链接，如下所示：

Index.cshtml

@model StackOverflow_34576477.Models.ViewModel
<b>Movie Title:</b>
@Html.TextBox("searchTerm", null, new { id = "txtSearch" })
@Html.DropDownListFor(x => x.Language.LanguageId, new SelectList(Model.Languages, "LanguageId", "LanguageName", Model.Languages.First().LanguageId), new { Name = "searchQ" })
<input type="button" id="sss" value="Search" />

<script>
    $('#txtSearch').autocomplete({
        source: '@Url.Action("GetMovie")'
    });
    //Submitting a form with GET will encode the form contents as querystring parameters (not the desired result).
    //Reference: http://www.w3.org/TR/html4/interact/forms.html#h-17.13
    //Alternative (not necessarily most elegant) solution:
    $('#sss').click(function (parameters) {
        var targetUrl = '@Url.Action("MyMovie")';
        var movieTitle = $("#txtSearch").val();
        var selectedLanguageId = $("select[name='searchQ']").val();
        targetUrl += "/" + movieTitle + "-" + selectedLanguageId;
        window.location.href = targetUrl;
    });
</script>

希望对你有帮助。