发送数据到局部视图

Question

Want to implement search functionality using partial view for the returned data.

My 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>

Now, how to pass these values to partial view ?? - And how to load partial ??

I have made this function :

$(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);
            }
        });
    }
});

But i realize that this way i should use JSON.

Answer 1

You must implement Search action in your default controller to return PartialViewResult and then in the success callback of the ajax request you will receive the desired html.

The Ajax call:

[ ... ]

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);
    }
});

[ ... ]

Search Action in HomeController :

public ActionResult Search(string data)
{
    // Here use data, call some service or whatever
    MyModel myModel = myService.GetMyModel();

    [ ... ] 

    return PartialView(someModel);
}

Search.cshtml partial view:

@model MyModel

@{
    Layout = null;
}

<h1>@Model.Prop1</h1>
<h2>@Model.Prop2</h2>

[ ... ]