AliYilmaz
on Jul 26, 2022 02:04 AM
1119 Views
Hi,
I have such a code. I want to convert this code to the code below.
When you select it, the page will be PostBack and that url will go.
<div class="dropdown-menu">
@foreach (var item2 in Model.SubCustomers)
{
<a class="dropdown-item" asp-controller="Home" asp-action="CustomerBranch" asp-route-Code="@item2.Code" asp-route-returnUrl="@returnUrl">@item2.Code / @item2.PublicTitle/ @item2.AddressDetail</a>
}
</div>
I want to change below
<select class="js-example-basic-single" name="state">
@foreach (var item2 in Model.SubCustomers)
{
<option asp-controller="Home" asp-action="CustomerBranch" asp-route-Code="@item2.Code" asp-route-returnUrl="@returnUrl">
@item2.Code / @item2.PublicTitle/ @item2.AddressDetail
</option>
}
</select>
Download FREE API for Word, Excel and PDF in ASP.Net:
Download
Please share SubCustomers sample data.
Hi,
Sample data
<div class="dropdown-menu">
<a class="dropdown-item" href="/Home/CustomerBranch?Code=20201272.1&returnUrl=~%2FSaleSeason">20201272.1 / V.O.F.de Vries-Dijkstra/ Dijkstraat 21</a>
<a class="dropdown-item" href="/Home/CustomerBranch?Code=20201272&returnUrl=~%2FSaleSeason">20201272 / V.O.F. de Vries-Dijkstra/ Dijkstraat 21 </a>
</div>
You had already set the asp-controller, asp-action and the asp-route to specify the prefix for your route variable.
So what issue you are getting?
Hi,
This code is not working correctly. Because it is an option element. It must be an element. I want to use the following code.
As soon as it selects the page should be postback and the return url should go.
<select class="js-example-basic-single" name="state">
@foreach (var item2 in Model.SubCustomers)
{
<option asp-controller="Home" asp-action="CustomerBranch" asp-route-Code="@item2.Code" asp-route-returnUrl="@returnUrl">
@item2.Code / @item2.PublicTitle/ @item2.AddressDetail
</option>
}
</select>
Hi AliYilmaz,
Use jQuery on change event.
Refer below example.
Model
public class SubCustomers
{
public string Code { get; set; }
public string PublicTitle { get; set; }
public string AddressDetail { get; set; }
}
Controller
public class HomeController : Controller
{
public IActionResult Index()
{
List<SubCustomers> customers = new List<SubCustomers>();
customers.Add(new SubCustomers { Code = "20201272.1", PublicTitle = "V.O.F.de Vries-Dijkstra", AddressDetail = "Dijkstraat 21" });
customers.Add(new SubCustomers { Code = "20201272", PublicTitle = "V.O.F.de Vries-Dijkstra", AddressDetail = "Dijkstraat 21" });
return View(customers);
}
}
View
@model List<Select_Option_MVC_Core.Models.SubCustomers>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<h4>SubCustomers</h4>
<select id="ddlOptions" class="js-example-basic-single" name="state">
<option value="">select</option>
@foreach (var item2 in Model)
{
<option asp-controller="Home" asp-action="CustomerBranch" asp-route-Code="@item2.Code" asp-route-returnUrl="~%2FSaleSeason">
@item2.Code / @item2.PublicTitle/ @item2.AddressDetail
</option>
}
</select>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#ddlOptions').on('change', function () {
var controller = $(this).find('option:selected').attr('asp-controller');
var action = $(this).find('option:selected').attr('asp-action');
var code = $(this).find('option:selected').attr('asp-route-Code');
var returnUrl = $(this).find('option:selected').attr('asp-route-returnUrl');
location.href = controller + "/" + action + "?Code=" + code + "&returnUrl=" + returnUrl;
});
});
</script>
</body>
</html>
