2012-04-26 9 views
0

私のカミソリページに "btnGetAddress"というボタンがあります。このボタンのclikでは、私のviewItemsオブジェクトを私のViewページに表示させるためにJqueryを呼び出しています。RazorViewページへのJqueryから複数のレコードを取得する方法

「btnGetAddress」をクリックすると、私の"JsonResult GetAddresses()"に当てられ、Jquery (success: function (data))の中のレコードを取り出すことができます。このデータには複数のアドレスレコードがあります。しかし、私はこのデータを私の見解にどのように取り入れるべきかわかりません。私のデータが私のビューに表示されるのを助けてください。

私のページが読み込まれると、 "btnGetAddress"ボタンだけが表示されます。 btnGetAddress上のユーザーのクリックは、それが取得するために呼び出された)データベースからすべてのアドレスレコードをフェッチし、以下の貼り付け

$("#btnGetAddress").click(function() { 

       debugger; 
       var selected = $("#ddlType").val(); 
       if (selected == "") 
       { selected = 0; } 
       var dataToSend = { 
        SelectedTypeId: selected 
       }; 
       $.ajax({ 
        type: "GET", 
        url: '@Url.Action("GetAddresses", "Content")', 
        data: { SelectedTypeId: selected }, 
        success: function (data) { 
         debugger; 

        }, 

        error: function (error) { 
         var verr = error; 
         alert(verr); 
        } 

       }); 

は私化するJsonResult GetAddresses(あるページで、レコードの各セットを表示する機能をクリックしてjqueryのを呼び出しますaddressItems

public JsonResult GetAddresses() 
     { 
    model.AddressItems = AddressService.RetrieveAllAddress(); 
// My AddressItems is of type IEnumerable<AddressItems> 


return Json(model.AddressItems, JsonRequestBehavior.AllowGet); 
} 

He私の剃刀のページです。アドレスレコードが表示されます。

........................ 

    <input type="submit" id="btnGetAddress" name="btnSubmit" value="Show Addresses" /> 

    if (!UtilityHelper.IsNullOrEmpty(Model.AddressItems)) 
    { 

     foreach (var AddressRecord in Model.AddressItems) 
     { 
    <fieldset > 
     <legend style="padding-top: 10px; font-size: small;">Address Queue(@Model.NumRecords) 
     </legend> 
     <table> 
      <tr> 
       <td> 
        <span>Index</span> 

       </td> 
       <td> 
       </td> 
       <td> 
        <input type="submit" id="btnDelete" name="btnSubmit" value="X" /> 
        <br /> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <span>Address1</span> 
        <br /> 
       </td> 
       <td> 
        @Html.EditorFor(model => AddressRecord.Address) 
        @Html.ValidationMessageFor(model => AddressRecord.Address) 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <span>Description</span> 
        <br /> 
       </td> 
       <td> 
        @Html.EditorFor(model => AddressRecord.Description) 
        @Html.ValidationMessageFor(model => AddressRecord.Description) 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <input type="submit" id="btnSave" name="btnSubmit" value="Save" /> 
       </td> 
       <td> 
        <input type="submit" id="btnDelete" name="btnSubmit" value="Delete" /> 
       </td> 
      </tr> 
     </table> 
    </fieldset> 
     } 
     } 

    <fieldset> 

また、私の目的を達成するための良い方法はありますか?

答えて

1

ajaxを介してデータを取得しているので、jqueryテンプレートエンジンを使用する必要があります。基本的にはデータのあなたがある方法を取得し、成功にあなたは

<script language="javascript" type="text/javascript"> 
    $(function() { 
     $.getJSON("/getprojects", "", function (data) { 
      $("#projectsTemplate").tmpl(data).appendTo("#projectsList"); 
     }); 
    }); 
</script> 

<script id="projectsTemplate" type="text/html"> 
    <section> 
     <header><h2>Projects</h2></header> 
     <table id="projects"> 
      <th>Name</th> 
      {{tmpl(items) "#projectRowTemplate"}} 
     </table> 
    </section> 
</script> 

<script id="projectRowTemplate" type="x-jquery-tmpl"> 
    <tr> 
    <td><a href="/show/${id}">${name}</a></td> 
    </tr> 
</script> 

<div id="projectsList"></div> 

ような何かを今すぐ各テンプレートエンジンは異なっているが、上記のあなたがJSONを返すようにしたい場合は、

+0

Jquery1.5.1.js内でオブジェクトがプロパティまたはメソッド 'tmpl'をサポートしていません – Millar

+0

https://github.com/jquery/jquery-tmplのjquery.tmplをダウンロードして追加しましたか? –

+0

すべてのライブラリをダウンロードして含めましたが、私はまだ同じエラーが発生しています "Microsoft JScriptランタイムエラー:オブジェクトがプロパティまたはメソッド 'tmpl'をサポートしていません" – Millar

0

を何ができるかのアイデアを提供しますあなたのコントローラのオブジェクトでは、ビューを文字列に変換してメッセージの一部として返さなければなりません。もしあなたがGoogleにこれを行うことができるいくつかの方法があります。

しかし、私は本当に難しい方法だと思っています。コントローラのJSONから取得したデータをMODELに入れて、モデルデータを渡してVIEWを返すのはなぜですか?方法。

関連する問題