Getting a local variable value using jQuery

Question

I have a little problem when trying to get the value of a local int variable on a view, using jQuery. So, I have a the main view, and as you can see in the code below, I use a partial view named "_Result", when I try to get the value of indexPage by handling the click event of a button in the partial view, I get 0, event if I initialize my variable by another value(5 for example). Any idea why ?

Thanks in advance

My view :

@model System.Data.DataTable

@{var pageIndex = 5;}

<div>
    <div>
        <span>Téléphone ?</span>
        <input id="idTxTel" type="text" name="txTelephone"/>

        <input id="idBnSearch" type="submit" value="Chercher" name="bnSearch"/>
    </div>

    @Html.Partial("_Result", Model)
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#idBnSearch").click(function () {
            //The right value (5)
            alert('@pageIndex');

            var telValue = $("#idTxTel").val();
            var methodUrl = '@Url.Content("~/Search/GetReverseResult/")';

            '@{pageIndex = 0;}'
            doReverseSearch(telValue, '@pageIndex', methodUrl);
        });

        $("#bnNextPage").live("click", function () 
        {
            //Not th right value (0)
            alert('@pageIndex');
        });
    });
</script>

My doReverseSearch method :

function doReverseSearch(telValue, pageIdx, methodUrl) 
    {
        $.ajax(
            {
                url: methodUrl,
                type: 'post',
                data: JSON.stringify({ Telephone: telValue, pageIndex: pageIdx }),
                datatype: 'json',
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    $('#result').replaceWith(data);
                },
                error: function (request, status, err) {
                    alert(status);
                    alert(err);
                }
            });
    }

My partial view :

<div id="result">
    <h2>Résultat de la recherche</h2>
    <div>@ViewBag.CountResult entreprises trouvées</div>

    @if(Model != null)
    {
        foreach (DataRow row in Model.Rows)
        {
            <h3>@row["CompanyName"]</h3>
        }
    }

    <hr />
    <div>
        <span>Page N sur M</span>
         <input id="bnPreviousPage" type="submit" value="Précédant" name="bnPrevious"/>
         <input id="bnNextPage" type="submit" value="Suivant" name="bnNext"/>
    </div>
</div>

When you View Source, what do you see for each `alert('@pageIndex');`? I don't see any way this can go wrong since you are generating a value into the View (not the Partial View). If the click event did not fire for the one done with `live` that would be another matter... — Eric J., Jul 17 '12 at 00:21
I don't get it eather, but since it doesn't give the correct value, it means that there is a problem some where ! The alert in the #idBnSearch gives me 5, the alert in the #bnNextPage gives me 0 — SidAhmed, Jul 17 '12 at 00:25
What does your code look like after it's been rendered? In the browser, do a view source to see what razor actually did for you. — Matt Greer, Jul 17 '12 at 00:32
I think there is something else which is creating the problem but not visible in the code you have given. — Mohayemin, Jul 17 '12 at 03:30
You haven't shown your real code. The code you have shown works fine. — Darin Dimitrov, Jul 17 '12 at 06:00
When I di View source code on my browser, the alerts seams like this : The fist one : alert('5'), the second one : alert('0') !!! — SidAhmed, Jul 17 '12 at 07:25

score 0 · Answer 1 · answered Jul 17 '12 at 08:19

0

Razor inside javascript has to be wrapped in a block

so you can do this:

<script>
// global value for page
<text>
var myPage = @pageIndex;
<text>
</script>

what would be far easier is give the button an attribute of data-page and ask for attribute in click event:

<button data-page="@("pageIndex")" id="myButt" />

$("#myButt").on("click",function(e){
  var pageIndex = $(this).attr("data-page");
  alert(pageIndex);
});

answered Jul 17 '12 at 08:19

davethecoder

3,856
4
35
66

Thanks for your response, about your second seggestion, The NextButton is in the partial view, so I'm not able to give it the attribute with the @pageIndex value.. – SidAhmed Jul 17 '12 at 08:58
And I don't think I understood you well when you said : "Razor inside javascript has to be wrapped in a block" and then gived me the example above, can you explain more please ? – SidAhmed Jul 17 '12 at 09:03
you can pass a string or an int to the partial, it does not matter that it is partial, it can still accept model content, so therfor it can accept you Int of pageIndex as for the script, there are quite a few post on the subject, try this one: http://stackoverflow.com/questions/4045308/razor-syntax-and-javascript/4047382#4047382 but I would go with the model, if your working and building an MVC site, you have the model passed to your page, just pass it onto your partial too !! :-) – davethecoder Jul 17 '12 at 09:25
were does pageINdex come from, normally it would be Model.pageIndex but you have just said pageIndex, is pageINdex in your model, use a base model with a property of int called pageIndex so that you can have Model.pageIndex as i dont understand were you actually got the word from – davethecoder Jul 17 '12 at 09:28

Getting a local variable value using jQuery

1 Answers1