How to pass jQuery variable value to c# mvc?

Question

How to pass jQuery variable value to c# mvc ?

I need to fetch the value of the variable btn in mvc code behind.

$('button').click(function () {
        var btn = $(this).attr('id');

        alert(btn);

        $.ajax({
            type: 'GET',
            url: '@Url.Action("ActionName", "ControllerName")',
            data: { id: btn },
            success: function (result) {
                // do something
            }
        });
    });

Based on the variable value (Submit Button (or) Preview Button), my model will have Required validation on certain fields.

In my controller , i am calling as

[HttpGet]
    public ActionResult ActionName(string id)
    {

        var vm = id;
        return View(vm);
    }

Though , ActionResult in controller is not invoked.

Jquery : alert(btn); -- is calling. I can see the alert window showing with the id. However, I am not able to retrieve the id in the controller.

What do you mean "code behind"? There is no WPF-like code behind in MVC. C# part is running on server, and JS part is running in browser. They are not connected at all. The only way to pass a data to C# part (backend) from JS part (frontend) - is a request (AJAX for example). — vasily.sib
– vasily.sib, Commented Aug 10, 2018 at 6:42
have u checked the url in the browser result is the correct ? your sintaxys call seems ok, maybe the Url.Action is not creating the correct rute ? check it. If not , check the ruteconfig of your server api , maybe something is wrong there.. — Jordi Jordi
– Jordi Jordi, Commented Aug 10, 2018 at 7:32
@JordiJordi, I am not able to follow..you. I am sorry. Can you please advise me, what exactly i have to do — goofyui
– goofyui, Commented Aug 10, 2018 at 7:34
U can follow it, with "see source code" in the browser or var url = '@Url.Action("ActionName", "ControllerName")'; console.log(url); — Jordi Jordi
– Jordi Jordi, Commented Aug 10, 2018 at 7:35
What exactly i have to look for in the source code ( view source ) ? — goofyui
– goofyui, Commented Aug 10, 2018 at 7:48

Tetsuya Yamamoto · Accepted Answer · 2018-08-10 08:51:56Z

1

You need to use jQuery.ajax() (or its shortened form jQuery.get()/jQuery.post()) with GET/POST method and set up a controller action with an argument to pass button ID:

jQuery (inside $(document).ready())

$('button').click(function () {
    var btn = $(this).attr('id');
    var url = '@Url.Action("ActionName", "ControllerName")'; 
    var data = { id: btn };   

    // if controller method marked as POST, you need to use '$.post()'
    $.get(url, data, function (result) {
        // do something
        if (result.status == "success") {
            window.location = '@Url.Action("AnotherAction", "AnotherController")';
        }
    });
});

Controller action

[HttpGet]
public ActionResult ActionName(string id)
{
    // do something
    return Json(new { status = "success", buttonID = id }, JsonRequestBehavior.AllowGet);
}

[HttpGet]
public ActionResult AnotherAction()
{
    // do something
    return View(model);
}

If you want to pass retrieved button ID from AJAX into other action method, you can utilize TempData or Session to do that.

edited Aug 10, 2018 at 8:51

answered Aug 10, 2018 at 6:56

Tetsuya Yamamoto

25.1k8 gold badges43 silver badges63 bronze badges

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

9 Comments

goofyui Over a year ago

