Using Razor and javascript within each other

Question

I want to use a javascript variable in Razor like this :

my html:

@{List<AddTempViewModel> tempsToView = new List<AddTempViewModel>();
  tempsToView = (List<AddTempViewModel>)ViewData["tempsToView"];}

@if (tempsToView != null)
{
    @foreach (var item in tempsToView)
    {
       <a class="click" id="@item.TempDocumentId">
       <img id="leftSideBarElement" src="@item.TempDocumentAddressUrl" />
       </a><br />
    }
<form method="post" action="">
   <input id="documentNumber" class="form-control" type="text" name=""  
     placeholder="Email" />
 </form>

and my script :

<script>

    $(document).ready(function () {
        $(".click").click(function () {
            var divID = $(this).attr('id');
            alert(divID);
            var docName = @tempsToView[divID].TempDocumentId
            $("#documentNumber").val(docName);
        });
    });
</script>

but I can't set the index of @tempsToView with divID. please help me what to do except this. thank you.

Are you trying to set the value of documentNumber to your @tempsToView[].TempDocumentId property? If so why are you not specifying the index of the array? — Jamie Rees
– Jamie Rees, Commented Jul 1, 2015 at 16:22
Because it generate after compilation.I want to dynamically set the index of that list. — MHSaffari
– MHSaffari, Commented Jul 1, 2015 at 16:48
You can JSON encode your razor model or the specific property. Here's a related question: stackoverflow.com/questions/4072762/… — Jeremy Cook
– Jeremy Cook, Commented Jul 1, 2015 at 16:59

Chris Pratt · Accepted Answer · 2015-07-01 16:15:20Z

2

You can't set a Razor variable based on something that's happening in JavaScript. Razor runs server-side, while JavaScript runs client-side, after all Razor has already been run.

answered Jul 1, 2015 at 16:15

Chris Pratt

240k37 gold badges414 silver badges468 bronze badges

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

5 Comments

MHSaffari Over a year ago

So what do you suggest me to do except this?

Chris Pratt Over a year ago

There's nothing you can do other than change your code to approach the problem in a different way. You haven't given any details on what you're actually trying to achieve here, but basically, if you need access to the data behind @tempsToView in the JavaScript runtime, you'll either need to set some JavaScript variable to hold that data earlier in your code or use AJAX to retrieve it after the fact.

MHSaffari Over a year ago

Actually I fill a list in a controller and send that to its view. I have a tag that I want when it is clicked set some values into an input tag. What should i do except this?

Chris Pratt Over a year ago

Again, you either need to dump the contents of tempsToView into a JavaScript variable that you can reference later, or use AJAX to fetch the appropriate data remotely at a later point based on some index value.

MHSaffari Over a year ago

ok, but can you help me with some codes? or introduce a site ?

JOBG · Accepted Answer · 2015-07-01 21:08:26Z

Its not really clear what you need but If I get you right... I used to make this mix of Razor and Js but in the long run I realize 2 things:

It looks pretty ugly
It won't run if you move your js code to a separate .js file, because the Razor engine does not process JS files.

So a simple and elegant solution would be to use data attributes:

 @foreach (var item in tempsToView)
        {
           <a class="click" id="@item.TempDocumentId" 
             data-document-name="@item.TempDocumentName"
             data-document-isbn="@item.TempDocumentIsbn">
           <img id="leftSideBarElement" src="@item.TempDocumentAddressUrl" />
           </a><br />
        }

And then just get the data-property you need like:

 $(document).ready(function () {
    $(".click").click(function () {
        var divID = $(this).attr('id');
        alert(divID);
        var docName = $(this).attr('data-document-name');
        var docIsbn = $(this).attr('data-document-isbn');
        //and any other property you may need
        $("#documentNumber").val(docName);
    });
});

That way you keep, all your HTML/Razor and JS separate, and still functional, a clean code and every element is self-sufficient.

Ziaullah Khan · Accepted Answer · 2015-07-01 20:35:07Z

0

<script>

    $(document).ready(function () {
        var divID = $(this).attr('id');
        alert(divID);
        var documentName = $(@Html.Raw(JsonConvert.SerializeObject(tempsToView )))[divID];
        console.log(documentName);
    });

</script>

edited Jul 1, 2015 at 20:35

answered Jul 1, 2015 at 18:03

Ziaullah Khan

2,32420 silver badges22 bronze badges

Collectives™ on Stack Overflow

Using Razor and javascript within each other

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related