在 ASP.NET MVC 项目中提交选定的下拉列表值

Question

I'm listing a list of clients in a partial view

@{
    List<Clients> clientsList = ViewBag.ClientsList;
}

<script src="~/Scripts/jquery-3.1.1.min.js"></script>

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Clients <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
        @foreach (Clients c in clientsList)
        {
            <li>@Html.ActionLink(c.NomClient, "Index", "Home", new {c.ID}, null)</li>
        }
    </ul>
</li>

What I want is, when a user click on a client in the dropdown list, it send the client to ID to a method on a controller, without clicking on a submit button, with or form for example. I tried with an ActionLink, but only by passing the id in the URL and I would like to not have the clientId in the URL. How can I do that ?

thx

Answer 1

Do as

HTML:

<ul class="dropdown-menu" role="menu">
    @foreach (Clients c in clientsList)
    {
        <li>@c.NomClient</li>
    }
</ul>

javascript:

// assuming you're using jQuery
$(".dropdown-menu").change( function (event) {
    $.ajax({
        url: "Home/Index/" + $(this).val(),
        data: { id = $(this).val() /* add other additional parameters */ },
        cache: false,
        type: "POST",
        dataType: "html",

        success: function (data, textStatus, XMLHttpRequest) {
           //do stuff
        }
    });
});

Answer 2

You can use Jquery for that.

Create a class on your li and an event on click on this class . Simply redirect your page with a window.location.href and a @Url.Action() .

JQuery

$(".dropdownclient").click(function(){
  window.location.href="@Url.Action('Method','Controller')/"+$(this).data("id");
});

HTML

<ul class="dropdown-menu" role="menu">
  @foreach (Clients c in clientsList)
  {
    <li class='dropdownclient' data-id="@c.ClientID">@Html.ActionLink(c.NomClient, "Index", "Home", new {c.ID}, null)</li>
  }
</ul>

Answer 3

Try this with jQuery. Your ID will not be part of the URL.

<ul class="dropdown-menu" role="menu">
    @foreach (Clients c in clientsList)
    {
       <li><button data-action="do-stuff" data-url="@Url.Action("Index", "Home")" data-id="@c.ID">@c.NomClient</button></li>
    }

</ul>

$("[data-action='do-stuff']").on('click', function (event) {

    var opt = $(this).data();

    $.ajax({
        url: opt.url,
        data: { id = opt.id },
        cache: false,
        type: "POST"
        success: function (data, textStatus, XMLHttpRequest) {
           //do stuff
        }
    });
});

Answer 4

@Html.DropDownListFor(m => m.NomClient, new SelectList(ViewBag.ClientsList,"Key", "Value"), "Select", new { @class = "dropdown-menu" })

$(".dropdown-menu").change(function (event) {    
    $.ajax({
        url: "Home/Index/",
        data: { id = $(this).val() /* add other additional parameters */ },
        type: "POST",
        success: function (data) {
           //do stuff
        }
    });
});