将数据发送到部分视图

时间:2015-09-15 18:34:54

标签: javascript ajax asp.net-mvc asp.net-mvc-partialview

希望使用部分视图为返回的数据实现搜索功能。

我的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。

1 个答案:

答案 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>

[ ... ]