How to build dynamic href inside a modal in a MVC View

Question

How to build dynamic href inside a modal in a MVC View

Coreysan 1,811

I have an MVC Core project with a view that calls a modal.

I pass the database data to Javascript, build some elements, then use the elements in the modal. For example,

where ProductId was created in a Javascript function with getElementByID.

I was hoping to use the ProductId value with "asp-route-id=ProductId" but I know that won't work, so how can I build a dynamic href using ProductId?

Something like:

Can that be done somehow?

Accepted answer

6 additional answers

Your answer

Answer 1

Hi @Coreysan,

You can set the data-id to Model.ProductId and it will get the id of the clicked anchor and display the corresponding data in the mode (detailed view) on the screen.

 <a href="#" id="btnEdit" class="btn btn-primary btn-sm" data-id="@item.ProductId">Edit</a>

Edit

View

Index

@model List<CoreMvc.Models.Product>


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("[id*=BtnEdit]").click(function () {
                var productId = $(this).attr('data-id');
                $.ajax({
                    type: 'POST',
                    url: '/Home/AddToCart',
                    data: { id: productId }
                }).done(function (response) {
                    $("#actionCon").html(response);
                    $("#myModalEdit").modal('show');
                }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
                    debugger;
                    alert("Fail");
                });
            });
        });
    </script>
</head>
<body>
    <table class="table table-striped">
        <thead>
            <tr>
                <td>Id</td>
                <td>Name</td>
                <td>Data</td>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>@item.ProductId</td>
                    <td>@item.Name</td>
                    <td>@item.Data</td>
                    <td>
                        <button type="button" id="BtnEdit" data-id="@item.ProductId">AddToCart</button>
                    </td>
                </tr>
            }
        </tbody>
    </table>
    <div id="actionCon"></div>
</body>
</html>

AddToCart

@model CoreMvc.Models.Product
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<form id="EditCat">
    <div class="container">
        <!-- The Modal -->
        <div class="modal fade" id="myModalEdit">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h4 class="modal-title">Edit Category</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <!-- Modal body -->
                    <div class="modal-body">
                        <input id="hfId" type="hidden" name="ID" value="@Model.ProductId" />
                        <div class="form-group">
                            <input type="text" value="@Model.Name" class="form-control" id="txtName" name="Name" placeholder="Enter Name" />
                        </div>
                        <br />
                        <div class="form-group">
                            <input type="text" value="@Model.Data" class="form-control" id="txtData" name="Name" placeholder="Enter Country" />
                        </div>
                    </div>
                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <a asp-controller="Home" asp-action="Add" asp-route-id="@Model.ProductId">Add</a>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

Model

 public class Product
 {
     public int ProductId { set; get; }
     public string Name { set; get; }
     public string Data { set; get; }
   
 }

 public IActionResult Index()
 {
    
     List<Product> Products = GetProducts(null);

     return View(Products);
 }


 [HttpPost]
 public IActionResult AddToCart(int id)
 {
     Product product = new Product();
     product.ProductId = id;
     product.Name = GetProducts(id).FirstOrDefault().Name;
     product.Data = GetProducts(id).FirstOrDefault().Data;
     return PartialView(product);
 }




 [HttpGet("AddToCart/{id}")]
 public IActionResult Add([FromRoute] int id)
 {
     Product product = new Product();
     product.ProductId = id;
     //....
     return Json(product);
 }

Best regards,

Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Coreysan 1,811 Reputation points

2023-12-29T19:02:44.5466667+00:00

@Lan Huang Thank you so very much! I wish I knew half of what you know!

We're almost there. I'm glad I can refer to your code to explain what I'm after.

I started this project by using <a asp-controller="Home" asp-action="AddToCart" asp-route-id="@p.ProductId" in the view.

but then I thought about a modal. It looks better to me, so I built a modal in the same view, so I could pass the name, price, and ID to the modal. But, as I mentioned, when I want the customer to click the "add to cart" button, I don't know how to get the @p.ProductId number to post to the controller. How can I do that?
Lan Huang-MSFT 30,181 Reputation points Microsoft External Staff

2024-01-02T07:13:44.08+00:00

Hi @Coreysan,

You are using asp-route-id, you need to use [FromRoute] to get the ProductId.

<a asp-controller="Home" asp-action="AddToCart" asp-route-id="@p.ProductId">AddToCart</a>

[HttpGet("AddToCart/{id}")] public IActionResult AddToCart([FromRoute] int id) { Product product = new Product(); product.ProductId = id; //.... return PartialView(product); }
Coreysan 1,811 Reputation points

2024-01-03T00:03:09.2266667+00:00

@Lan Huang Thank you again for helping me with this! I should explain one last thing: In my view, I use a foreach loop to show all the products in inventory. In that case, the variable @p.ProductId is active. ==> @foreach (var p in Model) {...}

However, once a user chooses to look at the details for a product and the code calls the modal, the variable @p.ProductId no longer has context. It's non-existent in the modal.

(In fact, when I compile, the error message is "the name 'p' does not exist in the current context."

That's why I was trying to use Javascript to get that value into the modal.

I hope that makes sense! Do you have any other suggestions?
Coreysan 1,811 Reputation points

2024-01-03T00:04:21.4733333+00:00

@Lan Huang Thank you again for helping me with this! I should explain one last thing: In my view, I use a foreach loop to show all the products in inventory. In that case, the variable @p.ProductId is active. ==> @foreach (var p in Model) {...}

However, once a user chooses to look at the details for a product and the code calls the modal, the variable @p.ProductId no longer has context. It's non-existent in the modal.

(In fact, when I compile, the error message is "the name 'p' does not exist in the current context."

That's why I was trying to use Javascript to get that value into the modal.

I hope that makes sense! Do you have any other suggestions?
Lan Huang-MSFT 30,181 Reputation points Microsoft External Staff

2024-01-03T02:33:23.3133333+00:00

Hi @Coreysan,

You didn't provide the code and we don't know where you put it.

My guess is that you want to perform an "AddToCart" action on Modal.

I think you can separate the modal part and the "show all products in inventory" part. I modified the code in the answer so you can see if it meets your needs.
Coreysan 1,811 Reputation points

2024-01-03T17:59:16.13+00:00

@Lan Huang-MSFT

Sheer brilliance - that was exactly it! Thank you soo much. I was intimidated to try ajax, but you made it easy and clear. Again, thank you thank you!!!!

Answer 2

Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Comments have been turned off. Learn more

Answer 3

Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Comments have been turned off. Learn more

Answer 4

Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Comments have been turned off. Learn more

Answer 5

Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Comments have been turned off. Learn more

Share via

How to build dynamic href inside a modal in a MVC View

6 additional answers

Your answer