How to pass dictionary from JQuery Ajax to C# MVC Model

We have a model class in mvc c#, that also contains a dictionary property, and we want to pass data in this dictionary from jquery ajax.

Here we go,
We have a Model Class

 public class ModelClass
    {
      
        private Dictionary<string, string> _parameter= new Dictionary<string, string>();
        public Dictionary<string, string> Parameter{ get { return _parameter; } set { _parameter= value; } }
    }

And Here is Ajax and jquery code to send the dictionary as parameter


var parameter = [];
            parameter.push({ "key": "FromDate", "value": $('#FromDate').val() });
            parameter.push({ "key": "ToDate", "value": $('#ToDate').val() });
            
            var jsonParameters = { "Parameter": parameter };

            $.ajax({
                type: "POST",
                url: '@Url.Action("Home","Index")',
                contentType: 'application/json',
                data: JSON.stringify({ ModelClass: jsonParameters }),
                success: function (data) {
                    
                },
                error: function () {
                    alert('error');
                }
            })


And Here is controller that will accept parameters in ModelClass


public class HomeController : Controller
    {
       public ActionResult Index(ModelClass model) // Here You will get Dictionary as parameter
        {
            return View();
        }
    }

US Mobile Number Format validate JQuery (123)456-7890

Validation Mobile Number Field in US Format Mobile Number with Regexp in javascript/JQuery

 

 


<input type="text" class="form-control" name="Phone" placeholder="(123)456-7890" id="MobileNumber" onblur="return validateUsNumber(this);" maxlength="14" />

function validateUsNumber(e) {
        var value = $(e).val();
        if (value.trim() != '') {
            var pattern = new RegExp("^[\\(]{0,1}([0-9]){3}[\\)]{0,1}[ ]?([^0-1]){1}([0-9]){2}[ ]?[-]?[ ]?([0-9]){4}[ ]*((x){0,1}([0-9]){1,5}){0,1}$");
            if (!pattern.test(value)) {
                alert("Please enter mobile number in valid format ! (123)456-7890");
                $(e).val('');
                return false;
            }
        }
    }


How to get first day date and last day date of a week in jquery ?

If you want to get first day and last day of a week,  code is here :

 


var curr = new Date; // If you want of any date then just pass date in Date('08/22/2019')
        var first = curr.getDate() - curr.getDay(); // First day is the day of the month - the day of the week
        var last = first + 6; // last day is the first day + 6
        var firstday = new Date(curr.setDate(first)).toLocaleDateString();
        var lastday = new Date(curr.setDate(last)).toLocaleDateString();
        console.log(firstday );
        console.log(lastday );

This will give you Sunday as First Day and Saturday as last day
Tested on Chrome Browser Console :

Remove all li from ul in jquery

If you have a <ul> and <li> in <ul>, and if you want to clear or remove all li from <ul>, here jquery code to empty this <ul>

HTML Code :

<ul class=”attachmentList”>

<li>First</li>

<li>Second</li>

<li>Third</li>

</ul>

 

$('.attachmentList').empty();

Multiple email validations in multiple text boxes with comma separate email ids in Javascript

Before Form submit, if you have multiple text boxes for emails like To Email and Cc Email, and both text boxes having multiple email ids with comma separate, then before form submit you can add validation through JQuery or java script.

 

<!DOCTYPE html>
<html>
<body>

<form>
To Email: <textarea name=”ToEmail” id=”ToEmail”></textarea><br>
CC Email: <textarea name=”CCEmail” id=”CCEmail”></textarea><br>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>

 


