jQuery and JavaScript Coding: Examples and Best Practices - RULE #1: SEPARATE JAVASCRIPT FUNCTIONALITY

Bad markup:

Never include Javascript events as inline attributes. This practice should be completely wiped from your mind.

<a onclick="doSomething()" href="#">Click!</a>

Good markup:

All Javascript behaviours should be included in external script files and linked to the document with a <script> tag in the head of the page. So, the anchor tag would appear like this:

<a href="backuplink.html" class="doSomething">Click!</a>

And the Javascript inside the myscript.js file would contain something like this:

...

$('a.doSomething').click(function(){
 // Do something here!
 alert('You did something, woo hoo!');
});
...

SQL Insert mutiple values to table

Database - Insert into mst_type(work_type_id,sub_work_type,record_status,create_user,create_stamp,update_user,update_stamp) values (9,'Primary','A','system',GETDATE(),'system',GETDATE()), (9,'Center','A','system',GETDATE(),'system',GETDATE()), (9,'Medical','A','system',GETDATE(),'system',GETDATE()), (9,'Staff','A','system',GETDATE(),'system',GETDATE()), (9,'Aanganwadi','A','system',GETDATE(),'system',GETDATE()), (9,'School','A','system',GETDATE(),'system',GETDATE()), (9,'Village','A','system',GETDATE(),'system',GETDATE()), (9,'Samajik Sabhagruha','A','system',GETDATE(),'system',GETDATE()), (9,'Shopping Center Building','A','system',GETDATE(),'system',GETDATE()), (9,'Veternary Hospital','A','system',GETDATE(),'system',GETDATE()), (9,'Mahila Work Shed Building','A','system',GETDATE(),'system',GETDATE()), (9,'Product Selling Stall','A','system',GETDATE(),'system',GETDATE()), (9,'Office Building','A','system',GETDATE(),'system',GETDATE()), (9,'Staff Quarter Building','A','system',GETDATE(),'system',GETDATE()), (9,'Smashan Bhumi','A','system',GETDATE(),'system',GETDATE()), (9,'Toilet Blocks','A','system',GETDATE(),'system',GETDATE()), (10,'Major Bridge','A','system',GETDATE(),'system',GETDATE()), (10,'Minor Bridge','A','system',GETDATE(),'system',GETDATE()), (10,'Culverts','A','system',GETDATE(),'system',GETDATE())

SQL add column to table

alter table trn
add sub_wo int

asp.net dropdown change hide show html div

   $('#<%= ddl.ClientID %>').change(function () {
                var selectedvalue = $(this).val();
             
                if (selectedvalue == 1) {
                    $("#divContractorName").show();
                }
                else {
                    $("#divContractorName").hide();
                }
            });


   <div id="divContractorName" class="wd33percommuNew lFloat " style="display: none;">
                                Hello world
                                </div>

SQL if value is not passing to stored procedure make it null

1) If Name field in form is empty then stored procedure will give error because it is expecting parameter name.

2) So to resolved this error modify stored procedure like below

ALTER procedure procedrename
(
   @name nvarchar = null
)

SQL get stored procedure body by name

sp_helptext yourStoredProcedureName

assigning Null value to datetime in C#

Since DateTime is a value type (like int), a Null value cannot be assigned to it.

DateTime? dateSample;
dateSample.Value = null;

//or 

Nullable<DateTime> dateSample2;
dateSample2.Value = null;

Backspace or Delete key In TextBox with Masked Edit Extender in ASP.NET not working

1) Create MaskedEditFix.js File

(function(){try{var n=Sys.Extended.UI.MaskedEditBehavior.prototype,t=n._ExecuteNav;n._ExecuteNav=function(n){var i=n.type;i=="keydown"&&(n.type="keypress"),t.apply(this,arguments),n.type=i}}catch(i){return}})()

