如何将特定行的值传递给asp .net mvc中的控制器方法

Question

单击锚按钮时，我需要将特定行的发送值发送到控制器方法。我还需要根据下拉选择过滤数据的功能（工作正常）。我是asp mvc的新手，不知道我是否做得对，如果有没有Jquery表的更好的解决方案，请建议。

这是我的视图结构：

    @using (Html.BeginForm("Index", "Manage_Menu", FormMethod.Post, new { id = "myForm" }))
{<div style="float:left;padding-bottom:10px;">
        <b>Select Parent Page</b>
        <div>

            @Html.DropDownList("ddlPageId", (IEnumerable<SelectListItem>)ViewBag.PageDDL, "Select parent page", new { onchange = "this.form.submit();" })

        </div>
    </div>
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.PageName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.IsActive)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ShowInMenu)
            </th>
            <th>Move Menu Position</th>
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.PageName)
                </td>
                <td>
                    <a href="javascript:void()" onclick="sumitForm()">
                        <input type="hidden" name="mmmm" value="@item.Id" />
                        @if (item.ShowInMenu == true)
                        {
                            <span class="glyphicon glyphicon-ok text-success" aria-hidden="true"></span>
                        }
                        else
                        {
                            <span class="glyphicon glyphicon-remove text-danger" aria-hidden="true"></span>
                        }
                    </a>
                </td>
                <td>
                    <a href="javascript:void()" onclick="sumitForm()">
                        @if (item.ShowInMenu == true)
                        {
                            <span class="glyphicon glyphicon-ok text-success" aria-hidden="true"></span>
                        }
                        else
                        {
                            <span class="glyphicon glyphicon-remove text-danger" aria-hidden="true"></span>
                        }
                    </a>
                </td>
                <td>
                    <a href="javascript:void()" onclick="sumitForm()">
                        <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
                    </a>
                    <a href="javascript:void()" onclick="sumitForm()">
                        <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
                    </a>
                </td>
            </tr>
        }

    </table>

    <script>
        function sumitForm() {
            document.getElementById("myForm").submit();
        }
    </script>
}

这是我的控制器：

public ActionResult Index()
        {
            var pages = db.PageMains.Where(a => a.ParentPageId == 0); ;
            ViewBag.PageDDL = new SelectList(db.PageMains.Where(r => r.ParentPageId == 0), "Id", "PageName");
            return View(pages);
        }

        [HttpPost]
        public ActionResult Index(FormCollection aa)
        {
            if (!string.IsNullOrEmpty(aa["ddlPageId"]))
            {

                int filter = Convert.ToInt32(aa["ddlPageId"]);
                var pages = db.PageMains.Where(a => a.ParentPageId == filter);
                ViewBag.PageDDL = new SelectList(db.PageMains.Where(r => r.ParentPageId == 0), "Id", "PageName", filter);
                return View(pages);
            }
            else
            {
                var pages = db.PageMains.Where(a => a.ParentPageId == 0); ;
                ViewBag.PageDDL = new SelectList(db.PageMains.Where(r => r.ParentPageId == 0), "Id", "PageName");
                return View(pages);

            }


        }

我尝试将值存储在隐藏字段中，但每当我按下任何锚按钮时，它都会发送所有值。

这是我的页面设计：

Answer 1

@Stephen Muecke 建议的是一次性更新内容的理想情况。

但是，有时我们需要实时更新内容。所以处理你的情况 jQuery 是最好的选择。既然你要求使用 MVC 来做，下面是建议的解决方案（具有讽刺意味的是，在后台 jQuery 正在为你做这项工作）

您需要使用 MVC 中提供的 @Ajax.ActionLink 方法来进行 ajax 调用。要使其成为真正的 Ajax，您需要添加对 jquery.unobtrusive-ajax.min.js 的引用。否则会回退到 Postback 请求

例如

需要添加脚本参考。

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

视图中的操作按钮如下所示：

@Ajax.ActionLink("Click Me", "Clicked", "Home", new { id = item.pageId})

动作方法

        public void Clicked(string id)
        {
        //Save the page ID in database. I keep it simple but if you want, you can return the status too. 
        }

使用@Ajax.ActionLink 的一个缺点是，您不能像在示例中那样在锚标记内设置 html（例如 span 标记）。如果你也想实现这一点，请参考here

Answer 2

这里的问题是您只有一个表单，并且所有锚点都有在点击时提交表单的代码。因此，您点击任何锚点都会导致整个表单提交 - 从而提交所有数据。

如果你想提交部分数据，你可以很好地使用 ajax post。使用 ajax post 传递值并根据控制器的返回更新表。

由于您是这项技术的新手，我建议您花一些时间阅读有关 ajax 的帖子：https://api.jquery.com/jquery.post/

对于更动态的客户端绑定，您可以使用 AngularJS 等客户端框架

或

一个非常糟糕的方法是为所有行设置表单并根据元素的 Id 命名它们，并在单击时仅提交特定于该行的表单。但这将是可悲的代码。