How to trigger a html href event from a mvc controller

Question

I have a MVC project that I added Angular to. Ia m using ngRoute for the routing. Everything works fine except a few of the razor views. Specifically the views that require the id of the selected object to be passed on to the next view. So when I am managing users and click on edit or details I need that controller to return a simulated html href event. not sure if that is possible. Any suggestions on another way of doing this are welcome.

@Html.ActionLink("Edit", "Edit", new { id = item.Id })

Admin Controller

   // GET: /Users/Edit/1
    public async Task<ActionResult> Edit(string id)
    {
        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        var user = await UserManager.FindByIdAsync(id);
        if (user == null)
        {
            return HttpNotFound();
        }

        var userRoles = await UserManager.GetRolesAsync(user.Id);

        return View(new EditUserViewModel()
        {
            Id = user.Id,
            UserName = user.UserName,
            Email = user.Email,
            CompanyName = user.CompanyName,
            Name = user.Name,
            RolesList = RoleManager.Roles.ToList().Select(x => new SelectListItem()
            {
                Selected = userRoles.Contains(x.Name),
                Text = x.Name,
                Value = x.Name
            })
        });
    }

I need to somehow route this through angular such as the User create page

 <a href="#!/usersAdminCreate"><span class="nav-label">Add User</span></a>

rlcrews · Accepted Answer · 2015-02-09 01:21:38Z

You don't need to do this in MVC if you have angular in place. The item you clicked on to edit you can pass an an object to the next view or service as an object. It will be part of the http context. From your form you could call a function into your angular controller which then would pass the object to the angular service and then call onto webapi. The context of the object would be passed along to the API controller.

From your angular controller you could setup something similar to:

app.controller('myCtrlr', function($scope, myService){
   $scope.edit = yourservicename.edit(item);
});

Then from your angular service you could call something like this

function edit(item) {
    return $http.post('apiroute/edit/', item , {

    }).then(function (response) {
        return response.data;
    });
};

If the call was successful it would return the updated object to the controller so you can update rebind the UI if needed.

You can retrieve the object context from your controller using the following:

[Route ("apiroute/edit/")]
    [HttpPost]
    public yourModel Edit([FromBody]YourModel item)
    {
        YourModel result = new YourModel();

    //.... do stuff
        return result;

    }

For refernece I would suggest wraping this in a IHttpActionResult so you can return a good bad response.

If you don't want to use angular, I would recommend looking into how to bootstrap a view with an MVC controller for angular. this will allow you to preload data into a view that can be bound to angular as needed. Here is a good link to get you started if you are not familiar with this approach.

Hope this helps.

Collectives™ on Stack Overflow

How to trigger a html href event from a mvc controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related