DropDownListで新しいモデルを使用してMVC PartialViewをリフレッシュする

Question

予算アプリケーションがあります.3つのモデルがあり、1つのビューにしています。

• 予算 - 取得するユーザー情報の詳細を（すなわち、予算、日付などの名前）
• BillBudgetTotalが予算 - その予算（ID、budgetid、総量）の累積合計を追加するためにユーザーを可能にします
• BudgetTotalBreakdown - ユーザーがfuther詳細（すなわち、法案名（水道、ガス、電気、その他、など）
が

UIを与えることにより、合計金額を打破にダウン彼らの予算を破ることができますユーザーは、自分が仕事をしたい予算を（ドロップダウンから）選択してから彼らが選択した請求書に基づいて彼らのドル額を入力する裾。

問題：私は、部分的な表示（ドロップダウンの下の領域）がドロップダウンの選択に基づいてリフレッシュする方法を見つけようとしています。私は、更新されたモデルで部分的に更新するようには思えません（ドロップダウンリスト選択の値に基づいてリセットする必要があります）。私はスタックオーバーフローで複数のオプションを使い果たしました。

このような何か：

モデル：

public class MyBudgets : Financials 
    { 
     public Budgets Budget{ get; set; } 
     public BillBudgetTotal BudgetTotals { get; set; } 
     public BillBudgetTotalBreakdown BudgetTotalBreakdown { get; set; } 
    } 

HTML：

 <div class="col-md-3"></div> 
    <div class="row col-md-6"> 
      @Html.DropDownListFor(model => model.Budget.SelectedBills, Model.Budget.SelectedBills.Select(b => new SelectListItem() { Value = b.Bill_Id.ToString(), Text = b.Bill}), "Select A Bill...", new { @class = "form-control"}) 
    </div> 
    <div class="col-md-3"></div> 
    <br /><br /> 
    <hr /> 
    <div id="billBudgetPartial">     
      @Html.Partial("Budgeting/_BillTotalAmount", Model); 
    </div> 

コントローラー：

[HttpGet] 
    public ActionResult Budgets(int budgetId) 
    { 
     MyBudgets model = new MyBudgets 
     { 
      Budgets = _executionRepository.RetrieveBudgets(budgetId) 
     }; 

     model.Budget.SelectedBills = _executionRepository.SetSelectedBudgets(budgetId); 

     return View(model); 
    } 

    [HttpPost] 
    public ActionResult Budgets() 
    { 


     return Json(new { success = "false" }); 
    } 

    public ActionResult BillTotalAmount(int id) 
    { 
     var model = new MyBudgets 
     { 
      Budgets = _executionRepository.RetrieveBudgetsByBillBudget(id), 
      BillBudgetTotal = _executionRepository.RetrieveBillBudgetByBillId(id), 
      BillBudgetTotalBreakdown = _executionRepository.RetrieveBillBudgetTotalBreakdown (id) 
     }; 

     return PartialView("Execution/_BillTotalAmount", model); 
    } 

Answer 1

あなたのページを部分的に更新するには、ajaxを使用できます。あなたのページをかすかにレンダリングすると、idが"Budget_SelectedBills"のSELECT要素が生成されます。そのため、このドロップダウンでchangeイベントを聞き、選択した値を取得してサーバー（アクションメソッド）に送信し、下に表示するマークアップの部分ビューを返すようにします。 jQuery loadメソッドを使用して、サーバーからの新しいマークアップでDOMを更新することができます。

あなたがbillIdに画面の下の部分のための部分的なビューをリターンをaccpets BudgetingControllerで BillDetailsアクションメソッドを持っていると仮定すると

@section Scripts 
{ 
    <script> 
    $(function(){ 
     $("#Budget_SelectedBills").change(function(e){ 
     var val=$(this).val(); 
     $("#billBudgetPartial").load("/Budgeting/BillDetails/"+val); 
     }); 
    });  
    </script> 
} 

。

public ActionResult BillDetails(int id) 
{ 
    var model = ReplaceYourModelForBillTotalAmountViewHere(); 
    return PartialView("Budgeting/_BillTotalAmount", model); 
} 

EDIT：コメントを1として

がどのように私はこれで2つのパラメータを渡すことができますか？好きではない ドロップからわずかIDが、何か他のもののリストの@ Model.BudgetId

あなたのjavascriptのコードが同じかみそりビューである場合は、単に二クエリ文字列のparam値としてModel.BudgetIdを使用することができます。BudgetIdはint型

@secion Scripts 
{ 
    <script> 
    $(function(){ 
     $("#Budget_SelectedBills").change(function(e){ 
     var val=$(this).val(); 
     $("#billBudgetPartial").load("/Budgeting/BillDetails/"+val 
                  +"?budgetId="+@Model.BudgetId); 
     }); 
    });  
    </script> 
} 

今すぐあなたのjavascriptのコードは、外部のjsファイル内にある場合、あなたはModel.BudgetIdを保つこと

public ActionResult BillDetails(int id,int budgetId) 
{ 
    var model = ReplaceYourModelForBillTotalAmountViewHere(); 
    return PartialView("Budgeting/_BillTotalAmount", model); 
} 

あなたのアクションメソッドは、この第二のパラメータを持っていることを確認していると仮定すると、

DOMのどこかに読んで読んでください。隠しフィールドか、select要素のhtml 5データ属性に保持します。