MVC 4 button onClick that is calling razor function

Question

I have MVC 4 application. Here is the case:
1. Model HashKey - containing 1 string key
2. Model ModelObjectA - my object to transport.
3. Class A - generate unique key on request and put it in TempData along with the given ModelObjectA and returns this unique key.
4. Controller ControllerModelObjectA - serve as as pure controller.
5. View ShowAllModelObjectA - view page to display the collection from controller.

How this works. I have request to navigate to ShowAllModelObjectA. The controller call the class A with the object to transfer and sends the unique key to the ShowAllModelObjectA. The view calls method to get (not HttpGET) the object coresponding to the received key from controller. This collection of object is received and in @foreach loop disassembles the objects and put them in a table. Along with the object in the table is putted also 3 buttons that represents different functions (View details, edit, delete) to corresponding object.

The problem: On each object`s button i have to use a @functions to call ClassA and send the object itself, but ONLY on click not on for loop.

Here is some code (i have change the names :) )

@functions{
    public string ButtonClicked(ModelObjectA object)
    {
        System.Diagnostics.Debug.WriteLine("in");// to check when the method is called
        return "dae";
    }
}

The foreach loop:

 <table>
            @foreach (ModelObjectA  Object in ModelObjectACollection)
            {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => Object.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => Object.Email)
                </td>
                <td>
                    <button type="button" id="details" value="@Object" onclick="hello(value);">Details</button>
                    <button type="button" value="@Object">Edit</button>
                    <button type="button" value="@Object">Delete</button>
                </td>
            </tr>
            }
    </table>

<script type="text/javascript">
    function hello(Value) {
      alert("Clicked");
    }
 </script>

Since now i have access to the @ModelObjectA but i cant send it to the razor function, because java is on client side and razor on server.

Is there another way to make this?

EDIT: Here is the rentered buttons:

 <td>

                    <button type="button" id="details" value="(Project path).ModelObjectA" onclick="hello(value);">Details</button>
                    <button type="button" value="(Project path).ModelObjectA">Edit</button>
                    <button type="button" value="(Project path).ModelObjectA">Delete</button>
                </td>

EDIT 2: I am not sure what i need to use to fulfill that requirement. I am open for suggestions.

Answer 1

By the code you pasted the problem is that you are putting the class name in the value tag. Try something like this:

@foreach (ModelObjectA mObjA in ModelDealerCollection)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => ModelObjectA.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => ModelObjectA.Email)
        </td>
        <td>
            <button type="button" id="details" value="@mObjA" onclick="hello(value);">Details</button>
            <button type="button" value="@mObjA">Edit</button>
            <button type="button" value="@mObjA">Delete</button>
        </td>
    </tr>
}