i have budgeting application, have 3 models pulling 1 view.
- budget - users budgeting information details (i.e, name of budget, date, etc.)
- billbudgettotal - allows user add cumulative total budget (i.d., budgetid, total amount)
- budgettotalbreakdown - allows user break budget down futher details (i.e., break total amount down bill name (water, gas, electric, misc, etc.)
the ui give user option select budget (via dropdown) want work in , allow them enter in dollar amounts based on bill selected.
problem: trying figure out way allow partial view (the area under dropdown) refresh based on dropdown selection. can't seem partial refresh updated model (it needs reset based on value of dropdownlist selection). have exhausted multiple options on stack overflow.
something this:
model:
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 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); }
you can use ajax partial update page. when razor render page, generate select element id "budget_selectedbills". listen change event on dropdown, selected value , send server(an action method) , let return partial view markup want below. may use jquery load method update dom new markup coming server.
@secion scripts { <script> $(function(){ $("#budget_selectedbills").change(function(e){ var val=$(this).val(); $("#billbudgetpartial").load("/budgeting/billdetails/"+val); }); }); </script> } assuming have billdetails action method in budgetingcontroller accpets billid return partial view bottom portion of screen.
public actionresult billdetails(int id) { var model = replaceyourmodelforbilltotalamountviewhere(); return partialview("budgeting/_billtotalamount", model); } edit: as per comment
how can pass 2 parameters in this? not id drop else list @model.budgetid
if javascript code in same razor view, can use model.budgetid second querystring param value.
assuming budgetid int type
@secion scripts { <script> $(function(){ $("#budget_selectedbills").change(function(e){ var val=$(this).val(); $("#billbudgetpartial").load("/budgeting/billdetails/"+val +"?budgetid="+@model.budgetid); }); }); </script> } now make sure action method has second parameter
public actionresult billdetails(int id,int budgetid) { var model = replaceyourmodelforbilltotalamountviewhere(); return partialview("budgeting/_billtotalamount", model); } if javascript code in external js file, may keep model.budgetid somewhere in dom , read that. either hidden field or keep in html 5 data attributes of select element.
Comments
Post a Comment