如何在视图中的@ Html.DropDownListFor中选择值并将其传递给OTHER控制器中的操作？

Question

我有一个下拉列表。如果用户选择单击“获取呼叫”，则我希望将所选Call的ID传递给控制器​​FetchCall中的操作Person。

<p>
    @Html.DropDownListFor(m => m.CallsToMake, new SelectList(Model.CallsToMake.OrderByDescending(call => call.TimeStamp), null), new { @class = "btn btn-default dropdown-toggle", style = "width: 500px;" })
</p>
<p>
     @Html.ActionLink("Fetch call","FetchCall", "Person", new { id = HERE_SELECTED_CALL_ID }, new { @class = "btn btn-info btn-lg" })
</p>

视图的输入强烈类似于：@model WebApplication2.Models.ApplicationUser，并与控制器Details中的操作ApplicationUsers相关联。

如何在视图中的@ Html.DropDownListFor中选择值并在我的情况下将其传递给OTHER控制器中的操作？

---

如果不是问题我用java脚本会感觉更好（我更了解发生了什么）。

修改

这是解决方案（我的），它缺乏从java脚本函数的下拉列表中获取值。

下拉列表：

    @Html.DropDownListFor(m => m.CallsToMake, new SelectList(Model.CallsToMake.OrderByDescending(call => call.TimeStamp), null), new { @class = "btn btn-default dropdown-toggle", style = "width: 500px;" })

调用点击javascript:FetchCall()时的按钮：

<input type="button" id="FetchCallButton" value="Fetch call" onclick="javascript:FetchCall()" />

JavaScript函数：

 function FetchCall() {
        var url = '@Url.Action("FetchCall, "Person")';  
        $.post(url, { callToMakeId: SELECTED_CALL_IN_DROPDOWN_ID_HOW_TO_GET_IT}, function (data) {
            alert('YES');
        });
    }

PersonController中的操作方法：

public ActionResult FetchCall(int callToMakeId) {...}

问题：如何在java脚本函数中选择call.Id？

---

编辑2

感谢Tommy的解决方案，我已经能够在下拉列表中阅读选择。问题是我得到了下拉列表中写的内容，这是ToString()类CallToMake内部的结果。

功能：

function FetchCall() {
    alert($("#CallsToMake").val());
    var url = '@Url.Action("FetchCall", "Person")';
    $.post(url, { callToMakeId: $("#CallsToMake").val() }, function (data) {
        alert('YES');
    });
}

我在下方的内容下方显示图片，并提醒alert($("#CallsToMake").val());：

我想到的唯一解决方案是在下拉列表中显示呼叫的id，然后在控制器操作中将其删除。听起来很糟糕，不是吗？

编辑3

该列表最终如下：

@Html.DropDownListFor(m => m.CallsToMake, new SelectList(Model.CallsToMake.OrderByDescending(call => call.TimeStamp), "Id","Id"), new { @class = "btn btn-default dropdown-toggle", style = "width: 500px;" })

java脚本：

    function FetchCall() {
        alert($("#CallsToMake").val());
        var url = '@Url.Action("FetchCall", "Person")';
        $.post(url, { callToMakeId: $("#CallsToMake").val() }, function (data) {
            alert('YES');
        });
    }
=

和Action方法

 public ActionResult FetchCall(int callToMakeId) {
            CallToMake callToMake = db.CallsToMake.Find(callToMakeId);
            int idPersonToCall = callToMake.Callee.Id;
            db.CallsToMake.Remove(callToMake);
            db.SaveChanges();
            Debug.WriteLine("I AM HERE");
            return RedirectToAction("Details", new { id = idPersonToCall });
        }

正在调用Action方法但我没有被重定向到任何地方。方法只是运行，就是这样。

Answer 1

首先，您需要使用接受SelectList和DataValueField的重载来构建TextValueField。 Refer documentation。这可能看起来像

... new SelectList(Model.CallsToMake, "CallID", "CallName"), ..

脚本（假设您从按钮中删除了onclick属性）

$('#FetchCallButton').click(function() {
  var url = '@Url.Action("FetchCall, "Person")';
  var callID = $("#CallsToMake").val();
  window.location.href = url + '/' + callID; // redirect to /Person/FetchCall/3
});

Answer 2

应该是直截了当的。模型属性名称将是Razor生成的元素的id - 如下所示：

@Html.DropDownListFor(m => m.CallsToMake, new SelectList(Model.CallsToMake.OrderByDescending(call => call.TimeStamp), null), new { @class = "btn btn-default dropdown-toggle", style = "width: 500px;" })

会生成

<select id="CallsToMake" name="CallsToMake" class="btn btn-default dropdown-toggle" style="width: 500px">
    <option value="1">Some person</option>
</select>

将这些知识与jQuery调用相结合，通过id - $("#elementId")获取元素，然后我们可以使用AJAX请求发回所选值。

function FetchCall() {
        var url = '@Url.Action("FetchCall, "Person")';  
        $.post(url, { callToMakeId: $("#CallsToMake").val()}, function (data) {
            alert('YES');
        });
    }

Answer 3

对@Tommy而言，它对我有用。但是我有一个问题，如果我不得不从两个下拉列表中返回如何在查询中执行此操作。然后我找到了一种方法，我认为它会对其他人有所帮助。

function fetch(){
     var url = '@Url.Action("resultView","Test")';
            $.post(url, { LocationID: $("#location_ID").val(), TypeID:$("#type_ID").val() }, function (data) {
                alert('YES');
            });
}

这对我很有用。