Monday, June 16, 2014

MyFamily For AllScripts

This is my new free lance project in Windows Presentation Foundation using Restful Services. I am enjoying working in it.


Tuesday, February 11, 2014

PathWay For AllScripts

This is a Desktop Application developed in Windows Presentation Foundation  and by utilizing WCF Services. I have done this project as freelancer for a company who outsourced to me to do it. I am feeling very happy about it that i have successfully accomplished it.



After Clicking Patient Connect, this screen is displayed :










Cheers........:)

Saturday, January 4, 2014

Searchable Dropdown in Asp.net mvc 4

Hi Friends,

Today i am writing about how to implement searchable dropdown list in asp.net mvc 4. Actually i came accross a scenario where the dropdown elements were too large and its troublesome for user to find the option that user wants to select to i needed to add searching so that it becomes easy for user.


To Implement this i used a jquery library namely Jquery chosen you can find it by searching on google or can download from here,Its pretty simple actually you just need to include the jquery chosen js file and css file in your porject and after that one simple step to do and you are done.

For Example, Here is my dropdown html assuming:
class="chosen-select"


<select class="chosen-select" id="SubDepartmentsDDL" name="SubDepartmentsDDL">
 
<option value="1">Hematology (2)</option>

<option value="2">Clinical Chemistry (0)</option>

<option value="3">Histopatholgy (0)</option>

<option value="8">Molecular Lab (0)</option>

<option value="9">General Radiology (0)</option>

<option value="10">Ultrasound (0)</option>

<option value="12">ECG (0)</option>

<option selected="selected" value="13">Microbiology (0)</option>

<option value="14">Blood Bank (0)</option>

<option value="16">Special Chemistry (1)</option>

<option value="18">Services (0)</option>

<option value="19">International Send Outs - India (0)</option>

<option value="20">National Send Outs (0)</option>

<option value="21">Vaccination (0)</option>

<option value="22">ABC (0)</option>

</select>



Add classattribute value  "chosen-select" in the dropdown select attribute and include the follwing js and css files you will find the downloaded jquery chosen folder:


<link href="/PulseBeta/css/chosen.css" rel="stylesheet" type="text/css">
    <link href="/PulseBeta/css/prism.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/PulseBeta/js/chosen.jquery.js"></script>
     <script type="text/javascript" src="/PulseBeta/js/prism.js"></script>

Now in the page write this script and you are done:


<script type="text/javascript">
         var config = {
             '.chosen-select': {},
             '.chosen-select-deselect': { allow_single_deselect: true },
             '.chosen-select-no-single': { disable_search_threshold: 10 },
             '.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
             '.chosen-select-width': { width: "95%"}//,
             //'.chosen-search': {disable_search: false}
         }
         for (var selector in config) {
             $(selector).chosen(config[selector]);
         }
  </script>


Before this my dropdown like this:







and after applying chosen plugin the result is:





Cheers...


Friday, December 20, 2013

Infinite Scroll Paging in Asp.net mvc 4

Hi Friends,



Today i am sharing another feature which facebook and linkedin like paging, i came across a scenario to show doctors list in our database, instead of paging i thought to go for infinite scroll paging like facebook linkedin, on page load i show top 10 or 20 doctors and as user scrolls down i load more doctors via ajax.



Here i go with the html of my view:


<div class="grid-content overflow" id="docsContainer" style=" width: 100%;">
                
            <!--grid area -->  
            
           
            
            <!--grid area end -->
            

            
            
            
            <div style="clear:both;"></div>

                
              <div class="clearfix"></div>
              @if (ViewBag.Refreshed == "YES")
              {
              <input type="hidden" id="lastDoctorID" value="0"/>
              }
              else
              {
              <input type="hidden" id="lastDoctorID" />
              }
              <input type="hidden" id="GetFlag" value="true" />
              </div>



On page load i am getting to 20 records from database, here it is:


 $(document).ready(function () {


        if ('@ViewBag.Refreshed' == "YES") {

            $('input#lastDoctorID').val("0");

        }

        GetDoctors();

});

here is definition of GetDoctors Method:


function GetDoctors() {

        if ($('input#lastDoctorID').val() != null) {

            lastID = $('input#lastDoctorID').val();

        }
        else {

            lastID = 0;
        }

        var url = '@Url.Action("GetDoctors", "SearchPathologist")';

        url = url + "?lastDoctorID=" + lastID;
        $('div#divLoading').show();
        $.ajax({
            type: 'POST',
            url: url,

            success: function (response) {
                // your code from above
                $('div#docsContainer').append(response);
                $('div#divLoading').hide();
                if (response == "ok") {


                }

                else {


                }
            },
            error: function (xhr, textStatus, error) {
                //$('span#loader_' + ID).hide();
                console.log(xhr.statusText);
                console.log(textStatus);
                console.log(error);
                $.fallr('show', {
                    content: '<p>Request Sending Failed! Try Again after few minutes.</p>'
                });
            }
        });
    }

