ASP.NET内のJqueryとAjax

Question

のdivを更新する方法私のアプリでは、Jqueryで文字列値を含む投稿要求を送信してから、コントローラで渡された文字列値を使用してAPIからデータを取得しています。

次のコントローラは、APIのデータを含むビューとモデルを返します。モデルからのそのデータの中に、少数のテキストボックスの値を入れたい。

主な問題は、モデル値でそのdivを更新する方法がわかりません。私がjqueryとajaxなしでポストフォームを使用したときは動作しますが、非同期にしたいのです。ポスト要求に

のJSスクリプト：

<script type="text/javascript"> 

    $(document).ready(function() { 

     $('#btn').click(function() { 

      var data1 = $('#textBox').val(); 

      $.ajax({ 
       url: '/Home/Fill', 
       type: 'POST', 
       dataType: 'string', 
       data: { number:data1 }, 
       success: function (data) { 

       } 

      }); 

     }); 
    }); 

コントローラー：

<div id="target"> 

    <h1>Number:</h1> 
    <input type="text" value="@Html.DisplayFor(m => m.Num)" id="Number" /> 

    <br /> 

    <h1>Company name:</h1> 
    <input type="text" value="@Html.DisplayFor(m=>m.CompanyName)" id="CompanyName" /> 

    <br /> 

    <h1>Street Address</h1> 
    <input type="text" value="@Html.DisplayFor(m=>m.StreetAddress)" id="Address" /> 

</div> 

Answer 1

この時点では、ASP.NET MVCの意味での「ビューとモデル」では実際には作業していません。JavaScript/jQueryを使用してDOMを更新するだけです。あなたはそれはあなたが持っているデータに依存しないと、ここで完全に行われている方法：

success: function (data) { 

} 

だから何がdataには？これはおそらく、あなたがdataでHTMLを持っていることも、ページ全体を意味

：その場合は

return View("Index",Info); 

、あなたはおそらくdataの必要な情報を選択します。 あなたはすでに表示されている同じページですか？そうであれば、既に持っているHTMLをページからHTMLに置き換えることができます。おそらく、このような何か：

var newTarget = $('#target', data).html(); 
$('#target').html(newTarget); 

dataからdiv id="target"のHTMLを取得し、その後、現在のページに同じdivに設定する必要があります。

dataのHTMLが現在のページと異なる場合は、あなたが行っていることを別のものにする必要があります。しかし、最終的には同じ概念です。ページ内のHTML要素を新しい要素に置き換えることによる副作用は、古い要素のイベントバインディングが失われることに注意してください。

---

これは、これを行う最も効率的な方法ではありません。 ページ全体をに戻すと、更新されたモデルにはオーバーヘッドが多く含まれているため、無視するだけです。これはプレーンなオブジェクトを返すことができ、プロジェクト内のWebAPIのコントローラを使用してに見て良い機会、次のようになります。

return Info; 

あるいは単にあなたのMVCコントローラからJsonResultを返すことはトリックを行うだろう：

return Json(Info); 

このように、クライアント側コードのdata変数には、この不要なHTMLがすべて含まれていませんが、代わりにInfoオブジェクトの情報がのになります。これで、input要素の値を直接更新することができます。おそらく次のようなものでしょう：

$('#Number').val(data.Num); 
$('#CompanyName').val(data.CompanyName); 
$('#Address').val(data.StreetAddress); 

どのようにそれにアプローチしたいですか。しかし、あなたは間違いなくオプションを持っており、物を簡素化するためにリファクタリングをうまくやることができます。

Answer 2

は、あなたが使用する必要があります：Indexビュー内のモデル値と

[HttpPost] 
    public ActionResult Fill(string number) 
    { 

     CompanyInfo Info = new CompanyInfo(); 

     //Here some API actions 

     return View("Index",Info); 
    } 

本部success: function(data) AJAXリクエスト内のリスナー。 dataを取得し、divに解析します。