私はMVC3フレームワークが初めてです。だから私は練習して、jqueryを使ってCascadingドロップダウンリストを持つ方法を学ぼうとしていました. そして、Rick Anderson によるこのサンプルを見つけました: http://blogs.msdn.com/b/rickandy/archive/2012/01/09/cascasding-dropdownlist-in-asp-net-mvc.aspx
そこで、カスケード ドロップダウンリストを作成するために、このサンプルを使用して自分の Web サイトをカスタマイズしようとしました。これが私のコントローラーです：
private SelectList GetMakeSelectList()
{
var makeQry = from m in db.Car
orderby m.Make
select m.Make;
return new SelectList(makeQry.ToArray(), "Make");
}
public ActionResult MakeList()
{
if (HttpContext.Request.IsAjaxRequest())
return Json(GetMakeSelectList(), JsonRequestBehavior.AllowGet);
return RedirectToAction("Categories");
}
public ActionResult ModelList(string Make)
{
string make = Make;
var model = from s in db.Car
where s.Make == make
select s.Model;
if (HttpContext.Request.IsAjaxRequest())
return Json(new SelectList(
model.ToArray())
, JsonRequestBehavior.AllowGet);
return RedirectToAction("Categories");
}
public ActionResult Categories()
{
return View();
}
ここに私のモデルがあります：
public class Car
{
public int ID { get; set; }
public String Make { get; set; }
public String Model { get; set; }
public decimal Price { get; set; }
public String Edition { get; set; }
public String Type { get; set; }
public decimal Consumption { get; set; }
public decimal Acceleration { get; set; }
public decimal Horsepower { get; set; }
public bool? Convertible { get; set; }
}
public class MovieDBContext : DbContext
{
public DbSet<Car> Car { get; set; }
}
問題は次のとおりです。 ModelList メソッドの文字列 Make が null です。そのため、モデル クラスで手動で値を設定するのではなく、データベースだけで値を設定しようとしています。
私の推測では、SelectList(makeQry.ToArray(), "Make")、私が使用している選択された値のタイプは、期待されるものではありません。しかし、クエリに期待される型を渡す方法がわかりません。
そして、私はこれにJqueryを使用しています。助けていただければ幸いです。
更新：ここにビューがあります：
@model IEnumerable<Cars.Models.Car>
<script src="@Url.Content("~/Scripts/GetMake.js")"></script>
<script src="@Url.Content("~/Scripts/makeModel.js")"></script>
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/CategoriesStyle.css")" />
@using (Html.BeginForm("Categories", "Category", FormMethod.Post,
new { id = "CategoryFormID",
data_modelListAction = @Url.Action("ModelList"),
data_makeListAction = @Url.Action("MakeList")})) {
<div id="content">
<fieldset>
<legend>Advanced Search</legend>
<div class="myform">
<p>Search the car you're looking for in all details you can imagine right here!</p>
<div id="MakeDivID">
<label>Make</label>
<select id="MakeID" name="Make"></select>
</div>
<div id="ModelDivID">
<label>Model</label>
<select id="ModelID" name="Model"></select>
</div>
<button type="submit" id="SubmitID">Search</button>
</div>
</fieldset>
</div>
}
これは、ドロップボックスに入力してメソッドを呼び出す Jquery になります。
これは GetMake.js です
$(function () {
var URL = $('#CategoryFormID').data('makeListAction');
$.getJSON(URL, function (data) {
var items = "<option>Select a Car Make</option>";
$.each(data, function (i, make) {
if (make.Text.indexOf("\'") > -1) {
s = make.Text;
alert(s + ": Country.Value cannot contain \'")
}
items += "<option>" + make.Text + "</option>";
});
$('#MakeID').html(items);
});
});
そしてこれはmakeModel.jsです：
$(function () {
$('#ModelDivID').hide();
$('#SubmitID').hide();
$('#MakeID').change(function () {
var URL = $('#CategoryFormID').data('modelListAction');
$.getJSON(URL + '/' + $('#MakeID').val(), function (data) {
var items = '<option>Select a Model</option>';
$.each(data, function (i, model) {
items += "<option>" + model.Text + "</option>";
// state.Value cannot contain ' character. We are OK because state.Value = cnt++;
});
$('#ModelID').html(items);
$('#ModelDivID').show();
});
});
$('#ModelID').change(function () {
$('#SubmitID').show();
});
});
2 番目の更新: 私が探しているものではない結果について言及するのを忘れていました。その結果、最初のドロップボックスにすべての正しい値が表示され、そのうちの 1 つをクリックすると、2 番目のドロップボックスが表示されますが、ModelList() で Make object is null を渡していないため空です。
3 番目の更新: あなたが尋ねたように、これが私のルーティングです。これがあなたが探していたものであることを願っています。
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace Cars
{
// Note: For instructions on enabling IIS6 or IIS7 classic mode,
// visit http://go.microsoft.com/?LinkId=9394801
public class MvcApplication : System.Web.HttpApplication
{
public static void RegisterGlobalFilters(GlobalFilterCollection filters)
{
filters.Add(new HandleErrorAttribute());
}
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
);
}
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
// Use LocalDB for Entity Framework by default
Database.DefaultConnectionFactory = new SqlConnectionFactory(@"Data Source=(localdb)\v11.0; Integrated Security=True; MultipleActiveResultSets=True");
RegisterGlobalFilters(GlobalFilters.Filters);
RegisterRoutes(RouteTable.Routes);
}
}
}