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

この記事は、彼らが何をするかに従って、同じことをコードに適用するのに役立ちます: MVC 3 で目立たない AJAX を使用して部分ビューを更新する

于 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形式で返します。JSONResponse内のアイテムを繰り返し処理し、アイテムを作成liして要素に追加していulます。

ページに jQuery が含まれていることを確認します。

于 2012-09-12T01:33:54.793 に答える