How to append these Html.ActionLink dynamicaly in ajax return?[Answered] RSS

• • Reply
  Peter Cong

  Member

  366 Points

  2214 Posts

  How to append these Html.ActionLink dynamicaly in ajax return?

  Aug 16, 2018 05:51 PM|Peter Cong|LINK

  In my asp.net mvc web app, I have a webgrid, an ajax successful return data need to be append to the current webgrid,

  here is the webgrid codes:

  grid.Columns(
          grid.Column(columnName: "Prod_Name", header: "Product Name"),
          grid.Column(columnName: "Prod_Type", header: "Type"),
           grid.Column(columnName: "Prod_Status", header: "Status"),
   grid.Column(header: "Actions", format: (item) =>
                       new HtmlString(
  
                           Html.ActionLink("Edit", "Edit", new { id = item.ID }).ToString() + " | " +
  
                             Html.ActionLink("create", "Create", new { id = item.ID }).ToString() + " | " +
                              Html.ActionLink("Invoice", "Invoice", new { id = item.ID }).ToString() + " | " +
                           Html.ActionLink("Delete", "Delete", new { id = item.ID }).ToString()
                          
                           ), style: "Action"
  
           )

  here is the part of ajax codes:

   ...
  $.each(response, function (j, dataval) {
            
              $("#GridProductIndex").append('<tr><td>' + dataval.Prod_Name + '</td> + <td>' + dataval.Prod_Type + '</td> +<td>' + dataval.Prod_Status + '</td><td>' +
                  "Action Link"  + '</td></tr>'); //Here I need to insert those ActionLink
             
          });

  How to replace "Action Link" above with the same data in webgrid above. I need to include these codes in the ajax codes bove.

  grid.Column(header: "Actions", format: (item) =>
                       new HtmlString(
  
                           Html.ActionLink("Edit", "Edit", new { id = item.ID }).ToString() + " | " +
  
                             Html.ActionLink("create", "create", new { id = item.ID }).ToString() + " | " +
                              Html.ActionLink("Invoice", "Invoice", new { id = item.ID }).ToString() + " | " +
                           Html.ActionLink("Delete", "Delete", new { id = item.ID }).ToString()
                          
                           ), style: "Action"

• • Reply
  Yuki Tao

  Contributor

  3710 Points

  1431 Posts

  Re: How to append these Html.ActionLink dynamicaly in ajax return?

  Aug 17, 2018 09:09 AM|Yuki Tao|LINK

  Hi Peter Cong,

  According to your requirement,I could use @Html.Raw and HttpUtility.HtmlDecode.

  For example:

  $.each(response, function (j, dataval) {
           var html='@Html.Raw(HttpUtility.HtmlDecode(Html.ActionLink("Edit", "Edit", new { id = dataval.id }).ToHtmlString()))';
               html+='@Html.Raw(HttpUtility.HtmlDecode(Html.ActionLink("create", "Create", new { id = dataval.id }).ToHtmlString()))';
               html+='@Html.Raw(HttpUtility.HtmlDecode(Html.ActionLink("Invoice", "Invoice", new { id = dataval.id }).ToHtmlString()))';
               html+='@Html.Raw(HttpUtility.HtmlDecode(Html.ActionLink("Delete", "Delete", new { id = dataval.id }).ToHtmlString()))';
            
              $("#GridProductIndex").append('<tr><td>' + dataval.Prod_Name + '</td> + <td>' + dataval.Prod_Type + '</td> +<td>' + dataval.Prod_Status + '</td><td>' +
                  html  + '</td></tr>'); 
             
          });

  It will works fine.

  Best Regards.

  Yuki Tao

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
  
• • Reply
  Peter Cong

  Member

  366 Points

  2214 Posts

  Re: How to append these Html.ActionLink dynamicaly in ajax return?

  Aug 17, 2018 11:51 AM|Peter Cong|LINK

  Yuki Tao

  Hi Peter Cong,

  According to your requirement,I could use @Html.Raw and HttpUtility.HtmlDecode.

  For example:

  $.each(response, function (j, dataval) {
           var html='@Html.Raw(HttpUtility.HtmlDecode(Html.ActionLink("Edit", "Edit", new { id = dataval.id }).ToHtmlString()))';
               html+='@Html.Raw(HttpUtility.HtmlDecode(Html.ActionLink("create", "Create", new { id = dataval.id }).ToHtmlString()))';
               html+='@Html.Raw(HttpUtility.HtmlDecode(Html.ActionLink("Invoice", "Invoice", new { id = dataval.id }).ToHtmlString()))';
               html+='@Html.Raw(HttpUtility.HtmlDecode(Html.ActionLink("Delete", "Delete", new { id = dataval.id }).ToHtmlString()))';
            
              $("#GridProductIndex").append('<tr><td>' + dataval.Prod_Name + '</td> + <td>' + dataval.Prod_Type + '</td> +<td>' + dataval.Prod_Status + '</td><td>' +
                  html  + '</td></tr>'); 
             
          });

  It will works fine.

  Best Regards.

  Yuki Tao

  Hi YuKi, This is very closing, but after I tried, the codes stops at "id = dataval.id " , the datival won't compile, it seems the datival can not be recognized. I also tried this:

  $.each(response, function (j, dataval) {

  var t1 = dataval.id;  //here it OK, the "datival" is compiled properly, but the "t1" still can not be recognized below

  var html = '@Html.Raw(HttpUtility.HtmlDecode(Html.ActionLink("Edit", "Edit", new { id = t1 }).ToHtmlString()))'; //"t1" doesn't compile here.

  Any idea? thanks a lot,

   

• • Reply
  Peter Cong

  Member

  366 Points

  2214 Posts

  Re: How to append these Html.ActionLink dynamicaly in ajax return?

  Aug 18, 2018 11:02 PM|Peter Cong|LINK

  Yuki Tao

  Hi Peter Cong,

  According to your requirement,I could use @Html.Raw and HttpUtility.HtmlDecode.

  For example:

  $.each(response, function (j, dataval) {
           var html='@Html.Raw(HttpUtility.HtmlDecode(Html.ActionLink("Edit", "Edit", new { id = dataval.id }).ToHtmlString()))';
               html+='@Html.Raw(HttpUtility.HtmlDecode(Html.ActionLink("create", "Create", new { id = dataval.id }).ToHtmlString()))';
               html+='@Html.Raw(HttpUtility.HtmlDecode(Html.ActionLink("Invoice", "Invoice", new { id = dataval.id }).ToHtmlString()))';
               html+='@Html.Raw(HttpUtility.HtmlDecode(Html.ActionLink("Delete", "Delete", new { id = dataval.id }).ToHtmlString()))';
            
              $("#GridProductIndex").append('<tr><td>' + dataval.Prod_Name + '</td> + <td>' + dataval.Prod_Type + '</td> +<td>' + dataval.Prod_Status + '</td><td>' +
                  html  + '</td></tr>'); 
             
          });

  It will works fine.

  Best Regards.

  Yuki Tao

  Hi Yuki,

  As I replied, this codes doesn't work, but I studied the codes, do you think I can use this below code?

        var html='@Html.Raw(HttpUtility.HtmlDecode(Html.ActionLink("Edit", "Edit", new { id =' + dataval.id + '}).ToHtmlString()))';

  I will try it next Monday and let you know then.

• • Reply
  Yuki Tao

  Contributor

  3710 Points

  1431 Posts

  Re: How to append these Html.ActionLink dynamicaly in ajax return?

  Aug 20, 2018 09:08 AM|Yuki Tao|LINK

  Hi Peter Cong,

  Peter Cong

  var html='@Html.Raw(HttpUtility.HtmlDecode(Html.ActionLink("Edit", "Edit", new { id =' + dataval.id + '}).ToHtmlString()))';

  I make a demo,this also not work.

  I sorry that I ignored this point.

  It seems that '@' affect dataval.id.

  I suggest you could hard code instead of html helper.

  Best Regards.

  Yuki Tao

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
  
• • Reply
  Peter Cong

  Member

  366 Points

  2214 Posts

  Re: How to append these Html.ActionLink dynamicaly in ajax return?

  Aug 20, 2018 11:59 AM|Peter Cong|LINK

  Yuki Tao

  Hi Peter Cong,

  Peter Cong

  var html='@Html.Raw(HttpUtility.HtmlDecode(Html.ActionLink("Edit", "Edit", new { id =' + dataval.id + '}).ToHtmlString()))';

  I make a demo,this also not work.

  I sorry that I ignored this point.

  It seems that '@' affect dataval.id.

  I suggest you could hard code instead of html helper.

  Best Regards.

  Yuki Tao

  Hi Yuki, thanks a lot for your help, I think I found the solution by adding this code:

  var edit = '<a href="@Url.Action("Edit")?id=' + dataval.id + '">Edit</a>';

  I found the help from this post:

  https://forums.asp.net/t/1977920.aspx?Create+ActionLink+by+jQuery