1

私は現在、ユーザーがフォームのいくつかの単純なテキスト ボックスに入力してから送信ボタンを押す必要がある 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());  
    }

どんな助けでも素晴らしいでしょう、ありがとう。

4

2 に答える 2

1

あなたが試すことができます

$(":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');
});

コントローラーで

[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"});  
        }
    }
于 2012-05-11T14:57:14.480 に答える
0

ページ名を POST から分割します。また、jquery で扱いやすいように、フォームに名前を付けます。これにより、フォーム全体をシリアル化することもでき、各データを個別に取得する必要がなくなります。

次に、このようなjquery呼び出しを使用して、クリック時にフォームを送信します

$(":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;
});

クエリから結果を取得し、それを HTML テーブルにスタイル設定する部分ビューを作成します。そうすれば、部分ビューが html を返し、成功ハンドラーで呼び出しを使用して div の html を置き換えることができます。

于 2012-05-11T19:25:47.933 に答える