Refreshing MVC PartialView mit neuen Modell auf DropDownList Ändern

Question

Ich habe eine Budgetierung Anwendung, ich habe 3 Modelle, die ich in 1 Ansicht ziehe.

• Budget - erhalten die Nutzer Informationen Details Budgetierung (dh Name Budget, Datum etc.)
• BillBudgetTotal - Ermöglicht es dem Benutzer, eine Gesamtsumme für das Budget (id, budgetid, Gesamtmenge) hinzufügen
• BudgetTotalBreakdown - Ermöglicht dem Anwender ihr Budget nach unten in weitere Details zu brechen (dh die Gesamtmenge von bill Namen brechen (Wasser, Gas, Strom, sonstige etc.)

die Benutzeroberfläche die geben wird Verwenden Sie die Option, ein Budget auszuwählen (über Dropdown), in dem sie arbeiten möchten, und dann t zuzulassen Saum, um ihre Dollarbeträge einzugeben, basierend auf welcher Rechnung sie ausgewählt haben.

Problem: Ich versuche einen Weg zu finden, um die Teilansicht (den Bereich unter dem Dropdown) basierend auf der Dropdown-Auswahl zu aktualisieren. Ich kann nicht scheinen, dass das Partial mit dem aktualisierten Modell aktualisiert wird (es muss basierend auf dem Wert der Dropdown-Listenauswahl zurückgesetzt werden). Ich habe mehrere Optionen auf Stapelüberlauf erschöpft.

Etwas wie folgt aus:

Modell:

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> 

Controller:

[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

Mit ajax können Sie Ihre Seite teilweise aktualisieren. Wenn der Rasierer Ihre Seite rendert, erzeugt er ein SELECT-Element mit der ID "Budget_SelectedBills". Hören Sie sich also das Änderungsereignis in diesem Dropdown an, rufen Sie den ausgewählten Wert ab und senden Sie ihn an Ihren Server (eine Aktionsmethode) und lassen Sie ihn die Teilansicht für das gewünschte Markup zurückgeben. Sie können die Methode jQuery load verwenden, um das DOM mit dem neuen Markup vom Server zu aktualisieren.

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

Angenommen, Sie BillDetails Aktionsmethode in BudgetingController haben, die für den unteren Teil des Bildschirms, um die billId ein Rückholkunde der Teilansicht accpets.

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

EDIT:Gemäß dem Kommentar

Wie kann ich zwei Parameter in diese passieren? wie nicht nur die ID aus dem Tropfen, sondern etwas anderes der Liste der @ Model.BudgetId

Wenn Ihr JavaScript-Code in der gleichen Rasierer Ansicht ist, können Sie einfach Model.BudgetId als zweiten Abfragezeichenfolgeflag param Wert verwenden können.

BudgetId Unter der Annahme ist ein int-Typ

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

jetzt sicher, dass Ihre Aktion Methode, um diesen zweiten Parameter in einer externen hat js Datei

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

Wenn Ihr JavaScript-Code, können Sie Model.BudgetId halten irgendwo im DOM und lies das. Entweder ein verstecktes Feld oder es in HTML behalten 5 Datenattribute des select-Elements.