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

Question

我在局部視圖中列出客戶列表

@{
    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>

我想要的是，當用戶單擊下拉列表中的客戶端時，它會將客戶端發送到 ID 到控制器上的方法，而無需單擊提交按鈕，例如帶有 或 表單。 我嘗試使用 ActionLink，但只能通過在 URL 中傳遞 id 並且我不希望 URL 中包含 clientId。 我怎樣才能做到這一點 ？

謝謝

Answer 1

做為

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

您可以為此使用 Jquery。

在你的 li 上創建一個class ，並在點擊這個class創建一個事件。 只需使用window.location.href和@Url.Action()重定向您的頁面。

查詢

$(".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

用 jQuery 試試這個。 您的 ID 不會成為 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
        }
    });
});