中没有ajax-call工作。
我有一个div，当我按下类型提交输入时，我想放置partialview。在ControllerAction ShowDetail（）执行否则我会在模型上执行无效之后，必须在DIV内创建部分视图。我已经尝试了Ajax，但我不确定如何编写此书，尤其是当需要在PartialView发布到DIV之前需要创建模型时。我真的很感谢一些指导或解决方案
我的视图（应该保留部分的DIV是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>
我的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>
}
我的控制器（需要在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);
}
最后是我的JS/尝试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);
});
}）;
资源不是按照您现在在MVC中进行的方式提供的。要调用您的ShowDetail方法，请将您的jQuery post更改为：
$('#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);
});
});
确保您标记您的ActionMethod HttpPost，即
[HttpPost]
public ActionResult ShowDetail(FormCollection form)
{
///usual code
}
通过将html.beginform更改为html.ajaxform并使updateTargetId =" ancalcdetail"它实际上在.js