如何将数组从JavaScript传递给我的action方法

时间:2012-12-23 17:41:01

标签: javascript jquery asp.net asp.net-mvc asp.net-mvc-3

我在ASP.Net mvc 3 Web应用程序中有以下视图: -

@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操作方法。所以任何人都可以建议一种方法,我可以使用movetohtml.actionlink中的项目从我的上方视图传递到我的操作方法。

::: UPDATE :::

我在视图中添加了以下内容: -

@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类来挖掘所选客户的价值: -

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

然后我添加了folloiwng动作方法: -

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

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

但我无法确定如何将数组的值分配给action方法中的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);
    }
}

以下观点: -

@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);

::解决:: 我在action方法和GETAccount函数中将字符串更改为long。

1 个答案:

答案 0 :(得分:2)

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

@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帮助程序而不是在视图中执行那些可怕的foreach循环来生成多个选择框。

现在您的控制器操作可能如下所示:

[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按钮的click处理程序中声明了它。否则,在下一个链接的click事件中将无法访问此变量。


更新1:

根据您的更新,您可以像这样填充您的视图模型:

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
    };
}