In my action i am calling a webservice which return DataSet and i extaract data and create list and pass it to partial view which in rendered on the page.

Here is the action code:


public ActionResult GetDoctors(string lastDoctorID)
        {
            using (OliveCliqService.OliveServiceClient client = new OliveCliqService.OliveServiceClient())
            {

                DataSet result = client.GetDoctorsList(Session["userID"].ToString(),lastDoctorID);

                List<CliqDoctor> doctorsList = new List<CliqDoctor>();

                for (int i = 0; i < result.Tables[0].Rows.Count; i++)
                {

                    CliqDoctor doctor = new CliqDoctor();

                    doctor.DoctorID = int.Parse(result.Tables[0].Rows[i]["DoctorID"].ToString());
                    doctor.Name = result.Tables[0].Rows[i]["FirstName"].ToString() + " " + result.Tables[0].Rows[i]["LastName"].ToString();

                    doctor.Designation = result.Tables[0].Rows[i]["Designation"].ToString();
                    doctor.Speciality = result.Tables[0].Rows[i]["Spaciality_name"].ToString();
                    doctor.Location = result.Tables[0].Rows[i]["Address"].ToString();
                    doctor.ImageName = result.Tables[0].Rows[i]["Image"].ToString();
                    doctor.Friend = result.Tables[0].Rows[i]["Friend"].ToString();

                    doctorsList.Add(doctor);

                }


                return PartialView("~/Views/Shared/_DoctorPartial.cshtml", doctorsList);
            }
        }

Here is my web service method definition:


public DataSet GetDoctorsList(string PersonId,string lastDoctorID)
        {

            string connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["OliveCliq"].ConnectionString;


            MySqlConnection con = new MySqlConnection(connectionString);
            con.Open();
            string cmd = @"SELECT d.DoctorID,d.FirstName,d.LastName,d.Image,de.Designation,d.Address,s.Spaciality_name,
CASE WHEN EXISTS (SELECT id FROM cloud_clinic.doctor_members dm WHERE dm.doctor_id = '" + PersonId + "' AND dm.member_id = d.doctorID) THEN 'YES' ELSE 'NO' END AS Friend FROM cloud_clinic.doctors d LEFT OUTER JOIN cloud_clinic.clinic_doctor_designations cdd on d.doctorid = cdd.doctor_id LEFT OUTER JOIN cloud_clinic.rm_pr_designations de on cdd.designation_id = de.designationid LEFT OUTER JOIN cloud_clinic.doctor_spcialities ds on d.doctorID = ds.doctorid LEFT OUTER JOIN cloud_clinic.spaciality s on ds.spacialityID = s.id where d.DoctorID > '"+lastDoctorID+"' Group by d.DoctorID Order by d.DoctorID LIMIT 30";

            MySqlDataAdapter da = new MySqlDataAdapter(cmd, con);

            DataSet ds = new DataSet();

            da.Fill(ds);

            return ds;
            
        }

When user scroll down, new records are fetched ajax call and appended on the page, here is that jquery snippet:


 $(document).ready(function () {
        $(window).scroll(function () {
            console.log("document height:" + $(document).height());
            console.log("window height:" + $(window).height());
            console.log("window scroll:" + $(window).scrollTop());
            if ($(window).scrollTop() + $(window).height() == $(document).height()) {
                GetDoctors();
            }
        });
    });

Hope you understood it.



Cheers!



Thanks

Facebook and Linkedin like Searching Funcationality in Asp.net mvc 4

Hi friends,


In the last month, i came across to implement doctors searching my application like the one facebook or linkedin is using, i googled to find some plugin but when it failed i thought to made my own using jquery.


Here is the screen shot of my work:




Here i go:

Here is my input control:




<div class="search_input"><input type="text" id="people" placeholder="Search for specialist doctors and more.." />
</div>


Here is jquery code:


