0

我有一个使用模型的局部视图。部分视图是空的，除了一个文本框和一个按钮。

用户将在文本框中键入一个值并单击该按钮。

我想使用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>

任何帮助将不胜感激。谢谢！

4

2 回答 2

2

本文将为您提供帮助，只需按照他们的做法并将他们的概念应用到您的代码中：Updating Partial Views with Unobtrusive AJAX in MVC 3

于 2012-09-12T01:17:34.017 回答
1

为您的 Result Div 提供一个 ID，以便我们稍后通过 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方法从我们的搜索键返回 Product 类的集合。

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

我们在这里所做的是，当用户单击搜索按钮时，我们获取搜索键并调用搜索操作方法，该方法将返回JSON格式的产品列表。我们正在遍历JSON响应中的项目并创建li项目并将其添加到ul元素中。

确保页面中包含 jQuery。

于 2012-09-12T01:33:54.793 回答