//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...
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...
