のasp.net MVCで_layoutページからAjaxの検索ポップアップ

私はコントローラのアクションを以下のビューきのasp.net MVCで_layoutページからAjaxの検索ポップアップ

public ActionResult Dashboard() 
    { 
     RepositoryClass sample= new RepositoryClass(); 
     ViewBag.listDetails = sample.GetDetails(null, null); 
     return View(); 
    }

ダッシュボードビュー

@{ 
    ViewBag.Title = "Dashboard"; 
    Layout = "~/Views/Shared/_ayout.cshtml"; 
} 

<table> 
    <thead> 
     <tr> 
      <th>ID</th> 
     </tr> 
    </thead> 
    <tbody> 
    @foreach (var item in ViewBag.listDetails) 
    { 
     <tr> 
      <td>@item.ID</td> 
     </tr> 
    } 
</table>

だから私は、このために、ポップアップ検索を追加して検索しますページを更新せず、結果、さらに

私は_layout PAGにポップアップ検索フォームを追加しました

<!DOCTYPE html> 
<html> 
<head> 
     @Styles.Render("~/Content/css")   
     @Scripts.Render("~/bundles/modernizr") 
    </head> 
    <body> 

     <!-- Begin page --> 
     <div id="wrapper"> 

      <div class="content-page"> 
       <div class="content"> 
        <div class="container"> 
         @RenderBody() 
        </div> 
       </div> 
      </div> 
     </div> 


     @Scripts.Render("~/bundles/jquery") 
     @RenderSection("scripts", required: false)    

      <form role="form" class="sss"> 
       <h3 class="panel-title text-dark text-center">Select Date Range</h3> 
       <input type="text" id="startdate" name="startdate" class="inn"> 
       <input type="text" id="enddate" name="enddate" class="inn"> 
       <button id="btnSearch" type="button" class="ss">Search</button>       
      </form> 

</body> 
</html> 

<script type="text/javascript"> 

    $(document).ready(function() { 
     $('#btnSearch').click(function() { 
      alert("button clicked"); 
      $.ajax({ 
       type: "POST", 
       url: "/Home/SearchbyDates", 
       contentType: "application/json; charset=utf-8", 
       data: { startdate : document.getElementById('startdate').value, enddate: document.getElementById('enddate').value, }, 
       dataType: "json", 
       Success: function (response) 
       { 
        alert("Success"); 
        $('table tbody').html(response); 

       }, 
       error: function() 
       { 
        alert("error"); 
       } 
      }); 
      return false 

     }); 
    }); 
</script>

を次のようにeはその後、私は、検索結果を取得し、ページに

public ActionResult Dashboard() 
    { 
     RepositoryClass sample= new RepositoryClass(); 
     ViewBag.listDetails = sample.GetDetails(null, null); 
     return View(); 
    } 

    [HttpPost] 
    public ActionResult SearchbyDates(DateTime? startdate , DateTime? enddate) 
    { 
     RepositoryClass sample= new RepositoryClass(); 
     ViewBag.listDetails = sample.GetDetails(startdate, enddate); 
     return Json(ViewBag.listDetails , JsonRequestBehavior.AllowGet); 

    }

を更新せずに同じDashboardビューに表示しかし、私はbtnSearchボタンをクリックしたときに、私は私の警告を見ることができますし、次のコントローラのアクションを追加しましたここに置くが、私はこれをデバッグするときにSearchbyDatesメソッドに指示しない。

エラー警告のみが表示されます。私のアプローチで何が間違っている

出典

2016-10-07 kez

削除 'contentTypeの両方ごDashboard()とSearchbyDates()方法でViewBagを使用して、むしろという、モデルを渡すことをお勧めします：「アプリケーション/ JSON。あなたのデータをひどく傷つけることはありません –

@StephenMueckeはメソッドへの指示を行いますが、開始日の終了日の値はnullです – kez

@StephenMueckeここで私のデータを酷評することができますか？ – kez

コードに2つの主なエラーがあります。

まず、ajaxコードからcontentType: "application/json; charset=utf-8",を削除する必要があります。ビューを更新するために、成功コールバックのコードが

success: function (response) { 
    $('tbody').empty(); // should give the tbody element an id and use that as the selector 
    $.each(response, function(index, item) { 
     var row = $('<tr></tr>'); // create table row 
     row.append($('<td></td>').text(item.ID)); // add table cell 
     ... // append td elements for any other properties of your model 
     $('tbody').append(row); 
    }) 
}

する必要がありますので、または代わりに、あなたが data: JSON.stringify({ startdate : ... }),を使用することができますが、データ

セカンドを文字列化する必要がない、あなたの方法は、jsonを返します

また、あなたはdataType: "html",に、dataType: "json"を変更する必要があり、その場合には、テーブルの部分図を、返すことができ、かつ

success: function (response) 
{ 
    $('.container').html(response); // suggest you use id="container" rather than class="container" 
}

、その後、成功コールバックでCHA NGE

[HttpPost] 
public ActionResult SearchbyDates(DateTime? startdate , DateTime? enddate) 
{ 
    RepositoryClass sample = new RepositoryClass(); 
    ViewBag.listDetails = sample.GetDetails(startdate, enddate); 
    retirn PartialView("Dashboard"); 
}

にコントローラのメソッドは、しかし私は、あなたが表示するには、

出典

2016-10-07 09:55:08

私はちょうどいいですか？私が2番目のアプローチをしているのなら、html（レスポンス）; '$（ 'tbody'）。 – kez

違いはありませんが、 'id'属性を使用して' 'として生成し、' $（ '＃xxx'）を使用することをお勧めします。 'あなたが望むものまで） –

あなたの_Dashboard.cshtml'ビューは既に'

と ' '要素をレンダリングしているので、' $（'。container '）を使うべきです。アップデートを参照してください） –

のasp.net MVCで_layoutページからAjaxの検索ポップアップ

答えて

関連する問題