ASP.NETのMVC3同じビューでフォームを送信した後のデータ結果を表示

Question

現在、MVC3 ASP.NETアプリケーションで作業しています。ユーザーはフォームにいくつかの単純なテキストボックスを入力してから、送信ボタンを押します。

送信ボタンをクリックすると、コントローラはテキストボックスの入力を使用し、LINQ to SQLを使用してストアドプロシージャクエリにSQLデータベースを呼び出し、データテーブルを返します。現在のところ、送信ボタンは新しいビューページの表にデータを表示しますが、これを変更して、ページを更新せずに送信ボタンのすぐ下にロードするように生成されたデータテーブルを持つようにしたいと考えています。

私は、AJAXまたはJqueryのどちらかを使用する必要があることを理解しています。ユーザーを新しいページに送信せずにデータを表示する方法を理解するのは難しいです。ビューページで

フォーム：

<% using (Html.BeginForm("RunQuery","RecentActivity")) 
    {%> 

    <fieldset> 
     <legend></legend> 
     <p> 
      <label for="Name">Name:</label> 
      <%= Html.TextBox("Name") %> 
      <%= Html.ValidationMessage("Name", "*") %> 

     </p> 
     <p> <label for="StartDate"> Start Date:</label> 
      <%= Html.TextBox("StartDate")%> 
      <%= Html.ValidationMessage("StartDate", "*") %> 

      <label for="EndDate"> End Date:</label> 
      <%= Html.TextBox("EndDate") %> 
      <%= Html.ValidationMessage("EndDate", "*") %> 
     </p> 

     <p> 
      <input type="submit",id="submit", value="Submit" /> 
     </p> 

     </fieldset> 
<% } %> 

コントローラー：

ModelDataContext db = new ModelDataContext(); 
    [HttpPost] 

    public ActionResult RunQuery(string Name,string StartDate, string EndDate) 
    { 

     var results= db.lastndays(Name, StartDate, EndDate); 
     return View(results.ToList()); 
    } 

すべてのヘルプは素晴らしいことだ、ありがとう。

Answer 1

私はPOSTからページ名を分割しますコントローラ

[HttpPost] 
    public JsonResult RunQuery(string Name,string StartDate, string EndDate) 
    { 
     var results= db.lastndays(Name, StartDate, EndDate); 
     if(/*there are results*/){ 
     return Json(new{results=results.ToList()}); 
     }else{ 
      return Json(new{results="error"}); 
     } 
    } 

Answer 2

に

$(":submit").click(function(e){ 
e.preventDefault(); //this will prevent the form from submitting 
var $name=$(":input[name='Name']"); 
var $StartDate=$(":input[name='StartDate']"); 
var $EndDate=$(":input[name='EndDate']"); 
//if you are using unobtrusive validation 
if($('form').valid()){ 
$.post("/",{Name:$name,StartDate:$StartDate,EndDate:$EndDate},function(data){ 
    if(data.results!='error') 
     console.log(data.results); 
    },'json'); 
}else alert('form not valid'); 
}); 

を試すことができます。また、jqueryで処理する方が簡単なようにフォームに名前を付けます。これにより、フォーム全体をシリアル化し、各データを個別に取得する必要がなくなります。

次にHTMLテーブルにクエリやスタイル、それからの結果を取る部分図を作成

$(":submit").live('click', function() { 
    $.ajax({ 
     url: "/RecentActivity/RunQuery", 
     type: "POST", 
     data: $("#QueryForm").serialize(), 
     error: function (data) { 
      var errorMessage = $.parseJSON(data.responseText); 
     }, 
     success: function (data) { 
      if (data) { 
       $('#results-div').html(data); 
      } 
      else { 
       $('#results-div').html('no data'); 
      } 
     } 
    }); 

    return false; 
}); 

クリックでフォームを送信するために、このようなjqueryのコールを使用しています。あなたの部分的なビューがhtmlを返すようにして、成功ハンドラの呼び出しを使ってdiv内のhtmlを置き換えることができます。コントローラ用のコードについて