CODEWITHSUNDEEP
javascriptajaxasp.net-mvcasp.net-mvc-partialview
LoverBugs
LoverBugs

Reputation: 127

Send data to partial view

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.

Upvotes: 1

Views: 3114

Answers (1)

Viktor Bahtev
Viktor Bahtev

Reputation: 4908

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>

[ ... ]

Upvotes: 2

Related Questions