MVC3ページのAJAXを使用したドロップダウンリストによるページの部分的なポストバックEF4

Question

私は国名をリストするドロップダウンリストを持っています ユーザーがドロップダウンリストから任意の国を選択すると、国選択に基づいて、データ（AgencyName、AgencyAddr、Pincode）データベースから読み込まれ、右側のテキストボックスに入力されます。ドロップダウン内の選択した国が選択されたままになります。ドロップダウンリストの選択変更に

、私はしなさいここに私

を助けるポストバックするためにページ全体をしたくない私のEF4である - ModelClasses

public class Country 
{ 
    public int CountryID { get; set; } 
    public string CountryName { get; set; } 

} 

public class AgencyInfo 
{ 
    public int CountryID { get; set; } 
    public string AgencyName { get; set; } 
    public string AgencyAddr { get; set; } 
    public int Pincode { get; set; } 

} 

ここに私のMVC4かみそりページIndex.cshtmlがある

 @using (Ajax.BeginForm(
"Index", 
"Home", 
new AjaxOptions { UpdateTargetId = "result" } 
)) 
{ 
@Html.DropDownList("SelectedCountryId", Model.CountryList, "(Select one event)") 
} 

<div id=’result’> 
<fieldset> 
    <legend>Country Details: </legend> 
    <div> 
     <table> 
      <tr> 
       <td> 
        <span>Country Name </span> 
        <br /> 
         @Html.EditorFor(model => model.Countries.Name) 
      @Html.ValidationMessageFor(model => model. Countries.Name) 
       </td> 
       <td> 
        <span>Agency Name </span> 
        <br /> 
        @Html.EditorFor(model => model.AgencyInfo.AgencyName) 
        @Html.ValidationMessageFor(model => model.AgencyInfo.AgencyName) 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <span>Address Info </span> 
        <br /> 
        @Html.EditorFor(model => model. AgencyInfo.Address) 
        @Html.ValidationMessageFor(model => model. AgencyInfo.Address) 
       </td> 
       <td> 
        <span>Pin Code </span> 
        <br /> 
         @Html.EditorFor(model => model. AgencyInfo.PinCode) 
        @Html.ValidationMessageFor(model => model. AgencyInfo.PinCode) 
       </td> 
      </tr> 

      <tr> 
       <td> 
        <input type="submit" value="Modify" /><input type="submit" value="Delete" /> 
       </td> 
       <td> 
        <input type="submit" value="Save" /><input type="submit" value="View Resources" /> 
       </td> 
      </tr> 
     </table> 
    </div> 
</fieldset> 
</div > @end of result div@ 

お勧めはありますか？ありがとうございます

Answer 1

あなたはajaxを使いたいと思います。

選択の変更を監視するイベントハンドラを追加します。ドロップダウンが変更されたら、現在の国を取得し、ajaxリクエストを送信します。 ajaxリクエストが返すとjQueryでDOMを更新します。

例図：

<p id="output"></p> 

<select id="dropDown"><option>Option 1</option> 
<option>Option 2</option></select> 
<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script> 
<script> 
    $(document).ready(function() { 
     $("#dropDown").change(function() { 
      var selection = $("#dropDown").val(); 
      var dataToSend = { 
       country: selection 
      }; 

      $.ajax({ 
       url: "home/getInfo", 
       data: dataToSend, 
       success: function (data) { 
        $("#output").text("server returned:" + data.agent); 
       } 
      }); 
     }); 
    }); 
</script> 

例コントローラ方法：

public class HomeController : Controller 
{ 
    [HttpGet] 
    public JsonResult GetInfo(string country) 
    { 
     return Json(new { agent = country, other = "Blech" }, JsonRequestBehavior.AllowGet); 
    } 
} 

いくつかの他の例：

はAJAXリクエストを処理するコントローラメソッドを追加：AJAXを呼び出す http://www.cleancode.co.nz/blog/739/ajax-aspnet-mvc-3

Dを更新するOM： http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax2