0

ASP.Net MVC3Webアプリケーションを開発しています。私のRazorビューの1つには、いくつかのテキストボックスとドロップダウンリストが含まれています。ユーザーがドロップダウンリストからオプションを選択した場合、ポストバックなしでドロップダウンリストの下に表示するには、部分ビューなどが必要です。

問題は、部分ビューのJQueryの非表示と表示ほど簡単ではありません。ユーザーがドロップダウンリストからオプションを選択すると、そのオプションをコントローラーのメソッドに送信する必要があります。このオプションに基づいてロジックを作成し、一部のデータを部分ビューに返します。

私はAJAXの経験があまりありませんが、これが私の問題を解決するために使用する必要のあるテクノロジーだと感じています。

誰かが私が上で説明したものに似たものをコーディングしなければならなかったことがありますか？もしそうなら、AJAXは私が使用する必要があるものですか？

また、誰かが私が助けるために見ることができるチュートリアルやコードスニペットを知っているなら、それは大いにありがたいです。

ありがとう。

アップデート

私はライアンの答えに従いましたが、残念ながら私はまだいくつかの問題を抱えています。次のJavaScriptファイルを作成しました。これは、ビューで参照されます。

$(document).ready(function () {

$("#myDDL").change(ChangeEventOfDDL);

function ChangeEventOfDDL(){
var dropDownValue = $('#myDDL').val();
//alert(dropDownValue);
$.ajax({ type: "GET",
       url: '@Url.Action("SomePartialView","testAjax")',
       data: {
           id: dropDownValue
       },
       success: function(data) {
             $('#someDivToLoadContentTo').html(data);
       }
    });
}

});

意見

    <select id="myDDL">
    <option></option>
    <option value="1">F1</option>
    <option value="2">F2</option>
    <option value="3">ST1</option>
    <option value="4">ST2</option>
    </select>


<div id="someDivToLoadContentTo">

</div>

私のコントローラーは次のようになります

public class testAjaxController : Controller
{
    //
    // GET: /testAjax/

    LocumEntities context = new LocumEntities();

    public ActionResult SomePartialView(int id)
    {
        var test = "Hello World";

        return View(test);
    }
}

ただし、私のメソッド「SomePartialView」はヒットしません。誰かが理由を知っていますか？

ありがとう。

4

3 に答える 3

6

はい、Ajaxはここで使用するのが最も簡単なものです。優れたAjaxチュートリアルはたくさんありますが、Ajaxが行うのは事実上バックグラウンドPOSTであるため、既存のページ内を除いて、MVCで通常行うすべてのことを実行できることを覚えておいてください。

これを機能させる方法は、コードを次のようにすることです。

public class SomeController{
    public ActionResult SomePartialView(){
         // Do some logic
         return View("SomePartial");
    }
}

Ajaxは次のようになります。

function ChangeEventOfDDL(){
    $.ajax({
           url: '@Url.Action("SomePartialView","Some")',
           success: function(data) {
                 $('#someDivToLoadContentTo').html(data);
           }
    });
}

それが少なくとも少しは役立つことを願っています。

重要なのは、Ajaxを使用して、クエリ文字列として渡されるデータオブジェクトを関数に追加できることです。これは、ajaxを使用してページから値を非常に簡単に送信できることを意味します。上記の例を使用すると、Javascriptは次のようになります。

function ChangeEventOfDDL(){
    var dropDownValue = $('#ddl').val();
    $.ajax({
           url: '@Url.Action("SomePartialView","Some")',
           data: {
               id: dropDownValue
           }
           success: function(data) {
                 $('#someDivToLoadContentTo').html(data);
           }
    });
}

Id値は、MVCクラスのメソッドのパラメーターにリンクされています。

public class SomeController{
    public ActionResult SomePartialView(int id){
         // Do some logic 
         var model = MakeModelWithSupplierId(id);
         return View("SomePartial",model);
    }
}

そして、ドロップダウンからの値が入力されたインタラクティブな部分ビューがあります。

于 2012-07-10T09:41:52.173 に答える
2

コントローラは部分ビューを返すこともできるため、次の操作を実行できます。

$('#idofyourdropdown').change(function () {
 var theValue = $(this).val();

  $.post('@Url.Action("Action","Controller")', {nameOfParameter: theValue, function(data) {
     $('#divWhereYouWantToAttachData').html(data);
  });
});

ドロップダウンが発生したら、選択した値を目的のコントローラーアクションに送信します。これchangeにより、値が部分ビューに渡され、レンダリングされたhtmlが返されます。htmlはdatavarで受信され、必要に応じてdomにアタッチできます（これについては、jQueryのドキュメントを参照してください）。

于 2012-07-10T09:43:13.860 に答える
1

これは一般的な使用例です。

あなたがする必要があるのは

  • 必要なパラメーターを取得できるコントローラーメソッドを作成します（実行する前にMVCモデルのバインドについてお読みください）
  • フォームから必要なデータを収集し、新しいコントローラーメソッドを呼び出して、以下の結果をレンダリングするjavascriptを記述します。

jQueryでは次のようになります。

$("#yourDIV").load('/area/controller/method', { property1: 'asasd', property2: 'asdasdadfa'})

この呼び出しの2番目のパラメーターは、フォームから収集したデータに基づいて準備する必要があります。（方法がわからない場合は、JavaScriptを学習してください）

于 2012-07-10T09:42:22.770 に答える