Question

This is a ASP.Net Core MVC project. In my layout file I have the following Menu link:

<li><a asp-controller="Employees" asp-action="Index">Employees</a></li>

The MVC controller it routes to looks like this:

public IActionResult Index()
{
    return View();
}

When I click the link the Action is hit and the view is rendered with my Employee List View. The Employee List View is bound to an Angular Controller which calls a corresponding Employees Web API GET and the view shows my employee list unfiltered. Great.

Now we need an Employee quick search from a quick search panel. So I modify my MVC Employees controller like this:

 public IActionResult Index(EmployeeListPageViewModel empListPageVM)
 {
     return View(empListPageVM);
 }

It takes in this Model:

public class EmployeeListPageViewModel
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

My Quick Search Form looks like this back in the layout file:

<form asp-controller="Employees" asp-action="Index">
    <th>Employee Search:</th>
    <td><input id="firstName" name="firstName" type="text" placeholder="FirstName" /></td>
    <td><input id="lastName" name="lastName" type="text" placeholder="LastName" /></td>
     <td>
         <button class="btn btn-xs btn-primary glyphicon glyphicon-search">
         </button>
     </td>
</form>

Now the model is built from the form and sent to my MVC Employees Index action. And of course I roll all the needed changes through. Make my Employees Web API controller take in optional params. FirstName = null, LastName = null.

The employee list view takes in the ViewModel:

 @model EmployeeListPageViewModel

Binds to the Angular Controller:

ng-controller="employeesController

Calls getEmployees:

ng-init="getEmployees('@Model.FirstName', '@Model.LastName')

The Angular controller works out whether everything is null or filtering is needed:

/***** List Employees *****/
$scope.getEmployees = function (pfirstName, pLastName) {

    var config = {
        params: {
            firstName: pfirstName,
            lastName: pLastName
        }
    }

    $http.get(employeeUrl, config)
    .then(function (response) {
        // Test front end exception message;
        // throw "test exception";
        $scope.data.employees = response.data;
    })
    .catch(function (error) {
            $scope.data.employeeListError = error;
    });
}

Hope all of this makes sense. Just laying the foundation here. Now my problem: Everything seems to work individually.

But, when I go in fresh and click the Employees Menu Link I get my full list. And when I fill in FirstName And/or LastName in the quick search it works. But now the Employees menu link is dead. It doesn't fire. It doesn't hit the Employees Index Controller action.

What is it about the form that is killing the Menu Link?

Update 1: After thinking about this I believe the anchor tag helper is looking at the controller and index and saying, "I am already there." So it is not going to the controller action. How do I force it to go even if it is already there?

Update 2: I tried changing the link to this:

<li><a href="/Employees">Employees</a></li>

The link works but it is still killed after the form post.

Answer 1

显然，无论你如何指向链接，taghelper，ng-href，直接链接，无论如何，如果你已经在那里链接将不会。

我不得不用以下命令替换菜单中的锚点链接：

<li>
    <form asp-controller="Employees" asp-action="Index">
        <button type="submit" class="navbarLinks">
            Employees
        </button>
   </form>

为什么我的<a> taghelper route go dead after its route is used by a form post?

1 个答案: