Monday 9 November 2015

Clear all fields in a form using Jquery

Clear / Reset Buttons
Clear Button: When you clear a form, you would be removing ALL values from the form.
Reset Button: When you resets a form, it will resets the original values of all fields in a form.
OR
Reset all form fields to their default values.
  ModelClass for this Example
public partial class EmployeeDetail
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Gender { get; set; }
public string City { get; set; }
public string State { get; set; }
  public string Address { get; set; }
[Display(Name="Languages Known")]
public string Languages { get; set; }
public Nullable<decimal> Salary { get; set; }
public Nullable<System.DateTime> HireDate { get; set; }
  public string Email { get; set; }
   }

}
Create.cshtml
@model Demo.Models.EmployeeDetail
@{
ViewBag.Title = "Create";
}
<h2>Create</h2>
@using (Html.BeginForm("Create", "Employee", FormMethod.Post, new {id="createform" }))
{
@Html.ValidationSummary(true)
<fieldset>
<legend>Employee Detail</legend>
<table>
<tr><td>@Html.LabelFor(model => model.FirstName)</td>
<td> @Html.EditorFor(model => model.FirstName)
@Html.ValidationMessageFor(model => model.FirstName)</td>
</tr>
<tr>
<td> @Html.LabelFor(model => model.LastName)</td>
<td>@Html.EditorFor(model => model.LastName)
@Html.ValidationMessageFor(model => model.LastName)</td>
</tr>
<tr>
<td>@Html.LabelFor(model => model.Gender)</td>
<td>
@Html.RadioButton("Gender", "male")Male
@Html.RadioButton("Gender", "female")Female
@Html.ValidationMessageFor(model => model.Gender)
</td>
</tr>
  <tr><td>@Html.LabelFor(model => model.City)</td><td> @Html.DropDownList("City", new List<SelectListItem>
{
new SelectListItem { Text ="Hyderabad",Value="Hyderabad"},
new SelectListItem { Text = "Amaravati",Value="Amaravati"}
},"-------------Select----------")
@Html.ValidationMessageFor(model => model.City)
@Html.ValidationMessageFor(model => model.City)</td></tr>
<tr><td>@Html.LabelFor(model => model.State)</td><td> @Html.DropDownList("State", new List<SelectListItem>
{
new SelectListItem { Text ="Telangana",Value="Telangana"},
new SelectListItem { Text ="Andhra Pradesh",Value="Andhra Pradesh"},
},"-----------Select------------")
@Html.ValidationMessageFor(model => model.State)
@Html.ValidationMessageFor(model => model.State)</td></tr>
<tr><td> @Html.LabelFor(model => model.Address)</td><td> @Html.TextAreaFor(model => model.Address)
@Html.ValidationMessageFor(model => model.Address)</td></tr>
<tr><td> @Html.LabelFor(model => model.Languages)</td><td>
@Html.CheckBox("Lang", "english") English
@Html.CheckBox("Lang", "hindi") Hindi
@Html.CheckBox("Lang", "telugu") Telugu

@Html.ValidationMessageFor(model => model.Languages)</td></tr>
<tr><td> @Html.LabelFor(model => model.Salary)</td><td> @Html.EditorFor(model => model.Salary)
@Html.ValidationMessageFor(model => model.Salary)</td></tr>
<tr><td>
@Html.LabelFor(model => model.HireDate)
</td>
<td>@Html.TextBoxFor(m => m.HireDate, "{0:MM/dd/yyyy}", new { @class = "datepicker" })
@Html.ValidationMessageFor(model => model.HireDate) </td>
</tr>
@* <tr><td> @Html.LabelFor(model => model.MobileNo)</td>
<td> @Html.EditorFor(model => model.MobileNo)
@Html.ValidationMessageFor(model => model.MobileNo)</td>
</tr>*@
<tr><td>@Html.LabelFor(model => model.Email)</td>
<td> @Html.EditorFor(model => model.Email)
@Html.ValidationMessageFor(model => model.Email)</td>
</tr>
   </table>
    <p>
<input type="reset" value="Reset" />
<input type="button" value="Clear" id="clearform" />
</p>
</fieldset>
}