<script type="text/javascript">
    $(document).ready(function () {
        var drew = false;
        $("#people").on("keyup", function (event) 
        {
            var query = $("#people").val();

            if ($("#people").val().length >= 1) 
            {
                $('div#loaderContainer').show();
                $.ajax({
                    url: '@Url.Action("Search","SearchPathologist")',
                    dataType: "json",
                    data:
                        {
                            term: query,
                            flag: "all"
                        },
                        error: function()
                        {
                        $.fallr('show', {
            content: '<p>Error occured! May be your session expired.</p>'
                        });
                        },
                    success: function (data) 
                    {
                        $('div#loaderContainer').hide();
                            //First search
                            if (drew == false) 
                            {
                                //Create list for results
                                $("#people").after("<ul id='res' class='ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all' role='listbox' aria-activedescendant='ui-active-menuitem' style='z-index: 10005; display: block; width: 293px;'></ul>");

                                //Prevent redrawing/binding of list
                                drew = true;

                                //Bind click event to list elements in results
                                $("#res").on("click", "li.item", function () 
                                {
                                    $("#people").val($(this).text());
                                    $("#res").empty();
                                });
                            }
                            //Clear old results
                            else 
                            {
                                $("#res").empty();
                            }

                            

                            $.each(data.doctors, function (i, item) {
                                if(i==0)
                                {
                                $("#res").append("<div id='doctors'></div>")
                                $("#doctors").append("<li style='background: linear-gradient(to bottom, #499BEA 0%, #207CE5 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); margin-left:2px;text-align:center;color:white;'>Doctors</li>");
                                }
                                $("#doctors").append("<li class='item'><div style='width:100%; margin:auto; background:white; min-height:20px;'><div style='border-bottom:1px dashed gray;'><div style='float:left;  width:16%; min-height:35px; margin:auto;'><img src='http://olivecliq.com/carepoint/doctor_images/"+item.ImageName+"' width='31px' style='margin-top:4px; margin-left:1px;' /></div><div class='mid_card'><h2> " + item.DoctorName + "</h2><h3></h3></div><div style='float:left;width:10%; min-height:25px; margin:auto;'> <img src='@Url.Content("~/images/arrow.png")' width='25' style='margin-top: 10px;' /></div><div style='clear:both;'></div></div></li>");
                            });

                            $.each(data.connections, function (i, item) {
                                if(i==0)
                                {
                                $("#res").append("<div id='connections'></div>")
                                $("#connections").append("<li style='background: linear-gradient(to bottom, #499BEA 0%, #207CE5 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); margin-left:2px;text-align:center;color:white;'>Connections</li>");
                                }
                                $("#connections").append("<li class='item'><div style='width:100%; margin:auto; background:white; min-height:20px;'><div style='border-bottom:1px dashed gray;'><div style='float:left;  width:16%; min-height:35px; margin:auto;'><img src='http://olivecliq.com/carepoint/doctor_images/"+item.ImageName+"' width='31px' style='margin-top:4px; margin-left:1px;' /></div><div class='mid_card'><h2> " + item.ConnectionName + "</h2><h3></h3></div><div style='float:left;width:10%; min-height:25px; margin:auto;'> <img src='@Url.Content("~/images/arrow.png")' width='25' style='margin-top: 10px;' /></div><div style='clear:both;'></div></div></li>");
                            });
                        
                        
                        if($('button#searchDDL').html() == "Doctors")
                        {
                        $('div#connections').hide();
                        }
                        if($('button#searchDDL').html() == "Connections")
                       {
                       $('div#doctors').hide();
                       }
                        
                        
                        
                    }


                });


            }

            else
            {
            $("#res").empty();
            $( "#res" ).remove();
            drew = false;
            }
        });


              $("input#people").focusout(function () {

    $( "#res" ).remove();
    drew = false;
   
});

    });
    </script>

and Here is my server side Action Code:


public JsonResult Search(string term, string flag)
        {
            using (OliveCliqService.OliveServiceClient client = new OliveCliqService.OliveServiceClient())
            {
                PathWay.OliveCliqService.SearchResult result = new PathWay.OliveCliqService.SearchResult();

                result = client.Search(Session["userID"].ToString(), term, flag);

                return Json(result,JsonRequestBehavior.AllowGet);
            }
        }

