Частичное представление с использованием модели, обновление с помощью Ajax

У меня есть частичное представление, в котором используется модель. Частичное представление пусто, за исключением текстового поля и кнопки.

Пользователь вводит значение в текстовое поле и нажимает кнопку.

Я хочу использовать Ajax для получения значения, введенного в текстовое поле, и выполнения поиска в базе данных. Затем с возвращенными данными обновите частичное представление с помощью модели.

Мой код до сих пор -

<input id="searchValue" type="text" />   
<input id="searchButton" type="submit" value="submit" />

<div>
@if(Model != null)
{
    foreach(var stuff in Model.ListOfStuff)
    {
        <li>@stuff.value</li>  
    }
}
</div>

Любая помощь будет принята с благодарностью. Спасибо!


model ajax asp.net-mvc asp.net-mvc-partialview
person A Bogus    schedule 11.09.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Дайте идентификатор вашему Result Div, чтобы нам было легко сделать это через jQuery позже для обновления.

<div id="resultDiv">
    <ul></ul>
</div>

Теперь добавьте этот код javascript

$(function(){
  $("#searchButton").click(function(e){
     var key=$("#searchKey").val();
     $.getJSON("@Url.Action("search","Items")/"+key,function(data){
        var items="";
        $.each(data,function(index,item){
            items+="<li>"+item.Name+"</li>;
        });
        $("#resultDiv>ul").html(items);
     });
  });
});

Теперь у нас должен быть метод действия, который принимает ключ поиска и возвращает результат в формате JSON.

public ActionResult Search(string id)
{
  List<Product> productList=repo.GetSearchResultFromKey(id);
  return Json(productList,JsonRequestBehaviour.AllowGet);
}

Предположим, что у нас есть модель представления с именем Product, как показано ниже, и наш метод GetSearchResultFromKey возвращает коллекцию классов продуктов из нашего ключа поиска.

public class Product
{
  public string Name { set;get;}
}

Здесь мы делаем следующее: когда пользователь нажимает кнопку поиска, мы получаем ключ поиска и вызываем метод действия поиска, и метод возвращает список продуктов в формате JSON. Мы перебираем элементы в ответе JSON, создаем элементы li и добавляем их к элементу ul.

Убедитесь, что на странице есть jQuery.

person Shyju    schedule 12.09.2012

arrow_upward
2
arrow_downward

Эта статья поможет вам, просто следуйте тому, что они делают, и применяйте их концепции к вашему коду: Обновление частичных представлений с помощью ненавязчивого AJAX в MVC 3

person Display Name    schedule 12.09.2012