<script>
$(document).ready(function () {
   $('#clearform').on('click', function () {
$('#createform').find('input:text, input:password, select, textarea').val('');
$('#createform').find('input:radio, input:checkbox').prop('checked', false);
});
$('.datepicker').datepicker();
})
</script>

Note: Add these scripts in Layout
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.20.js"></script>

<link href="~/Content/jquery-ui.css" rel="stylesheet" />

Note : Here The reset function does the same if we write
input type="reset" in the form and clicked it.
It will reset the values in all fields in the form to the value they had when the page loaded.

Friday 25 September 2015

Jobs

Jan 19, 2020

Walkin Angular Developer-freshers (only male Candidates) |spot Offer

Cogent Data Solutions

Madhapur, Hyderabad, Telangana

Job Summary
Are you passionate about Angular development?

We are looking for an Angular Developer with Knowledge in building high-performing, scalable, enterprise-grade applications.

Best opportunity to kick- start your carrier!!

Position : Angular Developer (Freshers)
Location of Posting: Hyderabad (Madhapur)
Minimum Qualification: Graduation

(Please note: Only Male Candidates who are trained in Angular 6/7/8)

Mandatory Skills: Knowledge in Angular 6/7/8, HTML, CSS, Typescript.
Responsibilities and Duties

Developer responsibilities include designing and developing high-volume, low-latency applications for mission-critical systems and delivering high-availability and performance.

Contribute to all phases of the development life-cycle.

Write well designed, testable, efficient code.

Ensure designs comply with specifications.

Prepare and produce releases of software components.

Support continuous improvement by investigating alternatives and technologies and presenting these for architectural review.

Required Experience and Qualifications

Basic knowledge of CSS 3 and HTML 5 design

Should have good Knowledge of JAVASCRIPT /OOPS in JAVASCRIPT.

Looking for trained freshers who are exceptionally good in programming Skills.

Knowledge or Hands-on Experience in Angular 6/7/8 is mandatory.

Good communication and interpersonal skills.

Good Knowledge in Services & routing usage in Angular (Ex HTTP module)

Excellent problem solving, critical thinking and communication skills.

Job Type: Full-time

Industry:

Software Development

Urgently hiring

Madhapur, Hyderabad, Telangana

₹1,00,000 - ₹2,00,000 a year

Job Summary
Greetings from iNative Tech Solutions....

We've immediate opening for .Net Developer.If interested revert with your updated resume

Clinet: iNative Tech Solutions
Locations: Hyderbabad
Date & Time: Monday to Friday & 10-3pm
JD:
C#, ASP.Net , ADO.Net, . Net MVC ,SQL Server & Knowledge on angular is a added
advantage.

Job Type: Full-time

Experience:

.net: 1 year (Preferred)

total work: 1 year (Preferred)

C#: 1 year (Preferred)

HTML: 1 year (Preferred)

Education:

Bachelor's (Preferred)

Hyderabad, Telangana

Full-time, Fresher

Company Overview:
Web Synergies is a I.T. development company. Our company is situated in Singapore and Hyderabad with 21 yrs of experience in the market and having clients around the globe. Our company is a Microsoft golden partner.

Requirement :
We need dot net developer who has minimum 1+ yrs of experience in dot-net and also hand on experience in C#,ASP.NET,MVC,Entity Framework, Linq,SQL server . Having experience on Angular,J query, JavaScript, and other database and front end technologies is a added advantage.

if any one is interested send your updated resume

Job Types: Full-time, Fresher

Experience:

mvc: 1 year (Preferred)

total work: 2 years (Required)

C#: 1 year (Preferred)

ASP.NET: 1 year (Preferred)

Education:

Bachelor's (Preferred)

Benefits:

Health insurance

Provident fund (PF)

Selection rounds:

HR Interview

Technical Interview

Industry:

Software Development

Sunday 12 July 2015

Jquery Efffects

Prepared by RAMU KARRI

Friday 12 June 2015

