ユーザーがAsp.Net MVCアプリケーションで検索をクリックした後にのみ結果を表示する方法

Question

Index.cshtmlビュー、Filter.cshtml部分ビュー、およびResults.cshtml部分ビューがあります。私はResults.cshtmlの腹水ビューの値をの後で、ユーザーがIndex.cshtmlとFilter.cshtmlのコンテンツとともに検索ボタンをクリックした後に見たいと思っています。検索ボタンをクリックした後、Results.cshtmlのコンテンツを他のコンテンツと共に見るためにページをどのように構造化しますか？

これは私が私のIndex.cshtmlビュー

@{ 
ViewBag.Title = "Index"; 
Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

@{ Html.RenderPartial("Filter"); } 
@{ Html.RenderPartial("Results"); } 

Answer 1

のためにあなたはビューモデル使用することができなければならないものである。そして、

public class MyViewModel 
{ 
    public string Filter { get; set; } 
    public string Results { get; set; } 
} 

と：

public class HomeController: Controller 
{ 
    public ActionResult Index() 
    { 
     return View(new MyViewModel()); 
    } 

    [HttpPost] 
    public ActionResult Index(MyViewModel model) 
    { 
     model.Results = "this is the result"; 
     return View(model); 
    } 
} 

とビューでの：

@model MyViewModel 
@{ 
    ViewBag.Title = "Index"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

@{ Html.RenderPartial("Filter"); } 
@if (Model.Results != null) 
{ 
    @{ Html.RenderPartial("Results"); 
} 

とテンプレートを使用して：

@model MyViewModel 
@{ 
    ViewBag.Title = "Index"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

@Html.EditorFor(x => x.Filter) 
@if (Model.Results != null) 
{ 
    @Html.DisplayFor(x => x.Results) 
} 

Answer 2

あなたはjQueryのを使用できる場合は、あなたのビューでは、この

ような何かを行うことができ、あなたが結果

Htmlの

のコンテナを持つことができます

<div id="result-container"></div> 

jQueryを使用すると、コンテンツwhアンは、JavaScriptの

$(document).ready(function() { 
    $('#submit').click(function() { 
     $.ajax({ 
      type: 'GET', 
      url: 'YourController/ActionThatReturnPartialView', 
      data: { 
       // your form data here 
      } 
     }).done(function (html) { 
      // place the partial view to the container 
      $('#result-container').html(html); 
     });    
    }); 
}); 

コントローラ

public class YourController 
{  
    public ActionResult ActionThatReturnPartialView() 
    { 
     // get parameters and do some logic 
     return PartialView(model);  
    }  
} 

をクリックすると提出します