Showing posts with label MVC 3 C# ( MVC3 ). Show all posts
Showing posts with label MVC 3 C# ( MVC3 ). Show all posts

Monday, April 23, 2012

Custom Selectors for Between , Between And Equals , Not Between , Not Between And Equals

for live demo see this link : http://jsfiddle.net/nanoquantumtech/XBcrv/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        (function ($) {
            $.extend($.expr[':'], {
                bt: function (elem, i, match) {
                    return ((parseInt(match[3].split(',')[0]) < i) && (i < parseInt(match[3].split(',')[1])));
                },

                nbt: function (elem, i, match) {
                    return !((parseInt(match[3].split(',')[0]) < i) && (i < parseInt(match[3].split(',')[1])));
                },

                bte: function (elem, i, match) {
                    return ((parseInt(match[3].split(',')[0]) <= i) && (i <= parseInt(match[3].split(',')[1])));
                },

                nbte: function (elem, i, match) {
                    return !((parseInt(match[3].split(',')[0]) <= i) && (i <= parseInt(match[3].split(',')[1])));
                }
            });
        })(jQuery);


        $(document).ready(function () {
            $("#test1 td:bt(3,5)").css("color", "red");

            $("#test2 td:bte(3,5)").css("color", "red");

            $("#test3 td:nbt(3,5)").css("color", "red");

            $("#test4 td:nbte(3,5)").css("color", "red");

        });
    </script>
    <style type="text/css">
        table
        {
            margin: 25px 0px;
        }
      
        h1
        {
            font-weight: bolder;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>
        Between ( $("#test1 td:bt(3,5)").css("color", "red"); )</h1>
    <table id="test1" border="1">
        <tr>
            <td>
                TD #0
            </td>
            <td>
                TD #1
            </td>
            <td>
                TD #2
            </td>
        </tr>
        <tr>
            <td>
                TD #3
            </td>
            <td>
                TD #4
            </td>
            <td>
                TD #5
            </td>
        </tr>
        <tr>
            <td>
                TD #6
            </td>
            <td>
                TD #7
            </td>
            <td>
                TD #8
            </td>
        </tr>
    </table>
    <h1>
        Between And Equals ( $("#test2 td:bte(3,5)").css("color", "red"); )</h1>
    <table id="test2" border="1">
        <tr>
            <td>
                qTD #0
            </td>
            <td>
                qTD #1
            </td>
            <td>
                qTD #2
            </td>
        </tr>
        <tr>
            <td>
                qTD #3
            </td>
            <td>
                qTD #4
            </td>
            <td>
                qTD #5
            </td>
        </tr>
        <tr>
            <td>
                qTD #6
            </td>
            <td>
                qTD #7
            </td>
            <td>
                qTD #8
            </td>
        </tr>
    </table>
    <h1>
        Not Between ( $("#test3 td:nbt(3,5)").css("color", "red"); )</h1>
    <table id="test3" border="1">
        <tr>
            <td>
                wTD #0
            </td>
            <td>
                wTD #1
            </td>
            <td>
                wTD #2
            </td>
        </tr>
        <tr>
            <td>
                wTD #3
            </td>
            <td>
                wTD #4
            </td>
            <td>
                wTD #5
            </td>
        </tr>
        <tr>
            <td>
                wTD #6
            </td>
            <td>
                wTD #7
            </td>
            <td>
                wTD #8
            </td>
        </tr>
    </table>
    <h1>
        Not Between And Equals ( $("#test4 td:nbte(3,5)").css("color", "red"); )</h1>
    <table id="test4" border="1">
        <tr>
            <td>
                rTD #0
            </td>
            <td>
                rTD #1
            </td>
            <td>
                rTD #2
            </td>
        </tr>
        <tr>
            <td>
                rTD #3
            </td>
            <td>
                rTD #4
            </td>
            <td>
                rTD #5
            </td>
        </tr>
        <tr>
            <td>
                rTD #6
            </td>
            <td>
                rTD #7
            </td>
            <td>
                rTD #8
            </td>
        </tr>
    </table>
</body>
</html>
Posted by at 1 comment:
Labels: , ,

Thursday, April 12, 2012

How to create CSS Class Dinamically using JQuery.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>How to create CSS Class Dinamically using JQuery. </title>
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('p').one('click', function () {
                $(this).find('span').remove();
                $('style').length > 0 ? '' : $('head').append('<style type="text/css"></style>');
                $('style').append('p { height: 100px; width: 100px; color: red; }');
            });

            $('b').one('click', function () {
                $(this).find('span').remove();
                $('style').length > 0 ? '' : $('head').append('<style type="text/css"></style>');
                $('style').append('b { color: green; }');
            });
        });
    </script>
