希望使用部分视图为返回的数据实现搜索功能。
我的HTML:
<select id="searchSelect">
<option value="All">All</option>
<option value="Title">Title</option>
<option value="Category">Category</option>
<option value="ISBN">ISBN</option>
</select>
@Html.DropDownList("Categories", "Select Category")
<input type="text" id="SearchBy" placeholder="sometext" />
<a href="javascript:void(0);" class="search">Search</a>
现在,如何将这些值传递给局部视图? - 以及如何加载部分?
我已经完成了这个功能:
$(document).on("click", ".search", function () {
var searchBy = $("#searchSelect option:selected").val();
if (searchBy == "All") {
var text = $("#SearchBy").val();
$.ajax({
type: "POST",
url: "Search",
data: JSON.stringify({ "data": text }),
success: function (r) {
$(".load").html(r.data);
}
});
}
});
但我意识到这种方式我应该使用JSON。
答案 0 :(得分:2)
您必须在默认控制器中实施Search
操作才能返回PartialViewResult
,然后在ajax请求的成功回调中,您将收到所需的html。
Ajax 致电:
[ ... ]
var text = $("#SearchBy").val();
$.ajax({
type: "POST",
url: "Search",
contentType: "application/json", // Specify the content type
data: JSON.stringify({ "data": text }), // Here you pass data to the controller's action
success: function (response) {
$(".load").html(response);
}
});
[ ... ]
HomeController 中的搜索操作:
public ActionResult Search(string data)
{
// Here use data, call some service or whatever
MyModel myModel = myService.GetMyModel();
[ ... ]
return PartialView(someModel);
}
Search.cshtml 部分视图:
@model MyModel
@{
Layout = null;
}
<h1>@Model.Prop1</h1>
<h2>@Model.Prop2</h2>
[ ... ]