Still having issues posting back and keeping the DropList Selection

Question

User982203039 posted

I am still not figuring out how to do this. I have a view that has 2 DropList that I want to filter by when a new on is selected. 1 is Status and 1 is Assigned.  So If I chose a Status, let's say new it posted to the controller and returns all status of new AND whatever the value of assigned to is. And vise versa and upon the page refresh the status and assigned to remembers the selection. I can get results when changing status with the code below but it ignores Assigned and status goes back to All after the refresh. Can someone help me?

EB

Controller:

 public ActionResult Index(string Status, string Tech)
        {
            var helpdesk = from m in db.HelpDesks
                          where m.Status == Status || Status == null || Status == "" &&
                                m.Technician == Tech || Tech == null || Tech == ""
                           select m;

            List<SelectListItem> Stat = new List<SelectListItem>()
            {
                new SelectListItem { Text = "All", Value = "" },
                new SelectListItem { Text = "New", Value = "New" },
                new SelectListItem { Text = "In Process", Value = "In Process" },
                new SelectListItem { Text = "Assigned", Value = "Assigned" },
                new SelectListItem { Text = "Complete", Value = "Complete" },
            };

            List<SelectListItem> Technician = new List<SelectListItem>()
            {
                new SelectListItem { Text = "Internal", Value = "Internal" },
                new SelectListItem { Text = "External", Value = "External" },

            };


            ViewBag.Stat = Stat;
            ViewBag.Technician = Technician;


            return View(helpdesk.ToList());
        }

View:

@model IEnumerable<Intranet.Models.HelpDesk>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>
    .thumb {
        max-width: 100px;
        max-height: 100px;
        width: expression(this.width > 100 ? "100px" : true);
        height: expression(this.height > 100 ? "100px" : true);
    }

    .auto-style2 {
        color: green;
        font-size: 11px;
        white-space: nowrap;
    }
</style>

<h2>Help Desk</h2>
<h>

    Status: @Html.DropDownList("Stat", ViewBag.Stat as SelectList, new { @class = "ddlfilter" })

    Assigned: @Html.DropDownList("Technician", ViewBag.Technician as SelectList, new { @class = "ddlfilter" })


</h>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $(".ddlfilter").change(function () {
            var stat = $("#Stat").val();
            var tech = $("#Technician").val();
            var routeVal = "?Status=";
            var routeVal1 = "Tech=";
            var url = '@Url.Action("Index", "HelpDesk")';
            var link = url + routeVal + stat + "&" + routeVal1 + tech
            window.location.href = link
        });
    })
    </script>


<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="hoverTable">
    <tr>
        <th>

        </th>
        <th>
            Request By
        </th>
        <th>
            Request
        </th>
        <th>
            Resolution
        </th>
        <th>
            Assigned To
        </th>
        <th>
            Status
        </th>
        <th>
            Request Date
        </th>

        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td style="width:50px">
                @if (item.Status == "New")
                {
                    @Html.ActionLink("Accept", "AssignHelpDeskTicket", "HelpDesk", new { id = item.ID }, new { @class = "auto-style2" })
                }
            </td>
            <td style="width:200px;vertical-align:top">
                @item.RequestedBy
            </td>
            <td style="width:400px">
                @item.Request
            </td>
            <td style="width:400px">
                @item.Resolution
            </td>
            <td style="width:100px">
                @item.Technician
            </td>
            <td style="width:75px">
                @item.Status
            </td>
            <td style="width:175px">
                @item.CreateDate
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
                @Html.ActionLink("Details", "Details", new { id = item.ID }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.ID })
            </td>
        </tr>
    }

</table>

Answer 1

User665608656 posted

Hi Baze,

According to your description, I recommend you use a partial view to display your table dynamically based on the dropdownlist value.

First, create a controller named HelpDesk and return model in Index view.

Then, in Views folder, find HelpDesk,and add a partial view named DropdownTable in it.

How to create a partial view , you can refer this link : https://stackoverflow.com/a/52112413

Here is the code of Index view( the model and data are not the same as yours):

