How to use value from Jquery to Html helper razor

Question

in JavaScript

   <script>
           var xmlHttpRequest = new XMLHttpRequest();
           xmlHttpRequest.open("POST", '@Url.Action("****", "****")',true);

           xmlHttpRequest.onloadend = function() {
               @{
                     var res = (UserResponseMvc) TempData["UserResponse"];  
                }
                @Html.ShowAlert(res?.Message)
           }

           xmlHttpRequest.send();
   </script>

in Controller

public ActionResult Upload() {
       //code

        TempData["UserResponse"] = new UserResponseMvc
        {
            Success = true,
            Message = "Upload Success"
        };

        return View();

}

In this piece, the code does not know the res variable.

How can I use the res variable here?

I write in Asp.net Mvc code.

Pls help me.

`@Html` is razor code. Its parsed on the server before its sent to the view. `res` is a client side variable which does not exist at that point. Assign your message to a view model property, not a javscript variable — , Aug 16 '17 at 06:53

Tran Audi · Answer 1 · 2017-08-16T08:05:22.987

0

I think that can not happen ShowAlert if only the function displays the message, then it should be a function of javascript.

You can't. and the reason is that they do not "live" in the same time. The Razor variables are "Server side variables" and they don't exist anymore after the page was sent to the "Client side".

When the server get a request for a view, it creates the view with only HTML, CSS and Javascript code. No C# code is left, it's all get "translated" to the client side languages.

The Javascript code DO exist when the view is still on the server, but it's meaningless and will be executed by the browser only (Client side again).

This is why you can use Razor variables to change the HTML and Javascript but not vice versa. Try to look at your page source code (CTRL+U in most browsers), there will be no sign of C# code there.

In short:

The server get a request.

The server creates "takes" the view, compute and translate all the C# code that was embedded in the view, to CSS,Javascript, and HTML.

The server returns the client side version of the view to the browser as a response to the request.

the browser renders the page and executes all the Javascripts

Refer to How to pass a value to razor variable from javascript variable?

In your case, I have a some documents for you refer.

jQuery Ajax File Upload

File upload using MVC 4 with Ajax

edited Aug 16 '17 at 08:05

answered Aug 16 '17 at 07:01

Tran Audi

587
1
6
22

When uploaded, it displays an alert but does not display the value inside the message variable. Then, when I refresh the page and upload it, it displays the value inside the message variable. I tested it with both **ViewBag** and **TempData**, but did not. Where do you think the problem is? – Aug 16 '17 at 07:39
I use XMLHttpRequest for upload and can not be refreshed. This is because it does not display the value inside the Message variable. Do you have a way to solve this problem because I do not want to refresh the page. – Aug 16 '17 at 07:55
I think you should use ajax, just like @Ali Soltani guided – Tran Audi Aug 16 '17 at 07:59
I have edited the post please see. **XmlHttpRequest** is easier to upload than **Ajax**. Of course, in my opinion. – Aug 16 '17 at 08:03
Try it here, maybe it will help you: https://stackoverflow.com/questions/2428296/jquery-ajax-upload-file-in-asp-net-mvc – Tran Audi Aug 16 '17 at 08:10

score 0 · Answer 2 · answered Aug 16 '17 at 07:31

You can like this:

View

<input type="button" value="ClickToSend" onclick="sendToAction()" />

<script>
    function sendToAction() {
        var res = ["Upload1", "Upload2", "Upload3"]; // Sample

        jQuery.ajax({
            type: "POST",
            url: "@Url.Action("Upload")", // Upload is your action in controller
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(res),
            success: function (data) { alert(data); },
            failure: function (errMsg) {
                alert(errMsg);
            }
        });
    }
</script>

Action

[HttpPost]
public ActionResult Upload(List<String> res)
{
   return View();
}

How to use value from Jquery to Html helper razor

2 Answers2