locked
Ajax - Add href to <a> tag with in dynamically generated table RRS feed

  • Question

  • User210895818 posted

    I am trying to add <a> link that hit the controller with a value in dynamically created appended table row. Where <a> actually hit the controller but id value does not pass to the controller

    Here is my Code

                if (data && data.length > 0) {
                    $.each(data, function (i, obj) {
                        var no = obj.ID;
                        var row = $("<tr><td> <a title=Edit href='@Url.Action("Edit", "Controller", new { id = Utilities.Base64Encode(Utilities.ToStr(obj.ID)) })'>Edit</a> </td><td>" + obj.Name + "</td><td>" + obj.FatherName + "</td></tr>");
                        $("#dynamic-table tbody").append(row);
                    });
                }

    Tuesday, November 27, 2018 10:45 AM

All replies

  • User-2054057000 posted

    What I understand is that you do not get the id value in the controller. Your action method should have the id parameter in order to get the id value:

    public ActionResult Search(int id){
        //...
        return View();
    }

    Tuesday, November 27, 2018 11:28 AM
  • User-147238865 posted

    Hi,

    As i understand your controller is hitting but id value is not passing.

    So for this you need to always remember that the name what you given for(id) in the URL.Action must match with your action method variable name.

    Let say,

    '@Url.Action("Edit", "Controller", new { id = Utilities.Base64Encode(Utilities.ToStr(obj.ID)) })'

    So in controller also you must have the parameter like below.

    public ActionResult Edit(int id)
    {

    }

    Hope this help you.

    Thanks,
    SK
    Tuesday, November 27, 2018 1:38 PM
  • User210895818 posted

    Your action method should have the id parameter in order to get the id value:

    I have Controller with a parameter but the problem is in obj.ID, it does not contain id value

    <a title=Edit href='@Url.Action("Edit", "Controller", new { id = Utilities.Base64Encode(Utilities.ToStr(obj.ID)) })'>Edit</a>
    Tuesday, November 27, 2018 4:38 PM
  • User475983607 posted

    Ridzi

    I am trying to add <a> link that hit the controller with a value in dynamically created appended table row. Where <a> actually hit the controller but id value does not pass to the controller

    Here is my Code

                if (data && data.length > 0) {
                    $.each(data, function (i, obj) {
                        var no = obj.ID;
                        var row = $("<tr><td> <a title=Edit href='@Url.Action("Edit", "Controller", new { id = Utilities.Base64Encode(Utilities.ToStr(obj.ID)) })'>Edit</a> </td><td>" + obj.Name + "</td><td>" + obj.FatherName + "</td></tr>");
                        $("#dynamic-table tbody").append(row);
                    });
                }

    The code is logically incorrect.   You're mixing code that runs on the server (@Url.Action()) with JavaScript that runs in the browser.

    See the following untested code. You'll need to Base64 encode on the server.

    if (data && data.length > 0) {
    	var url = '@Url.Action("Edit", "Controller")';
    	$.each(data, function (i, obj) {
    		var no = obj.ID;
    		var urlQuery = url + '?id=' + obj.ID;
    		
    		var row = $("<tr><td> <a title=Edit href='" + urlQuery + "'>Edit</a> </td><td>" + obj.Name + "</td><td>" + obj.FatherName + "</td></tr>");
    		$("#dynamic-table tbody").append(row);
    	});
    }

    Also the browser's dev tools (F12) and simply viewing the source code highlights these types of design bugs.

    Tuesday, November 27, 2018 5:52 PM
  • User1520731567 posted

    Hi Ridzi,

    I have Controller with a parameter but the problem is in obj.ID, it does not contain id value

    Is obj.ID==Null?

    I suggest you could open F12 developer tool to check data in $.each function.

    Or,check data which passed from controller in result of the action.

    If you have any questions,please post more details.

    Best Regards.

    Yuki Tao

    Wednesday, November 28, 2018 6:54 AM