ボタンがあります。ボタンをクリックしたときに新しいビューをルーティングします。ボタンは以下のようなものです:
<button type="button" id="btnSearch" class="btn btn-warning" style="height:35px;width:120px"> <i class="fa fa-search" aria-hidden="true"></i> <translate>Search</translate> </button>
ボタンがクリックされたとき、以下のメソッドよりも実行:
$('#btnSearch').click(function () {
return $.ajax({
url: '@Url.Action("test", "ControllerName")',
data: { Name: $('#Name').val() },
type: 'POST',
dataType: 'html'
});
});
私のコントローラーのアクションは以下の通りです:
public ActionResult test(string CityName) {
ViewBag.CityName = CityName;
return View();
}
プログラムをデバッグすると、コントローラーのアクションにフローが流れました。ただし、インデックスWebページはテストビューページにルーティングされません。エラーは発生していません。この状態で何ができますか?
ページを更新したい場合:
コントローラ:
public ActionResult Index()
{
return View();
}
public ViewResult Test()
{
ViewBag.Name = Request["txtName"];
return View();
}
Index.cshtml:
@using (Html.BeginForm("Test", "Home", FormMethod.Post ))
{
<input type="submit" id="btnSearch" class="btn btn-warning" style="height:35px;width:120px" value="Search"/>
<label>Name:</label><input type="text" id="txtName" name="txtName" />
}
Test.cshtml:
@ViewBag.Name
=============================================
ページを更新したくない場合:
コントローラ:
public ActionResult Index()
{
return View();
}
[HttpPost]
public PartialViewResult TestAjax(string Name)
{
ViewBag.Name = Name;
return PartialView();
}
Index.cshtml:
<input type="button" id="btnSearch" class="btn btn-warning" style="height:35px;width:120px" value="Search"/>
<label>Name:</label><input type="text" id="txtName" name="txtName" />
<script>
$('#btnSearch').click(function () {
$.ajax({
url: '@Url.Action("TestAjax", "Home")',
data: { Name: $("#txtName").val() },
type: 'POST',
success: function (data) {
$("#divContent").html(data);
}
});
});
</script>
TestAjax.cshtml:
@ViewBag.Name