@model IEnumerable<MVC_Cases.Models.Geography>
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>HelpDesk</title>
    <style>
        .thumb {
            max-width: 100px;
            max-height: 100px;
            width: expression(this.width > 100 ? "100px" : true);
            height: expression(this.height > 100 ? "100px" : true);
        }

        .auto-style2 {
            color: green;
            font-size: 11px;
            white-space: nowrap;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(function () {
        $(".ddlfilter").change(function () { 
            $.ajax({
                type: "Get",
                url: '/HelpDesk/ChangeDrop',
                data: {Status: $("#Stat").val() ,Tech: $("#Technician").val()}, 
                dataType: "html",
                success: function (data) {
                    $("#myPartialView").html(data); // HTML DOM replac
                }
            });

        });
    })
    </script>

</head>
<body>
    <h2>Help Desk</h2>
    <h>

        Status: @Html.DropDownList("Stat", ViewBag.Stat as SelectList, new { @class = "ddlfilter" })

        Assigned: @Html.DropDownList("Technician", ViewBag.Technician as SelectList, new { @class = "ddlfilter" })


    </h><p>
        @Html.ActionLink("Create New", "Create")
    </p>
    <div id="myPartialView">
        @{Html.RenderPartial("DropdownTable", Model);}
    </div>
</body>
</html>

Here is the code of DropdownTable partial view:

<table class="hoverTable">
    <tr>
        <th>

        </th>
        <th>
            Continent
        </th>
        <th>
            Country
        </th>
        <th>
            City
        </th>

        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td style="width:50px">
                @if (item.Continent == "Asia")
                {
                    @Html.ActionLink("Accept", "AssignHelpDeskTicket", "HelpDesk", new { id = item.Id }, new { @class = "auto-style2" })
                }
            </td>
            <td style="width:200px;vertical-align:top">
                @item.Continent
            </td>
            <td style="width:400px">
                @item.Country
            </td>
            <td style="width:400px">
                @item.City
            </td>

            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.Id })
            </td>
        </tr>
    }

</table>

Here is the code of controller :

public class HelpDeskController : Controller
    {
        // GET: HelpDesk
        public ActionResult Index()
        {
            GeoEntities db = new GeoEntities();
            var helpdesk = from m in db.Geographies
                           select m;

            List<SelectListItem> Stat = new List<SelectListItem>()
            {
                new SelectListItem { Text = "All", Value = "" },
                new SelectListItem { Text = "Asia", Value = "Asia" },
                new SelectListItem { Text = "America", Value = "America" },
                new SelectListItem { Text = "Europe", Value = "Europe" },
            };

            List<SelectListItem> Technician = new List<SelectListItem>()
            {
                new SelectListItem { Text = "All", Value = "" },
                new SelectListItem { Text = "China", Value = "China" },
                new SelectListItem { Text = "Japan", Value = "Japan" },
                new SelectListItem { Text = "Korea", Value = "Korea" },
                new SelectListItem { Text = "USA", Value = "USA" },
                new SelectListItem { Text = "Canada", Value = "Canada" },
                new SelectListItem { Text = "Argentina", Value = "Argentina" },
                new SelectListItem { Text = "Brazil", Value = "Brazil" },
                new SelectListItem { Text = "Russia", Value = "Russia" },
                new SelectListItem { Text = "Finland", Value = "Finland" },
                new SelectListItem { Text = "Leeds", Value = "Leeds" },
                 new SelectListItem { Text = "UK", Value = "UK" },
                new SelectListItem { Text = "Italy", Value = "Italy" },
            };


            ViewBag.Stat = Stat;
            ViewBag.Technician = Technician;


            return View(helpdesk.ToList());
        }

        public PartialViewResult ChangeDrop(string Status, string Tech)
        {
            GeoEntities db = new GeoEntities();
            var helpdesk = from m in db.Geographies
                           where m.Continent == Status || Status == null || Status == "" &&
                                 m.Country == Tech || Tech == null || Tech == ""
                           select m;

            return PartialView("DropdownTable", helpdesk);
        }
    }

Here is the result of my work demo:

Best Regards,

YongQing.

Answer 2

User982203039 posted

Can you show me the code of your  partial view named DropdownTable??

Thanks,

EB

Answer 3

User665608656 posted

Hi Baze,

I have given you the code of the partial view named DropdownTable in the last reply.

Here is the code of it:

<table class="hoverTable">
    <tr>
        <th>


        </th>
        <th>
            Continent
        </th>
        <th>
            Country
        </th>
        <th>
            City
        </th>


        <th></th>
    </tr>


    @foreach (var item in Model)
    {
        <tr>
            <td style="width:50px">
                @if (item.Continent == "Asia")
                {
                    @Html.ActionLink("Accept", "AssignHelpDeskTicket", "HelpDesk", new { id = item.Id }, new { @class = "auto-style2" })
                }
            </td>
            <td style="width:200px;vertical-align:top">
                @item.Continent
            </td>
            <td style="width:400px">
                @item.Country
            </td>
            <td style="width:400px">
                @item.City
            </td>


            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.Id })
            </td>
        </tr>
    }


</table>

Best Regards,

YongQing.
 

Answer 4

User982203039 posted

Sorry I missed that. Ok Everything works great - one last question can I default the Technician value on the initial page load to a session variable? I have a session variable that is the current username. Variable is @Session["Username"]. But I would only want this the initial value. Is this possible?

Thanks,

EB

Answer 5

User665608656 posted

Hi Baze,

But I would only want this the initial value. Is this possible?

Of course, it is possible.

In controller , you can create this session variable, then use it in your view as follow:

@Session["Username"].ToString()

If you have further questions, it is recommended that you re-open a thread for inquiry.

Best Regards,

YongQing.

Answer 6

User982203039 posted

Right. But how do I default  Assigned: @Html.DropDownList("Technician", ViewBag.Technician as SelectList, new { @class = "ddlfilter" }) to this session value on page load?