How to pass value of particular row to controller method in asp .net mvc

Question

I need to send send value of particular row to controller method on clicking of anchor buttons. Also I need functionality to filter data based on dropdown selection(Working fine). I am newbie to asp mvc, Do not know if I am doing right if there is any BETTER solution without Jquery tables please suggest.

Here is my view structure:

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

Here is my Controller:

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

            }


        }

I have tried to store values inside hidden field but whenever I press any anchor button it is sending all the values.

Here is my page design:

Answer 1

The problem here is that you have a single form and all the anchors have the code to submit the form on click. So your click on any of the anchors lead to entire form submission - hence submitting all the data.

If you want partial data submission you can very well use ajax post. Pass the value using the ajax post and based on the return from controller update the table.

Since you are new to the technology I would suggest taking some time to read about ajax posts: https://api.jquery.com/jquery.post/

Also for more dynamic client side bindings you can use client side frameworks like AngularJS

OR

A very bad way would be to have forms for all the rows and name them based on the element's Id and on click submit only the form specific to the row. But this would be pathetic code.

Answer 2

What @Stephen Muecke is suggesting is the ideal situation to update the content in one action.

However, sometimes we need to update content in real time. So to handle your case jQuery is the best bet. Since you asked to do it using MVC, below is the proposed solution (Ironically, under the hood jQuery is doing the work for you)

You need to use @Ajax.ActionLink method provided in MVC to make ajax calls. To make it a real Ajax, you need to add reference to jquery.unobtrusive-ajax.min.js. Otherwise it will fallback to Postback request

E.g.

Script Reference needs to be added.

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

Your action button in view would look like:

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

Action Method

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

One drawback of using @Ajax.ActionLink is, you cannot set html inside anchor tag like you did in your example (e.g. span tag). If you want to achieve that too refer here