2) Add to .cs file

 protected void Page_Init(object sender, EventArgs e)
        {
            if (!ClientScript.IsStartupScriptRegistered(GetType(), "MaskedEditFix"))
            {
                ClientScript.RegisterStartupScript(GetType(), "MaskedEditFix", String.Format("<script type='text/javascript' src='{0}'></script>", Page.ResolveUrl("../Scripts/MaskedEditFix.js")));
            }
        }

3) Then check

ASP.NET MVC ViewData vs ViewBag vs TempData vs Session

ViewData

1. ViewData is a dictionary object that is derived from ViewDataDictionary class.

   
   public ViewDataDictionary ViewData { get; set; }
   
   

2. ViewData is a property of ControllerBase class.
3. ViewData is used to pass data from controller to corresponding view.
4. It’s life lies only during the current request.
5. If redirection occurs then it’s value becomes null.
6. It’s required typecasting for getting data and check for null values to avoid error.

ViewBag

1. ViewBag is a dynamic property that takes advantage of the new dynamic features in C# 4.0.
2. Basically it is a wrapper around the ViewData and also used to pass data from controller to corresponding view.

   
   public Object ViewBag { get; }
   
   

3. ViewBag is a property of ControllerBase class.
4. It’s life also lies only during the current request.
5. If redirection occurs then it’s value becomes null.
6. It doesn’t required typecasting for getting data.

TempData

1. TempData is a dictionary object that is derived from TempDataDictionary class and stored in short lives session.

   
   public TempDataDictionary TempData { get; set; }
   
   

2. TempData is a property of ControllerBase class.
3. TempData is used to pass data from current request to subsequent request (means redirecting from one page to another).
4. It’s life is very short and lies only till the target view is fully loaded.
5. It’s required typecasting for getting data and check for null values to avoid error.
6. It is used to store only one time messages like error messages, validation messages.

Session

1. In ASP.NET MVC, Session is a property of Controller class whose type is HttpSessionStateBase.

   
   public HttpSessionStateBase Session { get; }
   
   

2. Session is also used to pass data within the ASP.NET MVC application and Unlike TempData, it persists for its expiration time (by default session expiration time is 20 minutes but it can be increased).
3. Session is valid for all requests, not for a single redirect.
4. It’s also required typecasting for getting data and check for null values to avoid error.

asp.net textbox limit characters

   var MaxLength = 7;
            $('#<%=txtZip.ClientID%>').keypress(function (e) {
                alert('textbox -' + $(this).val().length);
                if ($(this).val().length > MaxLength) {
                    alert('true');
                    e.preventDefault();
                }
            });

jquery get dropdown selected text by class name

var Id = $('.name option:selected').text();

JavaScript Array pop() Method

<!DOCTYPE html>
<html>
<body>

<p>Click the button to remove the last element from the array.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
    fruits.pop();
    document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

ASP.NET CheckBoxList Operations with jQuery - change color on checkbox click

 $("#<%= chk.ClientID %> :checkbox").click(function () {

                $(this).parent().css('color', $(this).is(':checked') ? 'blue' : 'black');
       
            });

ASP.NET CheckBoxList Operations with jQuery - change color of checked items

 $("[id*=chk] input:checked").each(function () {

                            $(this).parent().css('color', $(this).is(':checked') ? 'blue' : 'black');

                       

                        });

ASP.NET CheckBoxList Operations with jQuery - Max Selection Limit

$("[id*=CheckBoxList1] input:checkbox").change(function () {           var maxSelection = 3;           if ($("[id*=CheckBoxList1] input:checkbox:checked").length > maxSelection) {               $(this).prop("checked", false);               alert("Please select a maximum of " + maxSelection + " items.");           }       })

ASP.NET CheckBoxList Operations with jQuery - Check Items By Text

//Check Items by Text     var selText = ['Item-1','Item-3'];     var $ctrls = $("[id*=CheckBoxList1]");     for (var i = 0; i < selText.length; i++) {         $ctrls.find('label:contains("' + selText[i] + '")').prev().prop('checked', true);     }