</head>
<body>
    <p>
        How to create CSS Class Dinamically using JQuery.<span>Click Me.</span>
    </p>
    <b>Thulasi Ram.S <span>Me Too..</span> </b>
</body>
</html>
Posted by at No comments:
Labels: , ,

Tuesday, March 27, 2012

How to clear form for particular filed only using jquery

 // Here except Email and Password field alone will not be cleared remaing fileds will be cleared.
 // class="ClearForm"  because not exist.

// class="ClearForm Corner" this is multiple class style. You can add more than one class style to 
// htmal tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        (function ($) {
            $.fn.clearForm = function () {
                return this.each(function () {
                    var obj = $(this);
                    var objClass = '.ClearForm';

                    obj.find('[type="text"]' + objClass + ',[type="password"]' + objClass + ',[type="hidden"]' + objClass + ',textarea' + objClass).val('');
                    obj.find('[type="checkbox"]' + objClass + ',[type="radio"]' + objClass).attr('checked', false);
                    obj.find('select' + objClass).val(-1);
                });
            };
        })(jQuery);        
    </script>
    <script type="text/javascript">
//  Here Email and Password field alone will not be cleared.  class="ClearForm"  because not exist.
        $(document).ready(function () {
            $('#btnClearForm').click(function () {
                $('#form1').clearForm();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    Email
                </td>
                <td>
                    <input type="text" id="tbEmail" class=" Corner" />
                </td>
            </tr>
            <tr>
                <td>
                    Password
                </td>
                <td>
                    <input type="password" id="tbPassword" class="Corner" />
                </td>
            </tr>
            <tr>
                <td>
                    HiddenValue
                </td>
                <td>
                    <input type="hidden" id="hdnHiddenValue" class="ClearForm Corner" />
                </td>
            </tr>
            <tr>
                <td>
                    Details
                </td>
                <td>
                    <textarea style="width: 300px; height: 300px;" id="tbDetails" class="ClearForm Corner"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    Sex
                </td>
                <td>
                    <input type="radio" value="Male" name="rblSex" class="ClearForm RedColor" />Male<br />
                    <input type="radio" value="Female" name="rblSex" class="ClearForm RedColor" />Female
                </td>
            </tr>
            <tr>
                <td>
                    Property
                </td>
                <td>
                    <input type="checkbox" value="Car" name="cbProperty" class="ClearForm RedColor" />Car<br />
                    <input type="checkbox" value="House" name="cbProperty" class="ClearForm RedColor" />House<br />
                    <input type="checkbox" value="Van" name="cbProperty" class="ClearForm RedColor" />Van<br />
                </td>
            </tr>
            <tr>
                <td>
                    Status
                </td>
                <td>
                    <select id="ddlStatus" class="ClearForm RedColor">
                        <option>Select</option>
                        <option value="single">single</option>
                        <option value="married">married</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" id="btnClearForm" value="Clear Form" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>
Posted by at No comments:
Labels: , ,

How to clear form using jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title> 
                                                                         // add your reference jquery  file below
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
                                                       
    <script type="text/javascript">
        (function ($) {
            $.fn.clearForm = function () {
                return this.each(function () {
                    var obj = $(this);
                    obj.find('[type="text"],[type="password"],[type="hidden"],textarea').val('');
                    obj.find('[type="checkbox"],[type="radio"]').attr('checked', false);
                    obj.find('select').val(-1);
                });
            };
        })(jQuery);       
    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnClearForm').click(function () {
                $('#form1').clearForm();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    Email
                </td>
                <td>
                    <input type="text" id="tbEmail" />
                </td>
            </tr>
            <tr>
                <td>
                    Password
                </td>
                <td>
                    <input type="password" id="tbPassword" />
                </td>
            </tr>
            <tr>
                <td>
                    HiddenValue
                </td>
                <td>
                    <input type="hidden" id="hdnHiddenValue" />
                </td>
            </tr>
            <tr>
                <td>
                    Details
                </td>
                <td>
                    <textarea style="width: 300px; height: 300px;" id="tbDetails"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    Sex
                </td>
                <td>
                    <input type="radio" value="Male" name="rblSex" />Male<br />
                    <input type="radio" value="Female" name="rblSex" />Female
                </td>
            </tr>
            <tr>
                <td>
                    Property
                </td>
                <td>
                    <input type="checkbox" value="Car" name="cbProperty" />Car<br />
                    <input type="checkbox" value="House" name="cbProperty" />House<br />
                    <input type="checkbox" value="Van" name="cbProperty" />Van<br />
                </td>
            </tr>
            <tr>
                <td>
                    Status
                </td>
                <td>
                    <select id="ddlStatus">
                        <option>Select</option>
                        <option value="single">single</option>
                        <option value="married">married</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" id="btnClearForm" value="Clear Form" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>
Posted by at No comments:
Labels: , ,

Saturday, February 11, 2012

placeholder for ie using jquery plugin

 I tested for ie ( microsoft internet explore ) version 9.0.4 or above its working fine.
        
    I  am trying to resovle for password also...




$(function () {
    if ($.browser.msie) {         //this is for only ie condition ( microsoft internet explore )
        $('input[type="text"][placeholder], input[type="password"][placeholder], textarea[placeholder]').each(function () {
            var obj = $(this);

            if (obj.attr('placeholder') != '') {
                if (obj.val() == '') {
                    obj.val(obj.attr('placeholder'))

                    if (obj.attr('type') == 'password') {
                        obj.addClass('classForPassword').attr('type', 'text');
                    }
                }

                obj.focus(function () {
                    if (obj.val() == obj.attr('placeholder')) {
                        obj.val('');

                        if (obj.hasClass('classForPassword')) {
                            obj.attr('type', 'password');
                        }
                    }
                });

                obj.blur(function () {
                    if ($.trim(obj.val()) == '') {
                        obj.val(obj.attr('placeholder'));

                        if (obj.hasClass('classForPassword')) {
                            obj.attr('type', 'text');
                        }
                    }
                });
            }
        });
    }
});
Posted by at 1 comment:
Labels: , ,

Wednesday, December 21, 2011

how to use jquery dialog modal form in mvc 3 ( mvc3 ) for Inser Or Update

  //Model     ( User.cs )

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Entity
{
    public class User
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
        public string Address { get; set; }
    }     
}


//Controller  ( UserController.cs )

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Entity;

namespace Thulasi_ram_MVC3.Controllers
{
    public class UserController : Controller
    {
        public ActionResult AddUser()
        {
            return View();
        }

        [HttpPost]
        public ActionResult AddUser(User entity)
        {
            //add the user command
            return View();
        }
    }
}


//View ( AddUser.cshtm )


@model Entity.User
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>Add User</title>
    <link rel="Stylesheet" href="../../Scripts/css/ui-lightness/jquery-ui-1.8.16.custom.css" />
    <script src="@Url.Content("~/Scripts/jquery-1.6.4.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.16.Alterd.js")" type="text/javascript"></script>
// u can copy this js file form 
// http://nanoquantumtech.blogspot.com/2011/12/jquery-ui-1816alteredjs.html

    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnAdd').hide();

            $("#JquerUiDialog").dialog({
                modal: true,
                autoOpen: false,
                appendWhere: '#beginForm',
                buttons: {
                    Ok: function () {
                        $('#btnAdd').trigger('click');
                        $(this).dialog("close");
                    }
                }
            });

            $('#AddUser').click(function () {
                $("#JquerUiDialog").dialog("open");
            });
        });
    </script>
</head>
<body>
    <a id="AddUser" style="cursor: pointer;">Add User</a>
    @using (Html.BeginForm())
    {
        @Html.ValidationSummary(true)
        <div id="beginForm">
            <h1>
                Jquery Ui Dialog Form
            </h1>
            <div id="JquerUiDialog">
                <legend>User</legend>
                <div class="editor-label">
                    @Html.LabelFor(model => model.Name)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Name)
                    @Html.ValidationMessageFor(model => model.Name)
                </div>
                <div class="editor-label">
                    @Html.LabelFor(model => model.Age)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Age)
                    @Html.ValidationMessageFor(model => model.Age)
                </div>
                <div class="editor-label">
                    @Html.LabelFor(model => model.Address)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Address)
                    @Html.ValidationMessageFor(model => model.Address)
                </div>
                <p>
                    <input id="btnAdd" type="submit" value="Add" />
                </p>
            </div>
        </div>
    }
    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>
</body>
</html>

the default value for appendWhere: 'body'
Remember if u r using insert or update use id which is below BeginForm
for appendWhere. if u r not using it will give error like
(
Value cannot be null. 
Parameter name: source )

 eg:

appendWhere: '#beginForm', as shown above example.




/*!
 * jQuery UI 1.8.16
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI
 */


it is an altered one...


Posted by at No comments:
Labels: ,
Subscribe to: Posts (Atom)