Is the above possible without defining a property in a ViewModel that holds the value of the value attribute of input tag of type radio. For instance, in the following view, I would like SelectedOrderType property to hold 1 if user selects In-Store radio button, and hold 2 if Online radio button is selected.
But when the form is submitted, SelectedOrderType property always holds the value 1 regardless of which radio button was selected. Note: When form is loaded, by default first radio button is checked. But user, of course, can check any of the two before submitting the form. NOTE 2: Form is submitted via an Ajax call inside the view below:
View with Form with Radio Button tag helper:
@model TestProj.Models.TestViewModel
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#menu1">Add Order</a></li>
</ul>
<div class="tab-content">
<div id="menu1" class="tab-pane in active">
<form asp-controller="TestContrl" asp-action="TestAction" method="post">
<div asp-validation-summary="All" class="text-danger"></div>
<div class="radio">
<label><input asp-for="SelectedOrderType" type="radio" value="1" checked="checked">In-Store</label>
</div>
<div class="radio">
<label><input asp-for="SelectedOrderType" type="radio" value="2">Online</label>
</div>
<div>
....
....
<button type="button" class="btn btn-info btn-xs">Submit Order</button>
</div>
</form>
</div>
</div>
@section scripts
{
<script>
$(document).ready(function () {
$('.tab-content').on('click', '.btn', function (event) {
var selectedOrderTypeVal = $('#SelectedOrderType').val();
$.ajax({
url: '@Url.Action("TestContrl", "TestAction")',
data: { SelectedOrderType: selectedOrderTypeVal },
contentType: 'application/json',
dataType: 'html',
type: 'GET',
cache: false,
success: function (data) {
$('#menu1').html(data);
},
error: function (jqXHR, textStatus) {
alert('jqXHR.statusCode');
}
});
});
});
</script>
}
View Model:
public class TestViewModel
{
public string SelectedOrderType { get; set; }
public string CustormerName{ get; set; }
}
Snapshot of the generated Html of the View:
<html>
....
<div class="radio">
<label><input type="radio" value="1" checked="checked" data-val="true" data-val-required="The SelectedProjType field is required."
id="SelectedOrderType" name="SelectedOrderType">In-Store</label>
</div>
<div class="radio">
<label><input type="radio" value="2" id="SelectedOrderType" name="SelectedOrderType">Online</label>
</div>
....
</html>
