javascript - Pass PartialView with AJAX and still using Controller in MVC on submit -
i have div want put partialview when press input of type submit. partialview must created inside div after controlleraction showdetail() has executed else i'm getting nullreference @ model. have made attempt ajax i'm not sure how write this, , when model needs created before partialview posted div. appreciate guidance or solution
my view (the div supposed keep partialview ancalcdetail):
@using (html.beginform("showdetail", "calculation")) { <div class="calculatebox"> <label for="calcoption">choose value calculate:</label> <select form="anformcalcinput" id="calcoption" title="choose value want calculate"> <option value="anpmt">payment (pmt)</option> <option value="ani">interest (i)</option> <option value="anfv">future value (fv)</option> <option value="anpv">present value (pv)</option> </select> </div> <div class="calculatebox" background-color="#777777"> @html.label("present value (pv)") @html.textbox("presentvalue") @html.label("future value") @html.textbox("futurevalue") @html.label("interest rate") @html.textbox("interestrate") <br /> <input type="radio" name="advanceorarrears" id="inadvance" value="inadvance" /> in advance<br /> <input type="radio" name="advanceorarrears" id="inarrears" value="inarrears" /> in arrears </div> <div class="calculatebox"> <label for="startdate">start date:</label> <input type="date" id="anstartdate" name="startdate" title="choose start date calculation" /><br /> @html.label("payment frequency") <select form="anformcalcinput" id="anpmtfreq" title="choose payment frequency, example: every month"> <option value="monthly">monthly</option> <option value="quarterly">quarterly</option> <option value="yearly">yearly</option> </select><br /><br /> @html.label("no of payment periods") @html.textbox("paymentperiods") @html.label("date time convention") <select form="anformcalcinput" id="andtc" title="choose date time convention"> <option value="360360">360/360</option> <option value="365365">365/365</option> </select><br /><br /> <input type="submit" id="ancalcbtn" class="calcbtn" name="ansubmitbtn" value="calculate" title="calculate calculation" /> </div> } </div> <table cellspacing="0" width="80%"> <div class="calcdetail" id="ancalcdetail"> </div> my partialview:
@model ienumerable<calcfactory.models.calculation> <table cellspacing="0" width="80%"> <thead> <tr> <th> date </th> <th> invoice amount </th> <th> interest rate </th> <th> interest amount </th> <th> amortization </th> <th> capital balance </th> <th></th> </tr> </thead> <tr> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td align="center" id="startvalue"> </td> </tr> @foreach (var item in model) { <tr> <td align="center"> @html.displayfor(modelitem => item.date) </td> <td align="center"> @html.displayfor(modelitem => item.invoiceamount) </td> <td align="center"> @html.displayfor(modelitem => item.interestrate) </td> <td align="center"> @html.displayfor(modelitem => item.interestamount) </td> <td align="center"> @html.displayfor(modelitem => item.amortization) </td> <td align="center"> @html.displayfor(modelitem => item.presentvalue) </td> </tr> }
my controller (which needs runned before partialview dumped inside div):
public actionresult showdetail(formcollection form) { list<calculation> clist = new list<calculation>(); calculation calc = new calculation(); calc.date = convert.todatetime(form["startdate"]); calc.invoiceamount = 2000; calc.interestrate = convert.todouble(form["interestrate"]); calc.interestamount = (convert.todouble(form["presentvalue"]) * convert.todouble(form["interestrate"]) / 360 * 30); calc.amortization = (2000 - (convert.todouble(form["presentvalue"]) * convert.todouble(form["interestrate"]) / 360 * 30)); calc.presentvalue = convert.todouble(form["presentvalue"]) - calc.amortization; clist.add(calc); (int = 0; < convert.toint32(form["paymentperiods"]); i++) { calculation calcbefore = clist.last(); calc = new calculation(); calc.date = calcbefore.date.addmonths(1); calc.invoiceamount = 2000; calc.interestrate = convert.todouble(form["interestrate"]); calc.interestamount = (calcbefore.presentvalue * convert.todouble(form["interestrate"]) / 360 * 30); calc.amortization = (calc.invoiceamount - (calcbefore.presentvalue * calc.interestrate / 360 * 30)); calc.presentvalue = calcbefore.presentvalue - calc.amortization; clist.add(calc); } return partialview("showdetail", clist); } and js/attempt ajax:
$(document).on('click', '#ancalcbtn', function () { $.post("showdetail.cshtml", function (data) { //run showdetail action before data posted div //post partialview div-id #ancalcdetail $("#ancalcdetail").html(data); }); });
resources not served way doing right in mvc. call showdetail method, change jquery post this:
$('#ancalcbtn').on('click', function (e) { var form = $('form'); e.preventdefault(); $.ajax({ url: 'calculation/showdetail', type: 'post', data:form.serialize(), datatype: 'json', contenttype: 'application/json', success: function (data) { $("#ancalcdetail").html(data); }); }); make sure mark actionmethod httppost i.e.
[httppost] public actionresult showdetail(formcollection form) { ///usual code }
Comments
Post a Comment