Pass PartialView with AJAX and still using Controller in MVC on submit

Question

I have a div where I want to put a PartialView when I press a input of type submit. The partialview must be created inside the div after the Controlleraction ShowDetail() has executed else I'm getting nullreference at my model. I have made a attempt with AJAX but I'm not really sure how the write this, and especially when the model needs to be created before the partialview is posted into the div. I would really appreciate some guidance or solution

My view (the div that is supposed to keep the partialview is anCalcDetail):

@using (Html.BeginForm("ShowDetail", "Calculation"))
                    {
                       <div class="calculateBox">
                            <label for="calcOption">Choose value to calculate:</label>
                            <select form="anFormCalcInput" id="calcOption" title="Choose what value you want to 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 for your calculation" /><br />
                            @Html.Label("Payment frequency")
                            <select form="anFormCalcInput" id="anPmtFreq" title="Choose the payment frequency, for 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 your 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 your 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 to be runned before the partialview is dumped inside the 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);
        for (int i = 0; i < 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 finally my JS/Attempt for AJAX:

$(document).on('click', '#anCalcBtn', function () {
$.post("ShowDetail.cshtml", function (data) {
    //Run the ShowDetail action before the data is posted into the div
    //Post partialview into div-id #anCalcDetail
    $("#anCalcDetail").html(data);
});

});

Manish Mishra · Accepted Answer · 2014-03-06 11:06:53Z

1

resources are not served the way you are doing it right now in mvc. To call your ShowDetail method, change your jQuery post to 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 you mark your ActionMethod HttpPost i.e.

[HttpPost]
public ActionResult ShowDetail(FormCollection form)
{ 
       ///usual code
}

edited Mar 6, 2014 at 11:06

answered Mar 6, 2014 at 10:07

Manish Mishra

12.4k5 gold badges40 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

MrProgram Over a year ago

Your code still sends me to a new view, and does not paste the partialview into the div

Manish Mishra Over a year ago

ohh, my bad, you have to stop the normal flow of the click before you can make a request. check it out now

Manish Mishra Over a year ago

hey, check out my answer, now you are sending all the controls data as the data of the httpResponse

MrProgram Over a year ago

Feels like it doesn't bother about the ajax and just runs the ShowDetail-action instead

MrProgram Over a year ago

Is there any way to check so the ajax-post is sending the right code?

|

MrProgram · Accepted Answer · 2014-03-06 13:25:26Z

0

By changeing Html.BeginForm to Html.AjaxForm and make UpdateTargetId = "anCalcDetail" it actually worked without the AJAX-call in the .js

answered Mar 6, 2014 at 13:25

MrProgram

5,26213 gold badges61 silver badges101 bronze badges

Collectives™ on Stack Overflow

Pass PartialView with AJAX and still using Controller in MVC on submit

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related