displaying a different table based on the drop down selection

Question

displaying a different table based on the drop down selection

Anjali Agarwal 1,531

I have the following drop down list on my page. I also have a onchange event if someone selects an item from the drop down list. I can see the item index in the onchange event:

@(Html.Kendo().DropDownList()
                .Name("Awards")
                .Label(label => label.Content("Please select Award type from the list. "))
                .DataTextField("AwardCategory1")
                .DataValueField("AwardId")
                .OptionLabel("Select award")
                
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("GetAwards", "Home");
                    });
                })
              .Events(e => e.Change("onChange"))
            )
			
			This is my onChange event:
			
			<script>
  function onChange(e) {
         var dropdownlist = $("#Awards").data("kendoDropDownList");
         var text = dropdownlist.text();
         $(".award").text(text);
         alert(text);
        
    }
</script>

In the alert, I can see the selected item from the dropdown. I want to display a table on my web page based on the selected item so if text =="Award5" then I want to display a totally different table on my Razor page. I have the following table on my page if "Award1", "Award2" and Award3" are selected from the drop down, but if "Award4" and "Arard5" is selected then I want to display a different table. Is it possible to do that:

display below table if users selects either "Award1", "Award2" and Award3" from drop down.

<table class="table  table-responsive table-hover btable">
                 
                    @foreach (var d in Model.Transactions)
                    {
       
                        <tr>
                            <td>@d.Status</td>
                            <td>@d.Type</td>
                            <td>@d.TransactionId</td>
                            <td> @d.Created.Value.ToShortDateString()</td>
                            <td>@d.StatusChangeDate.Value.ToShortDateString()</td>
                        </tr>
                    }
                </table>

		If the user selects "Award4" from the drop down then I want to select this table:

<table class="table  table-responsive table-hover btable">
                 
                    @foreach (var d in Model.Transactions)
                    {
       
                        <tr>
                            <td>@d.StatusName</td>
                            
                            <td>@d.TransactionName</td>
                            <td> @d.Created.Value.ToShortDateString()</td>
                            <td>@d.StatusChangeDate.Value.ToShortDateString()</td>
                        </tr>
                    }
                </table>

			This is the Razor page. Not sure, if it is possible with if else statement.

AgaveJoe 30,126 Reputation points

2023-10-14T13:10:46.13+00:00

One option is to design partial views that have the HTML table snippets you want. Then in the onchange event call a page handler or action that returns the partial content. You'll also need to write JavaScript code that replaces the content on the current Razor Page.

A Razor Page handler can return partial content or an MVC action will work.

Declare partial views

This is the Razor page. Not sure, if it is possible with if else statement.

It is possible. Make sure the select is in a form then in the onchange event write JavaScript to submit the form. In the Razor Page simply get the select's value and do whatever logic you need to render the HTML accordingly.

Tutorial: Get started with Razor Pages in ASP.NET Core

Accepted answer

0 additional answers

Your answer

AgaveJoe 30,126 Reputation points

2023-10-14T13:10:46.13+00:00

One option is to design partial views that have the HTML table snippets you want. Then in the onchange event call a page handler or action that returns the partial content. You'll also need to write JavaScript code that replaces the content on the current Razor Page.

A Razor Page handler can return partial content or an MVC action will work.

Declare partial views

This is the Razor page. Not sure, if it is possible with if else statement.

It is possible. Make sure the select is in a form then in the onchange event write JavaScript to submit the form. In the Razor Page simply get the select's value and do whatever logic you need to render the HTML accordingly.

Tutorial: Get started with Razor Pages in ASP.NET Core

Answer 1

Hi,@Anjali Agarwal,you could send an ajax call as below to hit the hander in your page model and update the page on success

<div id="mydiv">

</div>

<script>
    function onChange(e) {
        var dropdownlist = $("#Awards").data("kendoDropDownList");
        var text = dropdownlist.text();
        $(".award").text(text);
        alert(text);
        var url = "YourPage?handler=partial&text="+text ;
        $.ajax({
            url: url,
            method :"GET"  ,
            success:function(result){
                $("#mydiv").html(result)
            }
        })

    }
</script>

Handler in your page model:

public class YourPageModel : PageModel
    {
         //other handler 
         .......
       
        public IActionResult OnGetPartial(string text)
        {
            //pass the viewmodel contains the text to your razor view
            return Partial("Partial",yourviewmodel);
        }
    }

Add a RazorView (notice not RazorPage)named Partial in your Pages folder

User's image

make the judegement in your RazorView(You could also make the judegment in the handler and return different partial view):

@if(Model.SomeProperty...... )
{
   .....
}
else
{
    ........
}

Share via

displaying a different table based on the drop down selection

0 additional answers

Your answer