使用DropDownList更改的新模型刷新MVC PartialView

Question

我有一個預算申請，我有3個模型，我正在進入1視圖。

• 預算 - 獲取用戶預算信息詳細信息（即預算名稱，日期等）
• BillBudgetTotal - 允許用戶添加該預算的累計總額（ID，預算，總金額）
• BudgetTotalBreakdown - 允許用戶將預算細分為更多詳細信息（即按賬單名稱（水，煤氣，電力，雜項等）分解總金額

用戶界面將為用戶提供選擇他們想要工作的預算（通過下拉列表）的選項，然后允許他們根據他們選擇的賬單輸入他們的美元金額。

問題：我試圖找出一種方法來允許部分視圖（下拉區域下面的區域）根據下拉選擇進行刷新。 我似乎無法使用更新的模型進行部分刷新（需要根據下拉列表選擇的值重置）。 我已經用盡了堆棧溢出的多個選項。

像這樣的東西：

模型：

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元素。 因此，請在此下拉列表中收聽更改事件，獲取所選值並將其發送到您的服務器（操作方法），然后讓它返回您想要的標記的部分視圖。 您可以使用jQuery load方法使用來自服務器的新標記更新DOM。

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

假設你在BudgetingController有BillDetails動作方法，它接受billId並返回屏幕底部的局部視圖。

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

編輯： 根據評論

我怎樣才能傳遞2個參數呢？ 不僅僅是drop中的id，還有@ Model.BudgetId列表中的其他內容

如果你的javascript代碼在同一個剃刀視圖中，你可以簡單地使用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>
}

現在確保您的action方法具有第二個參數

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

如果你的javascript代碼在外部js文件中，你可以將Model.BudgetId到DOM中的某個位置並讀取它。 隱藏字段或將其保留在select元素的html 5數據屬性中。