Jump to specific record using dropdown list in .Net Core MVC

I have tried various Google searches but am not getting specific results.

The problem is simple: I have an Edit form for records in a table. On the same view, there is also a dropdown list of all the records in that table. I want to use that dropdown list to reload the form with the selected record from the dropdown list.

This is the “Get” action for Edit:

public async Task<IActionResult> Edit(int? id)
{
        if (id == null)
        {
            return NotFound();
        }

        var myObj = await _context.MyObjs.FindAsync(id);
        if (myObj == null)
        {
            return NotFound();
        }

        VMEdit model = new VMEdit
        {
            // populate view model
        };

        var objList = _context.MyObjs.Select(c => new
        {
            Value = c.Id,
            Text = c.Tag,
        }).OrderBy(c => c.Text);
        ViewData["ObjList"] = new SelectList(objList, "Value", "Text", id);

        return View(model);
    }

This is the view:

@model Audit.Models.VMEdit

@{
    ViewData["Title"] = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<form name="jumpForm" asp-action="Edit" asp-controller="MyObj" method="get">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group form-row">
        <label asp-for="Id" class="col-md-3">Jump to: </label>
        <div class="col-md-6">
            <select asp-for="Id" class="form-control" asp-items="ViewBag.ObjList"></select>
        </div>
        <div class="col-md-3">
            <input type="submit" value="Go" />
        </div>
    </div>
</form>


<form asp-action="Edit">
    // edit form controls here
</form>

This form is behaving like this:

Suppose I am at /MyObj/Edit/3

Suppose I select the record with Id=5 from the dropdown and press Go

The page that gets loaded is /MyObj/Edit/3?Id=5

The page I intend to get loaded is /MyObj/Edit/5

I am guessing that naming the select field “Id” is causing it to get bound to the loaded Id (3). However, I do not know what to do. I want the Get request generated by the form to have Id paramter with value 5.

Any help will be appreciated. Specially simplest solution that does not involve javascript. Thanks.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

The page that gets loaded is /MyObj/Edit/3?Id=5

The page I intend to get loaded is /MyObj/Edit/5

I think using js to redirect the url will be simpler and more direct:

To use with select2.js, you only need to quote the link with js and css, and then add select2 method in js to realize the search function inside select control.

For details, please refer to the following code.

 @section Scripts{
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
    <script>
        $(document).ready(function () {
            $("select").select2();
            $("form[name=jumpForm]").submit(function () {
                event.preventDefault();
                location.href = "/MyObj/Edit/" + $("select").val();
            })
        });
        
    </script>
}

Here is the test result:

Method 2

I ended up using this method although it is inelegant. https://stackoverflow.com/a/2000689

I could have used a nav with dropdown but I wanted to use Select2.js with my dropdown because the list of records is quite long and I wanted to make it searchable.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0