Simple program using HTML/CSS/Jquery

Simple example using collection of items in HTML tags using JQUERY in ASP.NET MVC

HomeController.cs

Index.cshtml

Courses.cshtml

AboutUs.cshtml

ContactUs.cshtml

_Layout.cshtml

MyStyles.css

body {

margin:80px 80px 100px 100px;
overflow-x:hidden;overflow-y:hidden;
}
span{
color:red;
font-family:'Arial Rounded MT';
font-size:45px;
text-align:center;
}
#fixedheader {
position:fixed;
top:0px;
left:0px;
width:100%;
color:black;
background-color:lightgray;
padding:20px;
}
#fixedfooter {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
color: white;
background-color:dimgrey;
padding: 8px;
}
#nav{
margin:0px;
}
#nav ul{
padding:0;
list-style:none;}
#nav ul li{
float:left;
text-align:center;
width:120px;
margin:4px;
}

Note: Avoid InLine styles, try to do everything in *.css

Tuesday 2 June 2015

MVCCRUD

Create ASP.NET MVC application to process employee details using Entity Framework (DataBase First Approach)

1. Create ASP.NET MVC application and select Basic Template

2. Add Employee controller

Right-click on Controllers folder
Add
Controller
Rename controller as Employee
Click Add button

3. Add Entity Data Model to the project

Right click on Models folder
Add
ADO.NET Entity Data Model
Rename as Employee (File name-Employee.edmx)
Click OK

Follow the steps in the Entity Data Model Wizard

Select "Generate from DataBase"
Click Next

Provide Connection information

Click "New Connection" button
Provide details click OK

Check your Web.config for the connection string

</connectionStrings>

Click Next
Select the required tables (In this example using Employee Table)
Click Finish
Build the project

4. Prepare the action methods in EmployeeController.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using MvcCRUD.Models;

using System.Data;

namespace MvcCRUD.Controllers

