[RESOLVED]In asp.net razor mvc How do I utilize the selected dropdown item within a if statement, within a div?

In asp.net razor mvc How do I utilize the selected dropdown item within a if statement, within a div?

As you can see from the code below, I created a dropdown and filled it with data.

I want the selected item to be utilized in the below div.

- When the user clicks on an item, what is contained within that div is revealed
- Then the selected string item is used within the `if statement` within the
div

What currently happens is, the selected item isn’t globally accessible, causing the issues you can see below.

But as I’ve been told by knowledgable others, you can’t utilise the same variable between Javascript and
asp.net mvc razor. So the below will not work.

How can this be accomplished? (utilization of the selected dropdown item within a if statement, within a div?)

@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<div class="display-field" align="left">
<select name="mydropdown" id="mydropdown" onchange="onChange()">
@foreach (var lLMMI in lIM)
{
<option value="@lLMMI.Key.Product.PCode">
@locItem.Key.Loc.N (@lLMMI.Key.Loc.Code)
</option>
}
</select>
<br /><br />
</div>
}

var itemselected = "";

<div>
<script>
function onChange() {
var item = document.getElementById("mydropdown").value;
$('#summary').show();
}
</script>

<div id="summary">

@foreach (var lLMMI in lIM)
{
if (@lLMMI.Key.Pro.PCode == itemselected.toString())
{
<summary>extra html elements are added etc.</summary>
}
}

Hi,

Try this code:

<script>
$(document).ready(function(){ $(".pcodes").hide(); });
function onChange() {
var item = $("#mydropdown").val();
$(".pcodes").hide();
$('#summary').show();
$('#a'+item).show();
}
</script>

<div id="summary">
    @foreach (var lLMMI in lIM)
    {
        <div id="a@lLMMI.Key.Pro.PCode" class="pcodes">
            <summary>extra html elements are added etc.</summary>
        </div>
    }
</div>

//code not tested. let me know if any issues in above code.

I’m sorry I didn’t reply sooner. But this does not pass through the selected item from the drop-down to the variable value itemselected (within the if statement)

I’ve been told by a collegue that:

To get rid of all the code in between the <div id="summary"> tags. The if statement is meaningless because its rendered on the server before its sent to the client, so at that point the user has not selected an item. 

So how do I instead

Hide (or stop the rendering) of what’s generated within that div then until the user has selected an item from the drop-down. Then upon the user’s selection generate what’s within the div, utilising the selected drop-down value as expressed above

To better help me, please glance over these other threads I’ve opened (still looking for the answer)

http://stackoverflow.com/questions/26378121/in-asp-net-razor-mvc-how-do-i-utilize-the-selected-dropdown-item-within-a-if-sta?lq=1

http://stackoverflow.com/questions/26377648/how-do-i-utilize-the-same-variable-in-both-javascript-code-and-asp-net-razor-mvc?lq=1

Hi,

have u tried my approach mentioned in my previous post?

try it and then post the issues or challenges u r facing with it.

Yes, it doesn’t work

@a doesn’t refer to variable

It just comes back with the error : "cannot resolve symbol a"

Hi WithoutanId,

For Raju’s code, please modify it like this:

<div id='@string.Format("a{0}",lLMMI.Key.Pro.PCode)' class="pcodes">
            <summary>extra html elements are added etc.</summary>
        </div>

Best Regards

Starain

Leave a Reply