Generating Dynamic url in Jquery ,MVC app

I have a View which displays a list of customers as shown below.Each time user click on the edit link.i have to pass the appropriate Customer ID to the Jquery or the $.Get() .let me know how to do it .Now i have hard corded the ID



<script type="text/javascript" language="javascript">

     $(document).ready(function() {
         $("a").click(function(event) {
         alert(this.value);
                 $.get('/App/Customer.mvc/Edit?Id=3',
                    function(htmlResult) {
                        // $("#dialog").remove(); //In case this is the second time they've requested the dialog.
                        $("#TempHolder").append(htmlResult);
                        $("#dialog").dialog({ bgiframe: true,
                            autoOpen: true,
                            height: 600,
                            width: 600,
                            modal: true
                        });
                    });
         });
     });


 </script>

<h2>PurchasingAuthorities</h2>  
    <div id="PurchasingAithorities">
   
    <table cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th>
                 ID
                </th>
                <th>
                    Name
                </th>
             
            </tr>
        </thead>
        <tbody>
            <% foreach (var item in  Model) { %>
           
            <tr>
               <td>
                    <a href=<%= item.ID %>  id="Edit" ><img src="Content/themes/smoothness/images/Edit.png" alt="Edit" /></a>
                </td>
             
                <td>
                    <%= Html.Encode(item.Name) %>
                </td>
               
            </tr>
            <% } %>
        </tbody>
    </table>
     
 </div>
 <div id="Result"></div>
 <div id="TempHolder"></div>
</asp:Content>
hariaspindAsked:
Who is Participating?
 
hariaspindConnect With a Mentor Author Commented:
Hi here you go ,I found my own solution ! It works.

  $(document).ready(function() {
     $("a").click(function() {
                 $.get('/BridgePZ/PurchasingAuthority.mvc/Edit', { requestId: $(this).attr("id") },
                    function(htmlResult) {
                        $("#dialog").remove(); //In case this is the second time they've requested the dialog.
                        $("#TempHolder").append(htmlResult);
                        $("#dialog").dialog({ bgiframe: true,
                            autoOpen: true,
                            height: 600,
                            width: 600,
                            modal: false
                        });
                    });

         });
     });

 <a href="#"  id="<%=item.ID %>" ><img  src="Content/themes/smoothness/images/Edit.png" alt="Edit" /></a>

 
0
 
hariaspindAuthor Commented:
I tried the below approach
 
the href attribute of your Edit <a> tag has already the ID so you can simply retrive it :

var id = $("#Edit").attr("href");

$.get('/App/Customer.mvc/Edit?'+id+',

 ,but it is not working.Assume that there are 3 rows ,with Id 1,2,3.

$("#Edit").attr("href");--always returns the first ID value, that is 1.Even if you click on 2nd or 3rd row.
0
 
MrAgileCommented:
Hi There,


You can add the id to the element's like below:

  <a href=<%= item.ID %>  id="Edit" ><img id="<%= item.ID %>" src="Content/themes/smoothness/images/Edit.png" alt="Edit" /></a>


This may work provided you're using 1.3 pf the jquery framework.

var id = $("#Edit").closest("img").attr("id");


Let me know how you go with it.

Sean


0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
hariaspindAuthor Commented:
Hi MrAgile

0
 
hariaspindAuthor Commented:
Hi ,
       Please ignore the previous comment.
I am using Jquery 1.3.2 .And tried your suggestion .
 
var id = $("#Edit").closest("img").attr("id");   --returns undefined value

0
 
MrAgileCommented:
post the generated html  so I can have a looik at the strucuture
0
 
hariaspindAuthor Commented:

 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
      
      PurchasingAuthorities
 
</title>
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script language="javascript" type="text/javascript" src="Scripts/MicrosoftAjax.js"></script>
    <script language="javascript" type="text/javascript" src="Scripts/MicrosoftMvcAjax.js"></script>
    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
      <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
      <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
      <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
      <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.resizable.js"></script>
      <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>
</head>
<body>
    <div>
       
   
 <script type="text/javascript" language="javascript">
 
     $(document).ready(function() {
     $("a").click(function(event) {
             var id = $("#Edit").closest("img").attr("id");
             alert(id);
             $.get('/BridgePZ/PurchasingAuthority.mvc/Edit', { requestId: $("#Edit").closest("img").attr("id") },
                    function(htmlResult) {
                        $("#dialog").remove(); //In case this is the second time they've requested the dialog.
                        $("#TempHolder").append(htmlResult);
                        $("#dialog").dialog({ bgiframe: true,
                            autoOpen: true,
                            height: 600,
                            width: 600,
                            modal: true
                        });
                    });
           
         });
     });
 
 
 
 </script>
               
 
    <h2>PurchasingAuthorities</h2>  
    <div id="PurchasingAithorities">
   
    <table cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th>
                    Edit
                </th>
                <th>
                    Type
                </th>
                <th>
                    Description
                </th>
                <th>
                    Active Date
                </th>
                <th>
                    Expiration Date
                </th>
            </tr>
        </thead>
        <tbody>
           
           
            <tr>
              <td>
                <a href="1"  id="Edit" ><img id="1" src="Content/themes/smoothness/images/Edit.png" alt="Edit" /></a>
 
                </td>
                           
                <td>
                    MMA
                </td>
                <td>
                    Master Maintenance Agreement
                </td>
                <td>
                    12/23/2009 4:38:54 PM
                </td>
                <td>
                    12/1/2015 12:00:00 AM
                </td>
            </tr>
           
           
            <tr>
              <td>
                <a href="2"  id="Edit" ><img id="2" src="Content/themes/smoothness/images/Edit.png" alt="Edit" /></a>
 
                </td>
                           
                <td>
                    RFP
                </td>
                <td>
                    Request For Proposal
                </td>
                <td>
                    12/23/2009 4:38:54 PM
                </td>
                <td>
                    12/1/2015 12:00:00 AM
                </td>
            </tr>
           
           
            <tr>
              <td>
                <a href="3"  id="Edit" ><img id="3" src="Content/themes/smoothness/images/Edit.png" alt="Edit" /></a>
 
                </td>
                           
                <td>
                    STS
                </td>
                <td>
                    State Term Schedule
                </td>
                <td>
                    12/23/2009 4:38:54 PM
                </td>
                <td>
                    12/1/2015 12:00:00 AM
                </td>
            </tr>
           
        </tbody>
    </table>
     
 </div>
 <div id="Result"></div>
 <div id="TempHolder"></div>
 
    </div>
</body>
</html>

0
 
MrAgileCommented:
:D
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.