Question

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

用户将在文本框中键入一个值，然后单击按钮。

我想使用 Ajax 来获取文本框中键入的值，并对数据库执行搜索。然后返回数据，使用Model更新Partial View。

到目前为止我的代码 -

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

非常感谢任何帮助。谢谢！

Answer 1

本文将帮助您，只需按照他们的操作行事，并将相同的概念应用于您的代码：Updating Partial Views with Unobtrusive AJAX in MVC 3

Answer 2

为您的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);
     });
  });
});

现在我们应该有一个action方法接受搜索键并以JSON格式返回Result。

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。

使用模型的部分视图，使用Ajax更新它

2 个答案: