Creating runtime TextBox with Jquery and
Saving data in side database using Mvc 4.0 and Sql Server
Note: In this code we can increase our subject text-field with jquery in runtime and remove text-box according to yourself ,so that we can add more
and more subject according your knowledge in database sql server using
Mvc 4.0
-- Create table Student in MvcwithJquery database........................
use MvcwithJquery
create table Student
(
RollNo int primary key,
Name varchar(50) unique,
Subject varchar(max)
)
select * from
Student
Source Code Index.cshtml…………………………………………………………..
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function ()
{
// add new TextBox ....
$('#b').click(function ()
{
var v = "
<div><input type='text' />"
+ "<a
class='a1' href='' >Remove</a></div>";
$('#d').append(v);
});
// save all TextBox value in
Database with Json……..
$('#save').click(function ()
{
var rollno = $("#txtrollno").val();
var name = $("#txtname").val();
var v = "";
$('#d :text').each(function ()
{
if (v != "")
v += ",";
v += $(this).val();
}
);
$.get("Home/save",
{RollNo:rollno,Name:name,Subject: v },
function (msg)
{
if (msg == "data
saved")
{
$('#error').css("color", 'green');
$('#error').html(msg);
}
else
{
$('#error').css("color", "red");
$('#error').html(msg);
}
});
});
//Remove TextBox
................
$('.a1').live("click", function (e)
{
e.preventDefault();
$(this).parent("div").slideUp("slow", function ()
{
$(this).remove();
});
});
});
</script>
</head>
<body>
<div>
<table>
<tr><td colspan="2">Creating runtime
TextBox with Jquery and Saving data in side database using Mvc 4.0 and Sql
Server</td></tr>
<tr><td>Roll No</td><td>@Html.TextBox("txtrollno")</td></tr>
<tr><td>Name</td><td>@Html.TextBox("txtname")</td></tr>
<tr><td>Subject</td><td>
<input type="button" id="b" value="Add
textbox"
/>
<div id="d">
</div>
</td></tr>
<tr><td colspan="2"><div id="error"></div></td></tr>
</table>
<input type="button" id="save" value="save" />
</div>
</body>
</html>
Source Code
HomeController.cs…………………………………………………………..
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using
GenerateRunTimeTextBox.Models;
namespace
GenerateRunTimeTextBox.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
MvcwithJqueryEntities mm = new MvcwithJqueryEntities();
public string save(string RollNo,string Name,string Subject)
{
try
{
Student ss = new Student
{
RollNo=Convert.ToInt32(RollNo),
Name=Name,
Subject=Subject
};
mm.Students.Add(ss);
mm.SaveChanges();
return "data
saved";
}
catch(Exception ex)
{
return
ex.Message.ToString();
}
}
}
}
Result
0 comments:
Post a Comment