$('form').submit(function () {
        var ToEmail = $('#ToEmail').val();
        var CCEmail = $('#CCEmail').val();
        var validArray = [];
        var emails = ToEmail.replace(/\s/g, '').split(",");
        Array.prototype.push.apply(emails, CCEmail.replace(/\s/g, '').split(","));
        var valid = true;
        var regex = /^(([^&amp;amp;lt;&amp;amp;gt;()[\]\\.,;:\s@\"]+(\.[^&amp;amp;lt;&amp;amp;gt;()[\]\\.,;:\s@\"]+)*)|(\".+\"))@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

        for (var i = 0; i &amp;amp;lt; emails.length; i++) {
            if (emails[i] == "" || !regex.test(emails[i])) {
                valid = false;
            }
            validArray.push(valid);
        }
        var isFalse = validArray.includes(false);
        if (isFalse == true) {
alert("Please enter emails in proper format !");
            return false;
        }
        else {
            return true;
        }
    });

Now Here an array will store comma separate email ids of first text box and then same array will append the more email ids from another text box, for this we have used :


Array.prototype.push.apply(emails, CCEmail.replace(/\s/g, '').split(","));

Above line of code will append second text box email ids into array, that already having values of first textbox.(email)

Note:- If you are working on ASP.NET MVC Razor then in Regex Expression you have to replace @ to @@, because @ will determine as razor syntex.

Editable Text Box In Jquery And Post Data to ASP.NET

 

Here i have a grid, and in grid i have a column with Quanity, so if i want to change this quantity with editable text box.

so Here will be Link tag and text box with some id and selectors.

And this will work if there will multiple editable textboxes are there in table grid.

Here First HTML Code

<a href="JavaScript:Void(0);" id="editqty">@item.Qty</a>
<input type="text" style="width:70px;display:none;" class="form-control" id="qtyValue" value="@item.Qty" data-value="@item.PKId" data-target="@item.Qty" />

So above is html code and only <a> tag will be shown on grid, and when you will click on Link then it will hide and text box will show.
In this jquery code all other text box in grid and all things will be same as previous.
Below is jquery code
$("a[id$='editqty']").each(function () {
$(this).on('click', function () {
$("input[type='text'][id$='qtyValue']").hide();
$("a[id$='editqty']").show();
$(this).next('input[type=text]').show();
$(this).next('input[type=text]').val($(this).html());
$(this).hide();
});
});

$("input[type='text'][id$='qtyValue']").blur(function () {

$(this).prev("a[id$='editqty']").show();
$(this).hide();

var prevValue = $(this).attr('data-target');
var savedValue = $(this).val().trim();
var id = $(this).attr('data-value');

if (prevValue != savedValue)

{

$.ajax({
cache: false,
type: "POST",
url: '@Url.Action("Index","Employee")',
data: { savedValue: savedValue, id: id },
success: function (data) {
alert(data);
},
error: function (xhr, ajaxOptions, thrownError) {
if (xhr.status == 401) {
window.location.href =  "Account/Login/";
}
}
});

}

}

Validate textbox only numeric or number in JQuery

If you want to validate text for for entering only number or numeric values then here is jquery/javascript code.(Tested)

Below Is for All text box on page

$(document).ready(function () {
            $("input[type='text']").keypress(function (e) {
                if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                    return false;
                }
            });
        });

And if you want to apply on specific text box then you can use selecter ID or class as you wish.



$(document).ready(function () {
            $("#txtbox1").keypress(function (e) {
                if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                    return false;
                }
            });
        });

How to get selected checkboxes value using JQuery?

Here 4 checkboxes with same class “chk” and now i want values of checked checkboxes values on a button click

<input type="checkbox" class="chk" id="filterCheckboxSub" value="1" 
<input type="checkbox" class="chk" id="filterCheckboxSub" value="2" 
<input type="checkbox" class="chk" id="filterCheckboxSub" value="3" 
<input type="checkbox" class="chk" id="filterCheckboxSub" value="4" 
<button type="button" id="btnFilter">Filter</button>

Here the jquery code for getting value of selected checkboxes.

 $('#btnFilter').click(function () {

            var chkArray = [];

            $(".chk:checked").each(function () {
                chkArray.push($(this).val());
            });

            var selected;
            selected = chkArray.join(',');

            if (selected.length &gt; 0) {
                alert("You have selected " + selected);
            } else {
                alert("Please at least check one of the checkbox");
            }

        });