Here is my Web Service code which returns doctor's name and picture:


        public SearchResult Search(string PersonID,string term,string flag)
        {
            string cmd;
            string connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["OliveCliq"].ConnectionString;


            MySqlConnection con = new MySqlConnection(connectionString);
            con.Open();
            cmd = @"SELECT DISTINCT d.DoctorID,
d.FirstName,
d.LastName,
d.Image,
r.name,
s.Spaciality_name,
oc.clinic_name,
cb.Location,
rpd.acronym
FROM cloud_clinic.doctor_members dm
LEFT OUTER JOIN cloud_clinic.doctors d on dm.member_id = d.doctorid
LEFT OUTER JOIN cloud_clinic.clinic_doctor_designations cdd on d.doctorid = cdd.doctor_id
LEFT OUTER JOIN cloud_clinic.rm_pr_designations de on cdd.designation_id = de.designationid
LEFT OUTER JOIN cloud_clinic.doctor_spcialities ds on d.doctorID = ds.doctorid
LEFT OUTER JOIN cloud_clinic.spaciality s on ds.spacialityID = s.id
LEFT OUTER JOIN cloud_clinic.clinic_doctor_departments dd on dm.member_id = dd.doctor_id
LEFT OUTER JOIN cloud_clinic.rm_pr_departments r on dd.department_id  = r.departmentid
LEFT OUTER JOIN cloud_clinic.clinic_doctors cd on dm.member_id = cd.DoctorID
LEFT OUTER JOIN cloud_clinic.clinic_branches cb on cd.clinic_branch_id = cb.branch_id
LEFT OUTER JOIN cloud_clinic.clinics oc on cb.clinic_id = oc.id
LEFT OUTER JOIN cloud_clinic.doctor_education dee on dm.member_id = dee.doctorid
LEFT OUTER JOIN cloud_clinic.rm_pr_degrees rpd on dee.degreeid = rpd.degreeid
where dm.doctor_id  = '" + PersonID + "' And d.FirstName like '" + term + "%' group by d.DoctorID LIMIT 5";

            MySqlDataAdapter da = new MySqlDataAdapter(cmd, con);

            DataSet ds = new DataSet();

            da.Fill(ds);

            SearchResult result = new SearchResult();

            //List<string> listTest = new List<string>();

            List<Doctor> doctorList = new List<Doctor>();

            List<Connection> connectionList = new List<Connection>();

            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
            {

                //string test = ds.Tables[0].Rows[i]["TestName"].ToString();

                Connection objConnection = new Connection();

                objConnection.ConnectionID = ds.Tables[0].Rows[i]["DoctorID"].ToString();
                objConnection.ConnectionName = ds.Tables[0].Rows[i]["FirstName"].ToString() + " " + ds.Tables[0].Rows[i]["LastName"].ToString();
                objConnection.ImageName = ds.Tables[0].Rows[i]["Image"].ToString();
                //objConnection.Type = "Connection";
                connectionList.Add(objConnection);
            }

            con.Close();


            cmd = @"SELECT DISTINCT d.DoctorID,
d.FirstName,
d.LastName,
d.Image
FROM cloud_clinic.doctors d
where (d.FirstName like '"+term+"%') and (d.DoctorID not in ( select dm.member_id FROM cloud_clinic.doctor_members dm )) LIMIT 5";

            con.Open();

            MySqlDataAdapter da1 = new MySqlDataAdapter(cmd, con);

            DataSet ds1 = new DataSet();

            da1.Fill(ds1);

            

            //List<string> listTest = new List<string>();

           // List<Doctor> doctorList = new List<Doctor>();

            for (int i = 0; i < ds1.Tables[0].Rows.Count; i++)
            {

                //string test = ds.Tables[0].Rows[i]["TestName"].ToString();

                Doctor objDoctor = new Doctor();

                objDoctor.DoctorID = ds1.Tables[0].Rows[i]["DoctorID"].ToString();
                objDoctor.DoctorName = ds1.Tables[0].Rows[i]["FirstName"].ToString() + " " + ds1.Tables[0].Rows[i]["LastName"].ToString();
                objDoctor.ImageName = ds1.Tables[0].Rows[i]["Image"].ToString();
                objDoctor.Type = "Doctor";
                doctorList.Add(objDoctor);
            }

            result.connections = connectionList;
            result.doctors = doctorList;
            
            
            return result;
        }

Cheers............:D


I hope you like it.......;)




Thanks.

Sunday, November 3, 2013

How to detect user reached bottom of page while scrolling

Few days before i needed to implement on scroll paging as the facebook or linkedin is doing, instead of paging i thought to do infinite page scroll paging in my application so i decided to share the thing here as well.


Here is a sample code. Add this html to a empty html page:


<div style="height: 4000px">Scroll down!</div>

Here is the jquery code, but remeber to add jquery minified version in your page head as well like this:


<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>


Here is the jquery code to detect if user has reached page end while scrolling:


<script type="text/javascript">

        $(window).scroll(function () {
            if ($(window).scrollTop() + $(window).height() == $(document).height()) {
                alert("bottom!");
            }
        });

    
    </script>


here is the code to detect if user is near the bottom:


 $(window).scroll(function() {   
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("bottom!");
   }
});

Hope you got it. -:)