Redirect to URL on DropDownList option selection using jQuery in ASP.Net Core

AliYilmaz
 
on Jul 26, 2022 02:04 AM
580 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
dharmendr
 
on Jul 26, 2022 02:05 AM

Please share SubCustomers sample data.

AliYilmaz
 
on Jul 26, 2022 02:16 AM

Hi, 

Sample data

<div class="dropdown-menu">
 <a class="dropdown-item" href="/Home/CustomerBranch?Code=20201272.1&amp;returnUrl=~%2FSaleSeason">20201272.1 / V.O.F.de Vries-Dijkstra/ Dijkstraat 21</a>
 <a class="dropdown-item" href="/Home/CustomerBranch?Code=20201272&amp;returnUrl=~%2FSaleSeason">20201272 / V.O.F. de Vries-Dijkstra/ Dijkstraat 21                                               </a>
                </div>

dharmendr
 
on Jul 26, 2022 08:11 AM

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?

AliYilmaz
 
on Jul 26, 2022 10:08 AM

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>

 

dharmendr
 
on Jul 27, 2022 08:16 AM

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>