Reputation: 884
I am attempting to use an AJAX call to render a partial view when a radio button is selected. I have searched and have tried what appears to be the best approach via comments on Stack. When I click the radio button, I have no result, in debug, I get a Status Code: 500 Internal Server Error? Any assistance would be great.
Partial View Names:
_BOA.cshtml
_TA.cshtml
_MNB.cshtml
View:
<td class="radio-inline">
@Html.RadioButton("bankSelect", "MNBConvert", false, new { @class = "radioMNB" }) MNB Conversion
@Html.RadioButton("bankSelect", "BOAConvert", false, new { @class = "radioBOA" }) BOA Conversion
@Html.RadioButton("bankSelect", "TAConvert", false, new { @class = "radioTA" }) TA Conversion
</td>
Javascript:
<script src="~/Scripts/jquery-1.9.0.js"></script>
<script type="text/javascript">
$(function () {
$("[name=bankSelect]").on('change', function () {
// var $radio = $(this);
var checked = $("input[name='bankSelect']:checked").val();
$.ajax({
url: '@Url.Action("GetBankToConvert", "Home")',
data: checked,
type: 'GET',
success: function (data) {
$("#renderPartialView").html(data);
}
});
});
});
</script>
Controller:
[HttpGet]
public ActionResult GetBankToConvert(string bankSelect)
{
if (bankSelect == "MNBConvert")
{
return PartialView("_MNB");
}
else if (bankSelect == "BOAConvert")
{
return PartialView("_BOA");
}
else
{
return PartialView("_TA");
}
}
Upvotes: 0
Views: 36
Reputation: 171679
You aren't sending a key/value pair as data, only a value
.
Try
$.ajax({
url: '@Url.Action("GetBankToConvert", "Home")',
data: {bankSelect: checked },
type: 'GET',
success: function (data) {
$("#renderPartialView").html(data);
}
});
WHen in doubt, inspect the actual request in network tab of browser dev tools to see exactly what is sent and received among all the other components of a request
Upvotes: 4