根据 DropDownList 的值和模型调用 Action 方法

Question

我的视图中有一个下拉列表。我需要使用户能够从下拉列表中选择一个值并单击按钮/ActionLink 以调用同一控制器中的另一个操作方法。需要传递给新 ActionMethod 的值是从下拉列表中选择的值的 ID 以及传递到视图中的模型的 ID。模型和下拉列表没有以任何方式链接在一起。

我已经尝试onchnage = document.location.href 设置动作方法的路径并将单个值传递给动作方法。但是 document.location.href 的问题在于它将 url 附加到现有的 url 中，这是不受欢迎的；即，最终的 url 原来是 localhost:port/controller1/action1/controller1/action2 这应该是简单的 localhost:port/controller1/action2

我正在寻找一种无需使用 javascript 即可完成的方法，因为我已经尝试过了。

视图中的代码

@using (Html.BeginForm("Copy","SetValues",FormMethod.Post))
{
    <p>
        @Html.DropDownList("OptionValueID", null, "Select")
        <input type="submit" value="Copy" />

        //This is the preferable method though
        @*@Html.ActionLink("Copy", "Copy", "SetValues", new { @OptionValueID = @ViewBag.id,@CopyID = CopyDDL.SelectedValue},null)*@
    </p>
}

复制函数将采用两个参数：Id of the selected item 和 ID that is being passed through ViewBag.id

View 返回的 View 将是一个不同的 View

JavaScript 我尝试过的

<script language="javascript" type="text/javascript">
    function copy(_OptionValueID)
    {
        var url = "/SetValues/Copy";
        $.ajax({
            url: url,
            data: { copyid: _OptionValueID},
            type: "POST",
            success: function (data) { }


        });
        response();
    }
</script>

它根本不评估。

调用此视图的操作方法

public ActionResult Index(int id)
{
        var ov = db.OptionValue.Include(x => x.Option).FirstOrDefault(x => x.OptionValueID == id);
        var opid = ov.OptionID;
        var op = db.Option.Include(x => x.TechnicalCharacteristic).FirstOrDefault(x => x.OptionID == opid);
        var tcid = op.TechnicalCharacteristicID;
        var tc = db.TechnicalCharacteristic.Include(x => x.TcSets).FirstOrDefault(x => x.TechnicalCharacteristicID == tcid);
        var tcset = tc.TcSets;
        var opv = db.OptionValue.FirstOrDefault(x => x.OptionValueID == id);
        ViewBag.OptionValue = opv.OptionVal;
        ViewBag.Option = opv.Option.OptionName;
        ViewBag.Lsystem = opv.Option.Lsystem.LsystemName;
        ViewBag.FamilyName = opv.Option.Lsystem.LsystemFamily.FamilyName;
        ViewBag.OptionValID = id;
        ViewBag.OptionID = opv.OptionID;
        var setValue = db.SetValue.Where(x=>x.OptionValueID==id).OrderBy(x=>x.TcSet.SetName);
        ViewBag.OptionValueID = new SelectList(db.OptionValue.Where(x=>x.OptionID==opid), "OptionValueID", "OptionVal");
        return View(setValue.ToList());
}

我已经检查了与此相关的大多数问题，但没有一个有在不使用模型的情况下传递两个参数的开销。

更新：更清晰

 public ActionResult copy(int OptionValueID,int CopyID)
 {
     //do Something
     return View("Error");
 }

以上是复制方法

OptionValueID = ViewBag.OptionValID //Got from the Action Method Index of SetValues
CopyID = Value from the DropDownlist

根据回答编辑

@using (Html.BeginForm("Copy","SetValues",FormMethod.Post))
{
    <p>
        @Html.DropDownList("CopyID", null, "Select")
        <button type="submit" id="Copy" data-id="@ViewBag.OptionValID"> Copy </button>
    </p>
}

现在页面正在被重定向，但没有传递任何参数。我应该添加路由值吗？

Answer 1

如果没有 javascript，您将无法做到这一点。您的 ActionLink() 方法在发送到客户端之前在服务器上进行解析，因此任何路由值都是控制器中的初始值，而不是用户在视图中创建的任何编辑值。为了响应客户端事件，您需要 javascript。

您可以使用 ajax 将值发布到服务器方法。

包含一个按钮并处理其点击事件

<button type="button" id="Copy" data-id="@ViewBag.id">Copy</button>

脚本

var url = '@Url.Action("Copy", "SetValues")';
$('#Copy").click(function() {
  var optionID = $(this).data('id');
  var copyID = $('#OptionValueID').val();
  $.get(url, { OptionValueID: optionID, copyID : CopyID }, function(response) {
    // do something with the response
  });
});

或者，如果您想重定向，则将 $.get() 替换为

location.href = url + '?OptionValueID=' + optionID + '&CopyID=' + copyID;

编辑

根据修改后的问题和 cmets，如果您想发布和重定向，则不需要任何 javascript 或链接。下拉列表需要为@Html.DropDownList("CopyID", null, "Select")，以便其选择的值绑定到方法参数int CopyID，并且由于未编辑OptionValueID，因此将其值添加为表单中的路由参数

@using (Html.BeginForm("Copy", "SetValues", new { OptionValueID = ViewBag.OptionID }, FormMethod.Post))

或为值添加隐藏输入

<input type="hidden" name="OptionValueID" value="@ViewBag.OptionID" />