Show Hide Hyperlink based on condition in ASP.Net MVC

Last Reply one month ago By dharmendr

Posted one month ago

I have one table with fields    

 EId      Id    ControllerName         Url                       View      Add

1          1      report                      /report/Index/       1           0

2           2       report1                   /eport1/Index/       0         0

currenlty my requirement is that if any one element is checked (View/add) then only i need to display hyperlink on screen or else no need to display on screen 

Send (Pass) Session value from View to Controller in ASP.Net MVC

Could you please help me

You are viewing reply posted by: dharmendr one month ago.
Posted one month ago

Hi mahesh213,

Check this example. Now please take its reference and correct your code.

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult getAll()
    {
        List<Data> data = new List<Data>();
        data.Add(new Data { EId = 1, Id = 1, ControllerName = "report", Url = "/report/Index/", View = 1, Add = 0 });
        data.Add(new Data { EId = 2, Id = 2, ControllerName = "report1", Url = "/eport1/Index/", View = 0, Add = 0 });
        return Json(data, JsonRequestBehavior.AllowGet);
    }
}
public class Data
{
    public int EId { get; set; }
    public int Id { get; set; }
    public string ControllerName { get; set; }
    public string Url { get; set; }
    public int View { get; set; }
    public int Add { get; set; }
}

View

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            type: "POST",
            url: "/Home/getAll/",
            contentType: "application/json; charset=utf-8",
            data: {},
            dataType: "json",
            success: function (r) {
                var table = "<table><tr><th>EId</th><th>Id</th><th>Controller Name</th><th>Url</th><th>View</th><th>Add</th></tr>";
                $.each(r, function (i, item) {
                    table += "<tr><td>" + item.EId + "</td><td>" + item.Id + "</td><td>" + item.ControllerName + "</td><td>"
                    + "<a href='" + item.Url + "'>" + item.ControllerName + "</a></td><td>"
                    + "<input type='checkbox' onclick='SetValue(this)' /><input type='hidden' value='" + item.View + "' /></td><td>"
                    + "<input type='checkbox' onclick='SetValue(this)' /><input type='hidden' value='" + item.Add + "' /></td></tr>";
                });
                table += "</table>";
                $('#dvData').html(table);
                ShowHide();
            }
        });
    });

    function SetValue(ele) {
        $(ele).closest('td').find('input[type=hidden]').val($(ele).attr('checked') ? 1 : 0);
        ShowHide();
    }
    function ShowHide() {
        $.each($('#dvData').find('table tr:has(td)'), function (i, item) {
            var view = $(item).find('td').eq(4).find('input[type=hidden]').val();
            var add = $(item).find('td').eq(5).find('input[type=hidden]').val();
            if (view == 1) {
                $(item).find('td').eq(4).find('input[type=checkbox]').attr('checked', 'checked');
            } else {
                $(item).find('td').eq(4).find('input[type=checkbox]').removeAttr('checked');
            }

            if (add == 1) {
                $(item).find('td').eq(5).find('input[type=checkbox]').attr('checked', 'checked');
            } else {
                $(item).find('td').eq(5).find('input[type=checkbox]').removeAttr('checked');
            }

            if (view == 0 && add == 0) {
                $(item).find('td').eq(3).find('a').hide();
            } else {
                $(item).find('td').eq(3).find('a').show();
            }
        });
    }
</script>
<div id="dvData">
</div>

Screenshot