javascript - 如何将数组从 JavaScript 传递到我的操作方法

Question

我的 ASP.Net mvc 3 Web 应用程序中有以下 View :-

@model IEnumerable<MvcApplication4.Models.Account>

@{
    ViewBag.Title = "customer";
}

<h3>Customers Info</h3>


    <script  type="text/javascript">

        $(function() {

            $("#MoveRight,#MoveLeft").click(function(event) {

                var id = $(event.target).attr("id");

                var selectFrom = id == "MoveRight" ? "#SelectLeft" : "#SelectRight";

                var moveTo = id == "MoveRight" ? "#SelectRight" : "#SelectLeft";



                var selectedItems = $(selectFrom + " :selected").toArray();

                $(moveTo).append(selectedItems);

                selectedItems.remove;

            });

        });

    </script>  

      <select id="SelectLeft" multiple="multiple">
 @foreach (var item2 in Model.OrderBy(a=>a.ORG_NAME)) {
            <option value = "@item2.ORG_ID" >@item2.ORG_NAME</option>




}
      </select>      

    <input id="MoveRight" type="button" value=" Add >> " />

  <input id="MoveLeft" type="button" value=" << Remove " /> 

      <select id="SelectRight" multiple="multiple">           

      </select>
 @Html.ActionLink("Next Page", "CustomersDetials", "Home", new {  }, null)//for testing only

但我面临一个问题，我需要通过单击“下一页”将 moveTo 中的所有记录传递给 customersDetials 操作方法 Action 链接。所以任何人都可以建议一种方法，我可以使用这种方法将 moveto 中的项目从我上面的 View 传递到我使用 html.actionlink 的操作方法。

:::UPDATE:::

我已将以下内容添加到 View 中:-

@using (Html.BeginForm("CustomersDetials", "Home"))
{

      <select id="SelectLeft" multiple="multiple">
 @foreach (var item2 in Model.OrderBy(a=>a.ORG_NAME)) {
            <option value = "@item2.ORG_ID" >@item2.ORG_NAME</option>


}
      </select>      

    <input id="MoveRight" type="button" value=" Add >> " />

  <input id="MoveLeft" type="button" value=" << Remove " /> 



      <select id="SelectRight" name="SelectRight" multiple="multiple">           

      </select>
    <p>
<button type="submit">Next Page</button></p>

}

然后我创建了以下 ViewModel 类来挖掘所选客户的值(value):-

public class SelectedCustomers
{
    public IEnumerable<Account> Info { get; set; }
}

然后我添加了以下操作方法:-

   public ActionResult CustomersDetials(string[] SelectRight)
        {
             foreach (var item in SelectRight) {

                // how to assign the values of the array to my viewmodel object       
        }

但我无法确定如何在我的操作方法中将数组的值分配给 viewmodel 对象。

:::UPDATE2:::

这就是我得到的结果。操作方法如下所示:-

    public ActionResult CustomersDetails(string[] SelectRight)
        {
            var selectedCustomers = new SelectedCustomers
            {
                Info = SelectRight.Select(GetAccount)
            };


        return View(selectedCustomers);

    }
    private Account GetAccount(string id)
    {


        return entities.Account.Find(id);
    }
}

以及以下 View :-

@model MvcApplication4.Models.SelectedCustomers

@{
    ViewBag.Title = "CustomerDetials";
}

<h2>CustomerDetials</h2>
//code goes here

@foreach (var item in Model.Info) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.ORG_ID)
        </td>

但是当我运行该应用程序时，出现了以下错误:-

The type of one of the primary key values did not match the type defined in the entity. See inner exception for details.

关于:-

return entities.Account.Find(id);

::已解决::我在操作方法和 GETAccount 函数中都将字符串更改为很长。

Answer 1

您可以将 Next 链接设为表单的提交按钮。然后当提交表单时，它会自动将选择列表中的选定项目发送到服务器。这是我推荐给你的解决方案。只需将选择列表放入一个表单中，也不要忘记为您的选择列表命名，因为这就是您将在 Controller 操作中用于检索所选值的名称:

@using (Html.BeginForm("CustomersDetials", "Home"))
{
    <select id="SelectLeft" name="SelectLeft" multiple="multiple">
        @foreach (var item2 in Model.OrderBy(a => a.ORG_NAME)) 
        {
            <option value="@item2.ORG_ID">@item2.ORG_NAME</option>
        }
    </select>

    <select id="SelectRight" name="SelectRight" multiple="multiple">           
    </select>

    <button type="submit">Next Page</button>
}

顺便说一句，您可以使用内置的 Html.ListBoxFor 帮助程序，而不是在您的 View 中执行那些可怕的 foreach 循环来生成那些多个选择框。

现在您的 Controller 操作可能如下所示:

[HttpPost]
public ActionResult CustomersDetials(string[] selectRight)
{
    ... the selectRight parameter will contain the selected values in the 
        corresponding select list
}

---

处理这种情况的另一种可能性是使用 AJAX:

@Html.ActionLink("Next Page", "CustomersDetials", "Home", null, new { id = "next" })

然后:

$('#next').click(function() {
    $.ajax({
        url: this.href,
        type: 'POST',
        contentType: 'application/json;charset=utf-8',
        data: JSON.stringify(selectedItems),
        success: function(data) {

        }
    });
    return false;
});

当然，您需要使 selectedItems 成为全局变量，因为现在您已经在 MoveRight、MoveLeft 按钮的点击处理程序中声明了它。否则，将无法在下一个链接的点击事件中访问此变量。

---

更新 1:

根据您的更新，您可以像这样填充您的 View 模型:

public ActionResult CustomersDetials(string[] selectRight)
{
    var selectedCustomers = new SelectedCustomers
    {
        Info = selectRight.Select(GetAccount)
    };
    ... use your view model here
}

private Account GetAccount(string id)
{
    // TODO: given the selected ID go and fetch the corresponding
    // Account instance and return it here:

    return new Account
    {
        Id = id
    };
}