以下のようなコントローラがあります。RadioButtonを使用してビューをレンダリングする方法
public ActionResult Index()
{
return View(db.FEE_TYPES.ToList());
}
デフォルトでは、「インデックス」という名前のビューがレンダリングされます。しかし、私は私が見るには3つのラジオボタン
Index3
RadioButton1をクリックすると、インデックスがレンダリングされます。 RadioButton2をクリックすると、レンダーインデックス2 RadioButton3をクリックすると、レンダーインデックス3
どうすればよいですか？
コード参照からデモを作成しました。
まず、3つのプロパティを持つモデルを作成します。私はそのコントローラに名前RadioRenderControllerとコントローラを作成したモデルを作成した後
モデル
public class DemoModel
{
public string Radio1 { get; set; }
public string Radio2 { get; set; }
public string Radio3 { get; set; }
}
私はそのインデックスに4アクションメソッドを追加したメインビューを返します。
残りの3つのアクションメソッド[GetView1、GetView2、GetView3]は部分ビューを返します。
コントローラ
using System.Web.Mvc;
using WebApplication6.Models;
namespace WebApplication6.Controllers
{
public class RadioRenderController : Controller
{
// GET: RadioRender
public ActionResult Index()
{
DemoModel DemoModel = new Models.DemoModel();
return View(DemoModel);
}
public ActionResult GetView1()
{
return PartialView("_DemoView1");
}
public ActionResult GetView2()
{
return PartialView("_DemoView2");
}
public ActionResult GetView3()
{
return PartialView("_DemoView3");
}
}
}
ビュー
@model WebApplication6.Models.DemoModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function GetView1() {
$("#viewPlaceHolder").load("/RadioRender/GetView1");
}
function GetView2() {
$("#viewPlaceHolder").load("/RadioRender/GetView2");
}
function GetView3() {
$("#viewPlaceHolder").load("/RadioRender/GetView3");
}
</script>
</head>
<body>
<div>
@Html.RadioButtonFor(m => m.Radio1, "1", new { @onclick = "GetView1();" }) Radio1
</div>
<div>
@Html.RadioButtonFor(m => m.Radio1, "2", new { @onclick = "GetView2();" }) Radio2
</div>
<div>
@Html.RadioButtonFor(m => m.Radio1, "3", new { @onclick = "GetView3();" }) Radio3
</div>
<div id="viewPlaceHolder"></div>
</body>
</html>
の部分図
出力
あなたは、この[リンクを達成するためにjqueryのajax'と 'MVC部分view''の組み合わせを使用することができます]（https://stackoverflow.com/questions/1570127/render-partial-view-using-jquery-in-asp-net-mvc） 'oラジオボタンの「nchange」はajax呼び出しを行い、それに応じて部分表示をレンダリングします。 – Curiousdev
'$ .ajax'コールバックと' Html.RenderPartial'の 'success'部分は' View'ではなく 'return PartialView'で十分です。 '$（ 'radiobuttonid'）。change（...）'イベントハンドラを処理することができます。 –