{

public class EmployeeController : Controller

{

TestdbEntities db = new TestdbEntities();

// Code for Get/List

public ActionResult Index()

{

List<Employee> employeelist = db.Employees.ToList();

return View(employeelist);

}

// code for Get/Create

public ActionResult Create()

{

return View();

}

// code for Post/Create

[HttpPost]

public ActionResult Create(Employee employee)

{

try

{

if (ModelState.IsValid)

{

db.Employees.Add(employee);

db.SaveChanges();

return RedirectToAction("Index");

}

return View(employee);

}

catch

{

return View();

}

// code for Get/Edit

public ActionResult Edit(int id)

{

Employee employee = db.Employees.SingleOrDefault(x => x.Id == id);

return View(employee);

}

// code for Post/Edit

[HttpPost]

public ActionResult Edit(Employee employee)

{

try

{

if (ModelState.IsValid)

{

db.Entry(employee).State = EntityState.Modified;

db.SaveChanges();

return RedirectToAction("Index");

}

return View(employee);

}

catch

{

return View();

}

// code for Get/Details

public ActionResult Details(int id)

{

Employee employee = db.Employees.SingleOrDefault(x => x.Id == id);

return View(employee);

}

// code for Get/Delete

public ActionResult Delete(int id)

{

Employee employee = db.Employees.SingleOrDefault(x => x.Id == id);

return View(employee);

}

// code for Post/Delete

[HttpPost]

public ActionResult Delete(Employee employee)

{

try

{

if (ModelState.IsValid)

{

db.Entry(employee).State = EntityState.Deleted;

db.SaveChanges();

return RedirectToAction("Index");

}

return View(employee);

}

catch

{

return View();

}

5. Add views for above action methods by using Scaffold templates to generate the views and

Modify the content according to the requirement.

6. Go to solution Explorer

App_Start-->RouteConfig.cs

Change the ControllerName to Employee and action to Index and Build the application.

Index.cshtml

@model IEnumerable<MvcCRUD.Models.Employee>

<h2>Index</h2>

<p>

@Html.ActionLink("Create New", "Create")

</p>

<table>

<tr>

<th>

@Html.DisplayNameFor(model => model.Id)

</th>

<th>

@Html.DisplayNameFor(model => model.Name)

</th>

<th>

@Html.DisplayNameFor(model => model.Gender)

</th>

<th>

@Html.DisplayNameFor(model => model.Age)

</th>

<th>

@Html.DisplayNameFor(model => model.HireDate)

</th>

<th>

@Html.DisplayNameFor(model => model.Salary)

</th>

<th>

@Html.DisplayNameFor(model => model.ContactNo)

</th>

<th>Actions</th>

</tr>

@foreach (var item in Model) {

<tr>

<td>

@Html.DisplayFor(modelItem => item.Id)

</td>

<td>

@Html.DisplayFor(modelItem => item.Name)

</td>

<td>

@Html.DisplayFor(modelItem => item.Gender)

</td>

<td>

@Html.DisplayFor(modelItem => item.Age)

</td>

<td>

@Html.DisplayFor(modelItem => item.HireDate)

</td>

<td>

@Html.DisplayFor(modelItem => item.Salary)

</td>

<td>

@Html.DisplayFor(modelItem => item.ContactNo)

</td>

<td>

@Html.ActionLink("Edit", "Edit", new { id=item.Id }) |

@Html.ActionLink("Details", "Details", new { id=item.Id }) |

@Html.ActionLink("Delete", "Delete", new { id=item.Id })

</td>

</tr>

}

</table>

Create.cshtml

@model MvcCRUD.Models.Employee

<h2>Create</h2>

@using (Html.BeginForm()) {

@Html.ValidationSummary(true)

<legend>Employee</legend>

@Html.LabelFor(model => model.Name)

</div>

@Html.EditorFor(model => model.Name)

@Html.ValidationMessageFor(model => model.Name)

</div>

@Html.LabelFor(model => model.Gender)

</div>

@Html.DropDownList("Gender", new List<SelectListItem>

{

new SelectListItem { Text ="Male",Value="Male"},

new SelectListItem { Text = "Female",Value="Female"}

},"--------Select Gender--------")

@Html.ValidationMessageFor(model => model.Gender)

</div>

@Html.LabelFor(model => model.Age)

</div>

@Html.EditorFor(model => model.Age)

@Html.ValidationMessageFor(model => model.Age)

</div>

@Html.LabelFor(model => model.HireDate)

</div>

@Html.TextBoxFor(m => m.HireDate, "{0:MM/dd/yyyy}", new { @class="datepicker" })

@Html.ValidationMessageFor(model => model.HireDate)

</div>

@Html.LabelFor(model => model.Salary)

</div>

@Html.EditorFor(model => model.Salary)

@Html.ValidationMessageFor(model => model.Salary)

</div>

@Html.LabelFor(model => model.ContactNo)

</div>

@Html.EditorFor(model => model.ContactNo)

@Html.ValidationMessageFor(model => model.ContactNo)

</div>

<p>

</p>

</fieldset>

}

<div>

@Html.ActionLink("Back to List", "Index")

</div>

Edit.cshtml

@model MvcCRUD.Models.Employee

<hr />

@using (Html.BeginForm()) {

@Html.ValidationSummary(true)

<legend>Employee</legend>

@Html.LabelFor(model => model.Id)

</div>

@Html.TextBoxFor(m=>m.Id,new { disabled = "disabled", @readonly = "readonly" })

@Html.ValidationMessageFor(model => model.Id)

</div>

@Html.HiddenFor(model => model.Id)

@Html.LabelFor(model => model.Name)

</div>

@Html.EditorFor(model => model.Name)

@Html.ValidationMessageFor(model => model.Name)

</div>

@Html.LabelFor(model => model.Gender)

</div>

@Html.EditorFor(model => model.Gender)

@Html.ValidationMessageFor(model => model.Gender)

</div>

@Html.LabelFor(model => model.Age)

</div>

@Html.EditorFor(model => model.Age)

@Html.ValidationMessageFor(model => model.Age)

</div>

@Html.LabelFor(model => model.HireDate)

</div>

@Html.EditorFor(model => model.HireDate)

@Html.ValidationMessageFor(model => model.HireDate)

</div>

@Html.LabelFor(model => model.Salary)

</div>

@Html.EditorFor(model => model.Salary)

@Html.ValidationMessageFor(model => model.Salary)

</div>

@Html.LabelFor(model => model.ContactNo)

</div>

@Html.EditorFor(model => model.ContactNo)

@Html.ValidationMessageFor(model => model.ContactNo)

</div>

<p>

</p>

</fieldset>

}

<div>

@Html.ActionLink("Back to List", "Index")

</div>

Details.cshtml

@model MvcCRUD.Models.Employee

<h2>Details</h2>

<hr />>

<legend>Employee</legend>

@Html.DisplayNameFor(model => model.Name)

</div>

@Html.DisplayFor(model => model.Name)

</div>

@Html.DisplayNameFor(model => model.Gender)

</div>

@Html.DisplayFor(model => model.Gender)

</div>

@Html.DisplayNameFor(model => model.Age)

</div>

@Html.DisplayFor(model => model.Age)

</div>

@Html.DisplayNameFor(model => model.HireDate)

</div>

@Html.DisplayFor(model => model.HireDate)

</div>

@Html.DisplayNameFor(model => model.Salary)

</div>

@Html.DisplayFor(model => model.Salary)

</div>

@Html.DisplayNameFor(model => model.ContactNo)

</div>

@Html.DisplayFor(model => model.ContactNo)

</div>

</fieldset>

<p>

@Html.ActionLink("Edit", "Edit", new { id=Model.Id }) |

@Html.ActionLink("Back to List", "Index")

</p>

Delete.cshtml

@model MvcCRUD.Models.Employee

<h2>Delete</h2>

<hr />

<h3>Are you sure you want to delete this?</h3>

<legend>Employee</legend>

@Html.DisplayNameFor(model => model.Name)

</div>

@Html.DisplayFor(model => model.Name)

</div>

@Html.DisplayNameFor(model => model.Gender)

</div>

@Html.DisplayFor(model => model.Gender)

</div>

@Html.DisplayNameFor(model => model.Age)

</div>

@Html.DisplayFor(model => model.Age)

</div>

@Html.DisplayNameFor(model => model.HireDate)

</div>

@Html.DisplayFor(model => model.HireDate)

</div>

@Html.DisplayNameFor(model => model.Salary)

</div>

@Html.DisplayFor(model => model.Salary)

</div>

@Html.DisplayNameFor(model => model.ContactNo)

</div>

@Html.DisplayFor(model => model.ContactNo)

</div>

</fieldset>

@using (Html.BeginForm()) {

<p>

<input type="submit" value="Delete" /> |

@Html.ActionLink("Back to List", "Index")

</p>

}

Employee.cs

namespace MvcCRUD.Models

{

using System;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

public partial class Employee

{

public int Id { get; set; }

public string Name { get; set; }

public string Gender { get; set; }

public Nullable<int> Age { get; set; }

[DisplayFormat(DataFormatString = "{0:d-M-yyy}", ApplyFormatInEditMode = true)]

public Nullable<System.DateTime> HireDate { get; set; }

public Nullable<decimal> Salary { get; set; }

public Nullable<long> ContactNo { get; set; }

}

MyScripts.js

$(document).ready(function () {

$("table tr:even").css("background-color","lightgray");

$("table tr:odd").css("background-color", "ash");

$('.datepicker').datepicker();

});

Add these Scripts in Layout.cshtml

UI + JS Full Stack By Mr. NARASIMHA Rao

Blog Archive

Popular Posts

Monday 9 November 2015

Clear all fields in a form using Jquery

Friday 25 September 2015

Jobs

Jan 19, 2020

Walkin Angular Developer-freshers (only male Candidates) |spot Offer

Sunday 12 July 2015

Jquery Efffects

Friday 12 June 2015

Simple program using HTML/CSS/Jquery

Tuesday 2 June 2015

MVCCRUD

Quote

Motivate Yourself

Total Pageviews

Featured post

DiscoveryLearning