2015-09-15 53 views
1

Хотите реализовать функцию поиска, используя частичный вид для возвращаемых данных.Отправка данных на частичный просмотр

Мой 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.

ответ

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> 

[ ... ] 
Смежные вопросы