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.

But your view gets prepare on server side and you can include javascpit in your view. What value is getting passed to your hello() function? — Jatin patil
– Jatin patil, Commented Aug 23, 2013 at 17:21
<button type="button" id="details" value="@ModelObjectA" onclick="hello(value);"> - so it is @ModelObjectA — Daniel Donev
– Daniel Donev, Commented Aug 23, 2013 at 17:42
Could you consider a different title for your question please? "MVC 4 questions" is too vague and does not help other's who may benefit from the answers. — Jason Evans
– Jason Evans, Commented Aug 23, 2013 at 18:12

Martin · Accepted Answer · 2013-08-23 17:51:24Z

7

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

answered Aug 23, 2013 at 17:51

Martin

77012 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Daniel Donev Over a year ago

Yes I saw that. I misspelled in the examlpe it is @Object. I just fixed it.

Martin Over a year ago

Can you paste an example of the HTML code when its rendered? Just of the button is enough.

Daniel Donev Over a year ago

I don`t have access to the company SQL Server at home i have to simulate it. But i can try.

Daniel Donev Over a year ago

I posted it in the question EDIT:

Martin Over a year ago

For what I can see you are assigning the object itself to "value", you should assign some property of the object. For example: <button type="button" value="@mObjA.Id">Edit</button>. Do you want that button to redirect you to another page? If that's the case you should assign some identification attribute to the value and in the onclick event calla JS function or a method in the Controller.

|

Collectives™ on Stack Overflow

MVC 4 button onClick that is calling razor function

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related