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, Jul 01 '15 at 16:22
Because it generate after compilation.I want to dynamically set the index of that list. — MHSaffari, Jul 01 '15 at 16:48
You can JSON encode your razor model or the specific property. Here's a related question: http://stackoverflow.com/questions/4072762/how-do-i-write-unencoded-json-to-my-view-using-razor — Jeremy Cook, Jul 01 '15 at 16:59

score 2 · Answer 1 · answered Jul 01 '15 at 16:15

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 01 '15 at 16:15

Chris Pratt

232,153
36
385
444

So what do you suggest me to do except this? – MHSaffari Jul 01 '15 at 16:44
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. – Chris Pratt Jul 01 '15 at 16:49
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? – MHSaffari Jul 01 '15 at 16:56
1

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. – Chris Pratt Jul 01 '15 at 17:02
ok, but can you help me with some codes? or introduce a site ? – MHSaffari Jul 01 '15 at 17:07

score 2 · Answer 2 · answered Jul 01 '15 at 21:08

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 · Answer 3 · 2015-07-01T20:35:07.030

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 01 '15 at 20:35

answered Jul 01 '15 at 18:03

Ziaullah Khan

2,020
17
20

Using Razor and javascript within each other

3 Answers3