How to Pass id value of actionlink to javascript function in my Asp.net Mvc Project

Question

I have a table for departments. Right now I created controller for every department and every department have index.cshtml. But they use the same functions. I hard coded their departmentId in every index page. for example for department IT with departmentId = 1

public class ItController : Controller
    {
        // GET: It
        public ActionResult Index()
        {
            return View();
        }
    }

And in It's index page I have hard coded with decleration var id = 1; Like this

<div class="panel panel-body">

<div class="col-md-4 table-responsive" id="productsTable"></div>
</div>

 <script type="text/javascript">

var id = 1; // for the department that id is 1 so I have to create index for every department and hard code like this


 function AllProductsByDepartmentId(id) {

            var tbl = $('#productsTable');
            $.ajax({
                cache: false,
                url: '/Home/GetAllProductsByDepartmentId?id=' + id,
                contentType: 'application/html ; charset:utf-8',
                type: 'GET',
                dataType: 'html',
                success: function (result) {
                    tbl.empty().append(result);
                },
                error: function () {

                }

            });

        }

</script>

But to do like this is not good becouse if by some reasen changes Id of department or when I create a new department next time then I have to hard coded again ... What I want is first I want to populate those departments in my _Layout dynamicaly from database. So I created controller

    public class DepartmentsController : Controller
    {
        private ApplicationDbContext db = new ApplicationDbContext();

        // GET: Departments
        public async Task<ActionResult> Index()
        {
            return View(await db.Departments.ToListAsync());
        }
    }

And this is my PartialView of Departments and I want to populate it in _Layout.cshtml, but I don't know how to do and how to link them to a function ...

@model IEnumerable<Inventory.Models.Departments>
@foreach (var item in Model) {
     @Html.ActionLink(modelItem => item.DepartmentName???????, ??????, ?????, new { id = item.DepartmentId })

  }

and link them to this java function

function AllProductsByDepartmentId(id)
{
   // ......
}

I think I have to create another common controller to have an index page to all departments.But How to create actionlinks dynamicaly and link them to javascript function. Thank you in advance!

Its not clear what you want to do. What does your javaScript code (which contains errors) have to do with your `@Html.ActionLink()`? — , Nov 26 '17 at 10:06
@StephenMuecke Hi, I want my department names populate in my _layout dynamicaly I mean my PartialView of Departments populate in my _layout and linking to my java function .. if you check my PartielView of Departments — Helen Tekie, Nov 26 '17 at 10:10
So you want to click on the DepartmentName and then use ajax to pass its `DepartmentId` to a `GetAllProductsByDepartmentId()` method? and update the DOM? — , Nov 26 '17 at 10:12
@StephenMuecke , Yes.. Is that possible? or any better way ...? — Helen Tekie, Nov 26 '17 at 10:13
Yes. There are a few issues with the code you have shown, so can you also show your `GetAllProductsByDepartmentId()` method so that can be checked as well — , Nov 26 '17 at 10:14
@StephenMuecke it is already there, do you mean Action controller? — Helen Tekie, Nov 26 '17 at 10:22
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/159835/discussion-between-stephen-muecke-and-helen-tekie). — , Nov 26 '17 at 10:23

score 1 · Accepted Answer · 2017-11-26T11:14:11.660

1

There is no need to use @Html.ActionLink() to generate links in this case. You foreach loop can be just

@foreach (var item in Model) {
    <a href="#" class="details" data-id="@item.DepartmentId">@item.DepartmentName</a>
}

Note that the value of DepartmentId is added to the link as a data attribute.

Then you script would be

var url = '@Url.Action("GetAllProductsByDepartmentId", "Home")';
var tbl = $('#productsTable');
$('.details').click(function() {
    tbl.load(url, { id: $(this).data('id') });
});

edited Nov 26 '17 at 11:14

answered Nov 26 '17 at 10:22

I puted foreach in If(Model =! null) { foreach ...} and in my _Layout I added @Html.Partial("_Departments") but departments are not showing in my _layout – Helen Tekie Nov 26 '17 at 10:44
You cannot use `@Html.Partial()` unless you pass a model to it. Use `@Html.Action()` to call the server method that returns a partial view of your departments – Nov 26 '17 at 10:48
But I do not know what method your wanting to call (all you have shown is an `Index()` method in `DepartmentsController` which already seems to be returning a list of your departments so its not even clear why you need a `_Departments.cshtml` partial) – Nov 26 '17 at 10:51
In any case, your cannot put a model in a partial (unless its a base model that is used by all views that use that layout) – Nov 26 '17 at 10:52
I suggest you put any further comments in the chat I started in the question above – Nov 26 '17 at 10:53

How to Pass id value of actionlink to javascript function in my Asp.net Mvc Project

1 Answers1