[HttpGet] public ActionResult ActionName(string id) { // do something var vm = id; return View(vm); }

Tetsuya Yamamoto Over a year ago

Nope, AJAX is not intended to return main view. If you want to return main view, use RedirectToAction to another controller action which returns main view.

goofyui Over a year ago

can you please review my post .. i just updated the post

goofyui Over a year ago

Why do [HttpGet] ActionResult in the Controller is not invoking?

Tetsuya Yamamoto Over a year ago

var vm = id; => is that id contains any value? The id must contain button ID if your AJAX callback has success response. The GET method will not invoking if the AJAX has errors (use error block with alert to make sure).

|

miken32 · Accepted Answer · 2022-10-11 17:58:08Z

1

It is a nice coincidence that you use the word "fetch" to describe what you want to do.

jQuery runs in the browser as a frontend framework. Meaning that it runs on the client`s computer. Your MVC-C#-Code lies on the server. Therefore, if you want to send data between those two computers, you need to use the http protocol.

1. Ajax and REST:

Using an ajax call using http methods (post or put) to push your variable value as JSON to the backend`s REST api (route). For this option, you might want to have a look at the fetch function of javascript.

2. HTML Forms

Use a html form where you store the variable value inside one input element. A form submission will perform a http post (by default) request to the backend as well and use all input element values as post parameters.

edited Oct 11, 2022 at 17:58

miken32

42.5k16 gold badges127 silver badges177 bronze badges

answered Aug 10, 2018 at 6:41

Andre

4,6855 gold badges24 silver badges34 bronze badges

4 Comments

vasily.sib Over a year ago

Why are this answer is downvoted? It is correct one for sure:\

goofyui Over a year ago

Jquery is actually fetching the values of HTML syntax. <button type="submit" id="submitButton">Submit</button> <button type="submit" id="previewButton">Preview</button> I am trying to get the id value to Controller.

vasily.sib Over a year ago

@goofyui 1st: jquery fetching anything the server respond with. It may be HTML, or JSON, or XML, or even binary file (if needed). 2nd: It also common to pass some data to server, while fetching. 3rd: fetch function, that is suggested, is not a jQuery, its pure JS.

Reinstate Monica Cellio Over a year ago

This isn't an answer as it doesn't solve the OP's question, but I can see that at the time of posting it was relevant and worthwhile. However, the OP has since updated the question so anyone reading it now will see the OP making an Ajax call to their controller and then you explaining that they need to make an Ajax call to their controller. If you don't look at the question history this answer does look pointless, so I expect you will get downvotes, despite being worthwhile info that clearly helped the OP.

David Wimbley · Accepted Answer · 2018-08-10 08:25:46Z

0

There are many ways to accomplish what you are looking to do, but I'll stick to using your code sample.

So what you need to do is utilize the .ajax call in jquery to send data from your view to your controller. More on that here: http://api.jquery.com/jquery.ajax/

Using your code, you'd put the .ajax call within your logic flow of what to do based on which button is clicked.

$("button").click(function ()
{
    var btn = this.id;
    if (btn == "previewButton")
    {
        $.ajax({
            url: "/MyApp/MyAction",
            type: "POST",
            data: { btnId: btn },
            dataType: "json",
            async: true,
            cache: false
        }).success(function(data){
            // do something here to validate if your handling worked
        }).error(function(){
            // Do something here if it doesnt work
        });

    }

}

You'll see that there is a URL. In my example i've chose MyApp as my controller and MyAction as the method of the controller in which we are posting values to. The ajax call posts 1 parameter with a property of btnId. If you need to pass more data, the property name in the jquery call should correspond with an argument of the actions method signature within the controller.

So my controller looks like

public MyAppController : Controller 
{
    [HttpPost]
    public JsonResult MyAction(string btnId)
    {
        Debug.WriteLine("btnId: {0}", btnId);

        return Json(new{ ButtonId= btnId });
    }
}

This would be one way to handle passing values from your view to your controller using .ajax calls with jquery.

My preferred way is to use the Html helpers of Ajax.BeginForm which could be another option for you.

https://www.aspsnippets.com/Articles/ASPNet-MVC-AjaxBeginForm-Tutorial-with-example.aspx

edited Aug 10, 2018 at 8:25

answered Aug 10, 2018 at 7:05

David Wimbley

766 bronze badges

3 Comments

goofyui Over a year ago

return Json(new{ ButtonId: btnId }); -- ButtonId is throwing error in my Controller. We dont have the variable name as ButtonId

goofyui Over a year ago

I tried both Post and Get. However, my syntax in the controller is not invoking. Can you please see my post

David Wimbley Over a year ago

You are trying to return a view via a javascript ajax call which you cannot do. If you wish to use ajax I suggest you do a redirect in the success function of your ajax call. Something like window.href = url. I'm on my phone so dont have exact syntax handy. Also I had a typo in controller code, was using colon instead of equals, updated answer.

Collectives™ on Stack Overflow

How to pass jQuery variable value to c# mvc?

3 Answers 3

9 Comments

1. Ajax and REST:

2. HTML Forms

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

1. Ajax and REST:

2. HTML Forms

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related