Hi AliYilmaz,
Check this example. Now please take its reference and correct your code.
Model
public class Shipping
{
public int ShippingOptionUID { get; set; }
public string ShippingRateComputationMethodSystemName { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public int Rate { get; set; }
public bool Selected { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public JsonResult Sonuc(int? ilces)
{
List<Shipping> options = new List<Shipping>();
options.Add(new Shipping
{
ShippingOptionUID = 1,
ShippingRateComputationMethodSystemName = "Method 1",
Name = "Name 1",
Description = "Description 1",
Rate = 12,
Selected = false
});
options.Add(new Shipping
{
ShippingOptionUID = 2,
ShippingRateComputationMethodSystemName = "Method 2",
Name = "Name 2",
Description = "Description 2",
Rate = 15,
Selected = true
});
options.Add(new Shipping
{
ShippingOptionUID = 3,
ShippingRateComputationMethodSystemName = "Method 3",
Name = "Name 3",
Description = "Description 3",
Rate = 18,
Selected = false
});
ViewBag.Ilce = options;
return Json(ViewBag.Ilce, JsonRequestBehavior.AllowGet);
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
ilsec(1);
});
function ilsec(ilces) {
var postData = { ilces: ilces };
$.ajax({
cache: false,
type: 'POST',
url: '@Url.Action("Sonuc", "Home")',
data: postData,
dataType: 'json',
success: function (s) {
var x = document.getElementById("kargolar");
x.style.display = "block";
var trHTML = '';
$.each(s, function (i, item) {
trHTML += '<div class="col-xs-1" style="width:100%; text-align:center;">';
trHTML += '<img class="shipping-option-image" /><br />' +
'<label for="shippingoption-' + item.ShippingOptionUID + '___' + item.ShippingRateComputationMethodSystemName + '">' + item.Name + '</label><br />' +
'<label for="shippingoption-' + item.ShippingOptionUID + '___' + item.ShippingRateComputationMethodSystemName + '">' + item.Description + '</label><br />' +
'<label for="shippingoption-' + item.ShippingOptionUID + '___' + item.ShippingRateComputationMethodSystemName + '">' + item.Rate + '</label><br />';
if (item.Selected) {
trHTML += '<input type="radio" id="shippingoption-' + item.ShippingOptionUID + '___' + item.ShippingRateComputationMethodSystemName + '" value="' + item.ShippingOptionUID + '" checked="checked" name="shippingoption" />';
} else {
trHTML += '<input type="radio" id="shippingoption-' + item.ShippingOptionUID + '___' + item.ShippingRateComputationMethodSystemName + '" value="' + item.ShippingOptionUID + '" name="shippingoption" />';
}
trHTML += "</div>";
});
x.innerHTML=trHTML;
},
error: function (data) {
alert(data.responsetext);
}
});
};
</script>
</head>
<body>
<div class="container-fluid" id="kargolar" style="display:none">
</div>
</body>
</html>
Screenshot
