从 View 和 ajax 路由映射 PartialView

Question

我是 ASP.NET MVC 的新手。我刚刚创建了一个经典的 MVCMovie 应用程序。现在，我想添加更多功能，仅供学习。我做了一个 "SearchByGen" 视图来按类型搜索电影：在视图中有一个类型下拉列表和一个 DIV 占位符。占位符的内容由 jQuery 通过 PartialView "SearchByGenGetResult" 加载并且一切正常。

问题是：

架构正确吗？
如何通过调用视图在 URL 中映射 PartialView 的值（例如，如果我通过 DropDown 选择搜索 "horror" 我想在 URL 中看到类似 "SearchByGen/horror" 的东西，我想正确地看到结果和通过 "SearchByGen/horror")
[=37= 访问页面时选择的 DropDown 选项]

谢谢大家，现在代码：

控制器代码：

public ActionResult SearchByGen()
    {
        //get the genres list
        var totalGens = _repository.GetGenrs(); 

        //put into List<SelectListItem> for @Dropdown it
        List<SelectListItem> items = totalGens.Select(genere => new SelectListItem { Text = genere, Value = genere }).ToList();

        //passing to the View
        ViewBag.TotalGen = items;

        return View();
    }

    public ActionResult SearchByGenGetResult(string gen)
    {
        //select movies by gen
        var moviesByGen = _repository.GetByGen(gen);

        //render partial view
        return PartialView(moviesByGen);
    }

查看 SearchByGen

@model IEnumerable<MvcMovies.Models.Movie>
@{
   ViewBag.Title = "Search By Gen";
 }

<script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.js")" type="text/javascript"></script>

<link href="@Url.Content( "~/content/themes/base/jquery-ui.css")" rel="Stylesheet" type="text/css" />

<script type="text/javascript">

$(document).ready(
    function () {

        var dropDownSelectedDefault = $("#TotalGen option:selected").text();
        $("#viewPlaceHolder").load("/Movie/SearchByGenGetResult", { gen: dropDownSelectedDefault });

        //$("input#search").click(
        $("#TotalGen").change(
            function () {
                var dropDownSelected = $("#TotalGen option:selected").text();
                $("#viewPlaceHolder").load("/Movie/SearchByGenGetResult", { gen: dropDownSelected });
            }
        );
    }
);    
</script>
<h2>Search By Gen</h2>
<div>
@Html.DisplayName("Genere ")
@Html.DropDownList("TotalGen")
</div>
<div id="viewPlaceHolder"></div>

部分视图 SearchByGenGetResult（未显示，经典脚手架列表视图）

Answer 1

您可以使用带有 FormMethod.Get 的表单来执行此操作，以便生成正确的 url（并添加到浏览器历史记录中）。你只需要一种方法，你应该使用视图模型来表示你想在视图中显示的内容

public class MovieVM
{
  public string Genre { get; set; }
  public SelectList GenreList { get; set; }
  public IEnumerable<Movie> Movies { get; set; }
}

public ActionResult Index(string genre)
{
  var genreList = _repository.GetGenrs(); // assume this returns IEnumerable<string>
  genre = genre ?? genreList.First();
  MovieVM model = new MovieVM
  {
    Genre = genre,
    GenreList = new SelectList(genreList),
    Movies = _repository.GetByGen(genre)
  };
  return View(model)
}

@model MovieVM
....
@using (Html.BeginForm("Index", "Movie", FormMethod.Get))
{
  @Html.LabelFor(m => m.Genre)
  @Html.DropDownListFor(m => m.Genre, Model.GenreList)
  <input type="submit" value="Search" />
}
<div id="movies">
  @foreach (var movie in Model.Movies)
  {
     ....
  }
</div>

或者，如果您想使用 ajax（可能没有太多性能优势，因为 html 的大部分都在电影列表中），您将需要使用 History.js or a similar plugin as described in this answer 及其关联链接

Answer 2

首先，

Architecture can be change to your project But you can look these title;

什么是防伪令牌？（这里的例子：include antiforgerytoken in ajax post ASP.NET MVC）
什么是捆绑？
你也可以看看这个例子(include antiforgerytoken in ajax post ASP.NET MVC)

第二题答案;

public PartialViewResult SearchByGenGetResult(string gen)
{
    //select movies by gen
    var moviesByGen = _repository.GetByGen(gen);

    //render partial view
    return PartialView(moviesByGen);
}

查看脚本；

var dropDownSelected = $("#TotalGen option:selected").text();
   var url = '@Url.Action("SearchByGenGetResult", "Home")/' + dropDownSelected ;
   $('#viewPlaceHolder').load(url);

此处示例：(Render Partial View Using jQuery in ASP.NET MVC)

从 View 和 ajax 路由映射 PartialView

Route-map PartialView from View and ajax

asp.net

asp.net-mvc

jquery

routes

asp.net-mvc-partialview