来自 View 和 ajax 的路线图 PartialView答案

【问题标题】：Route-map PartialView from View and ajax来自 View 和 ajax 的路线图 PartialView
【发布时间】：2015-10-23 08:13:09
【问题描述】：

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

问题是：

架构正确吗？
如何通过调用视图在 URL 中映射 PartialView 的值（例如，如果我通过 DropDown 选择搜索 "horror"，我希望在 URL 中看到类似 "SearchByGen/horror" 的内容，我想正确地看到结果和选择的下拉选项通过"SearchByGen/horror"访问页面）

谢谢大家，现在是代码：

控制器代码：

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（未显示，经典脚手架列表视图）

【问题讨论】：

标签： jquery asp.net asp.net-mvc routes asp.net-mvc-partialview

【解决方案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 或 @987654322 中描述的类似插件@ 及其相关链接

【讨论】：

【解决方案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)

【讨论】：